小程序集成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

還沒認真考究，不過好像不利於工程化。