taro-mock

Taro 数据 Mock 插件

安装

在 Taro 项目根目录下安装

$ npm i taro-mock --save

使用

引入插件

请确保 Taro CLI 已升级至 Taro 2/3 的最新版本。

修改项目 config/index.js 中的 plugins 配置为如下

const config = {
  ...
  plugins: [
    ...其余插件

    'taro-mock'
  ]
  ...
}

这样在 taro build 编译完后就会启动一个数据 mock 服务器。

参数

Mock 插件可以接受如下参数：

| 参数项 | 类型 | 是否可选 | 用途 | | :-----| :---- | :---- | :---- | | host | string | 是 | 设置数据 mock 服务地址，默认为 127.0.0.1 | | port | number | 是 | 设置数据 mock 服务端口，默认为 9527 | | mocks | object | 是 | 设置数据 mock 接口 |

其中 mocks 参数是用于设置数据 mock 接口，以 k-v 的方式进行设置，接口的 HTTP 方法通过在 key 中进行指定，例如：

{
  'GET /api/user/1': {
    name: luckyadam
  },

  'POST /api/upload': {
    file: xxxx
  }
}

支持的 HTTP 方法有：['GET', 'POST', 'HEAD', 'PUT', 'DELETE', 'CONNECT', 'OPTIONS', 'TRACE', 'PATCH']

如果项目中的接口过多，也可以不通过插件的 mocks 配置来设置接口，可以直接在项目中创建一个 mock 目录，在 mock 下添加接口配置文件来设置接口，接口配置文件支持使用 ES6 语法以及 TS，例如。

如上配置可以改写成，在项目根目录下创建 mock 目录，添加一个 api.ts 文件，内容如下：

// mock/api.ts

export default {
  'GET /api/user/1': {
    name: luckyadam
  },

  'POST /api/upload': {
    file: xxxx
  }
}

支持传入函数进行请求判断, 写法如下:

export default {
  "POST /api/address/address": (req, res)=>{
    console.log(req.body);
    const send = {}
    if(req.body.id == 1){
      send = {
        code: 1,
        msg: "获取成功",
        data: {
          id: 1
        }
      }
    } else {
      send = {
        code: 1,
        msg: "获取成功",
        data: {
          id: 2
        }
      }
    }
    res.send(send);
  }
}

同时也支持使用 mockjs 来生成 mock 数据

安装 mockjs

$ npm i mockjs --save

使用如下

// /mock/api.ts
import mockjs from 'mockjs'

export default {
  'GET /api/tags': mockjs.mock({
    'list|1-10': [{
      // 属性 id 是一个自增数，起始值为 1，每次增 1
      'id|+1': 1
    }]
  })
}