微信小程序——使用mock.js模拟数据

小鱼儿 2023-02-22 03:55 336阅读 0赞

### 一，创建目录 ###

![20200701143823769.png][]

再根目录utils目录下面创建 WxMock.js文件和api.js文件

### 二，WxMock.js  ###

WxMock.js下载地址：[https://github.com/webx32/WxMock][https_github.com_webx32_WxMock]

Mock.js 使用方式见 [http://mockjs.com/examples.html][http_mockjs.com_examples.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

### 三，api.js ###

api.js：配置模拟数据和后台接口数据，通过 DEBUG = true;//切换数据入口

### 四，页面调用 ###

index.js

var API = require('../../utils/api.js')
    Page({
        data: {
        },
        onLoad: function () {
            console.log('onLoad')
            var that = this
            // 使用 Mock
            API.ajax('', function (res) {
                //这里既可以获取模拟的res
                console.log(res)
                that.setData({
                    list:res.data
                })
            });
    
            console.log(this.data.list)
        }
    })

得到数据：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

参考文章：[https://www.jianshu.com/p/1f4a4fa755bb][https_www.jianshu.com_p_1f4a4fa755bb]

[https://www.cnblogs.com/lguow/p/9138094.html][https_www.cnblogs.com_lguow_p_9138094.html]

[20200701143823769.png]: https://img-blog.csdnimg.cn/20200701143823769.png
[https_github.com_webx32_WxMock]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fwebx32%2FWxMock
[http_mockjs.com_examples.html]: http://mockjs.com/examples.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070114442586.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200701150013413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[https_www.jianshu.com_p_1f4a4fa755bb]: https://www.jianshu.com/p/1f4a4fa755bb
[https_www.cnblogs.com_lguow_p_9138094.html]: https://www.cnblogs.com/lguow/p/9138094.html