小程序Mock快速入门

2020-07-03 14:05:39 阅读：369 来源： 互联网

一、简单使用：

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: []
            }
        },
        onl oad() {},
        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的用法，因此最终选定了该方案。

标签：入门,res,程序,js,list,mock,com,Mock
来源： https://www.cnblogs.com/winchance/p/13230063.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小程序Mock快速入门