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

一、简单使用：

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 Mock：https://www.easy-mock.com/

优点：网站功能丰富

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

2、本地部署Easy Mock：https://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

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