微信小程序结合mock.js实现后台模拟及调试

下面是“微信小程序结合mock.js实现后台模拟及调试”的完整攻略，包含以下几个步骤：

1.安装mock.js

在小程序目录下，使用npm安装mock.js：

npm install mockjs --save-dev

2.创建mock数据文件

在小程序目录下，创建一个mock文件夹，然后在mock文件夹下创建一个mock.js文件，在该文件中编写mock数据：

import Mock from 'mockjs';

const data = Mock.mock({
  'list|5-10': [{
    'id|+1': 1,
    'title': '@ctitle',
    'content': '@cparagraph'
  }]
})

Mock.mock('/api/list', 'get', () => {
  return data
})

上述代码模拟了一个api/list接口，返回一个包含5-10个对象的数组，每个对象包含id、title、content三个属性。

3.在小程序中使用mock数据

在需要使用mock数据的地方引入mock.js：

const Mock = require('/mock/mock.js')

然后使用wx.request发送请求：

wx.request({
  url: '/api/list',
  success: function(res) {
    console.log(res.data)
  }
})

上述代码中，我们发送一个/api/list的get请求，成功后打印出返回的数据。

4.调试mock数据

为了方便调试，在开发者工具中可以使用vscode编辑mock数据文件。为此我们需要在开发者工具中开启“文件监听”，然后在vscode中打开mock数据文件，修改保存后开发者工具会自动刷新，无需手动重新编译运行。

示例1：

在mock.js中模拟一个接口，返回一组模拟的用户数据:

Mock.mock('/api/user', 'get', () => {
  const data = Mock.mock({
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1
  })
  return data
})

然后在小程序中发送请求，获取该接口返回的数据：

wx.request({
  url: '/api/user',
  success: function(res) {
    console.log(res.data)
  }
})

示例2：

我们可以在mock数据中编写复杂的逻辑：

Mock.mock('/api/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body)

  if (username === 'admin' && password === '123456') {
    return {
      code: 200,
      token: Mock.Random.string(32)
    }
  } else {
    return {
      code: 401,
      message: '用户名或密码错误'
    }
  }
})

通过上述代码模拟了一个登录接口，如果用户名和密码正确，返回一个code为200的成功信息，同时生成一个32位随机字符串用于作为token。如果用户名或密码错误，则返回一个code为401的失败信息。

在小程序中使用如下代码调用该接口：

wx.request({
  url: '/api/login',
  method: 'POST',
  data: {
    username: 'admin',
    password: '123456'
  },
  success: function(res) {
    if (res.data.code === 200) {
      wx.setStorageSync('token', res.data.token)
    } else {
      console.error(res.data.message)
    }
  }
})

上述代码中，我们使用wx.request发送了一个POST请求，传递了用户名和密码。如果请求成功，我们把返回的token存储在本地storage中。如果请求失败，打印出返回的错误信息。