@tarojs/plugin-mock

Taro 数据 Mock 插件

安装

在 Taro 项目根目录下安装

$ npm i @tarojs/plugin-mock --save

使用

引入插件

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

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

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

    '@tarojs/plugin-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
  }
}

同时也支持使用 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
    }]
  })
}