背景

小程序开发者工具本身自带api mock工具，但是在真机调式的时候mock无法生效，所以想寻找一种可真机调试的mock方案。

better-mock介绍

web端有很好用的mockjs，但已经停止维护了。better-mock在mockjs的基础上改进，并兼容了小程序。原理上就是对小程序的request方法拦截，并返回自定义的mock数据。

如何使用

1.可以使用npm直接安装better-mock，或者直接下载release文件，然后引入。

const Mock = require('better-mock/dist/mock.mp.js') // 引入better-mock

Mock.mock('http://example.com/path/to', {  // mock接口
  phone: '@PHONE'
})

wx.request({ 
  url: 'http://example.com/path/to',
  success (res) {
    console.log(res.data.phone) // 13687529123
  }
})

2.使用方法与mockjs基本一致

Mock.mock('/mock_url', 'post', {
  'list|1-10': [{
    'id|+1': 1,
    'email': '@EMAIL'
  }]
})

返回数据如下：

{
  "statusCode":200,
  "list": [
    {
      "id": 1,
      "email": "g.tapnqamfka@tiboen.ad"
    },
    {
      "id": 2,
      "email": "x.sdha@ysyudl.dm"
    }
  ]
}

参考文档：https://lavyun.github.io/better-mock/document/miniprogram.html#介绍

Tips

实际使用过程中还遇到了一些其他的问题：
1.测试时需要返回200以外状态码，测试异常系。除了statusCode，还需要返回自定义的code。

解决方案：修改了mock.mp.js文件（8427行左右），mock时传入statusCode，再修改返回值，确保可以方便地调整返回状态码。同理，可以自定义返回的数据结构。

传入示例如下：

2.单页面请求多个服务器，只想启用部分接口的mock
解决方案： 不同服务器使用单独的mock文件，在app.js中根据需要启用不同mock。每个文件增加单个接口mock是否启用的控制。

启用不同服务器mock：

通过config.POST_TEST控制单个接口是否启用：