• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序集成Mock.js快速入门

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、简单使用:

1、直接拷贝better-mock.js文件到工程:

 

 2、然后就OK了,能在uni-app Vue页面中直接调用。

二、工程化:

 

 

import mockA from './mock-abc/mock-a.js'
import mockB from './mock-abc/mock-b.js'
function execMock(){
    mockA.mockA();
    mockB.mockB();
}
module.exports={execMock}
// 界面A的Mock Data
import Mock from '@/libs/mock/better-mock.mp.js'

function mockA(){
    Mock.mock('https://sontech-cloud-texpro-ews001.hz.wise-paas.com.cn/mocka',{
            // 属性 list 的值是一个数组,其中含有3个元素
            'list|3': [{
                'name|3': '钱学森',
                'age|1-100': 1,
                'isGay|4-6': true,
                'people|+1': ['黄种人', '黑种人', '白种人'],
                'sayHi': /[a-z][A-Z][0-9]/
            }]
        });
    // 输出结果
    // console.log(JSON.stringify(res, null, 4));//使用四个空格缩进
}

module.exports={mockA}

B模块与A模块基本一致。

三、全局注入:

 

 四、Vue页面调用,然后Mock.js会自动拦截ajax请求:

<template>
    <view>
        <view v-for="(item,index) in list" :key="index">
            <text style="color: white;">{{item.name}}</text>
        </view>
    </view>
</template>

<script>
    import ajax from "@/api/method.js";
    var _self;
    export default {
        data() {
            return {
                list: []
            }
        },
        onLoad() {},
        created() {
            _self=this;
            let url1 = '/mocka';
            
            ajax.getMethod(url1, function (res) {
                console.log(JSON.stringify(res));
                _self.list=res.data.list;
            })
            
            let url2 = '/mockb';
            
            ajax.getMethod(url2, function (res) {
                console.log(JSON.stringify(res));
            })
            
        }
    }
</script>

<style>
</style>

 

方案选型:

1、采用大搜车的Easy Mockhttps://www.easy-mock.com/

优点:网站功能丰富

缺点:网站有时候会卡死,可能访问人数多

2、本地部署Easy Mockhttps://github.com/easy-mock/easy-mock

优点:a.功能丰富;b.前后端分离,Swagger作为测试工具

缺点:方案还是太重了,由于团队小,我只是想用最简单的方式,集成到微信小程序中;

2、采用Mock.js:https://github.com/nuysoft/Mock

优点:采用人数较多;

缺点:未能直接支持微信小程序;

3、采用Fork自Mock.js,并对微信做了适配的库:https://github.com/lavyun/better-mock

优点:能直接支持微信小程序;

缺点:Star数少,但考虑到并未改变Mock.js的用法,因此最终选定了该方案。

4、微信开发者工具提供的方案:https://developers.weixin.qq.com/miniprogram/dev/devtools/api-mock.html

还没认真考究,不过好像不利于工程化。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap