小程序项目使用Mock数据

安装mock.js

一、vue编写的小程序项目

1、安装mock.js

npm install mockjs --save-dev
//--save-dev是把安装信息写入 package.json 文件
//--save || -S // 运行依赖（发布）
//–save-dev || -D //开发依赖（辅助）

2、引入 mockjs
在跟目录下的main.js中引入mockjs

image.png

require('mockjs');

image.png

3、调用接口，接口和data内的参数后面会有介绍

created () {
    wx.request({
      url: '/users',
      data:{
        id:"31"
      },
      success:function(res){
        console.log(res);
      }
    })
  }

4、运行开发者工具，在调试器内找到mock设置

image.png
5、设置开发者工具内的mock
自定义选项参考https://developers.weixin.qq.com/miniprogram/dev/devtools/api-mock.html

• AP信息
  api接口设置为request
• 参数匹配规则
  第一项url 定义接口，此处接口就是上面需要调用的接口
  第二项data 填写定义的data参数，此处定义的参数需要在调用时传的参，不一致的话请求会失败
• 模拟返回
  数据生成选择数据模版，在面板内参考上面网址的API即可制造和规定返回数据及格式，例如

  "data": {
    "list|10": [
      {"id|+1": 1, "name": "@FIRST"}
    ]
  },
  "statusCode": 200,
  "header": {
    "content-type": "application/json; charset=utf-8"
  }
}

image.png

• 打开控制台
  在微信开发者工具内查看 console 和network 都可看到返回的数据

注意：正式上线之前记得取消引入js 避免不必要的麻烦

二、原生小程序开发

**1、下载mockjs **
可以官网下载也可https://gitee.com/wzq915643957_admin/WxMock.git下载，将下载的dist/mock.js考入到项目内
2、在app.js内 引入mockjs
require("./utils/mock.js");
重复上面vue方法的3、4、5步骤即可
注意原生接口地址必须带http://

image.png