数据 Mock

安装

Mpx 提供了对请求响应数据进行拦截的 mock 插件，可通过如下命令进行安装：

npm i @mpxjs/mock

使用说明

新建 mock 文件目录及文件(例如：src/mock/index.js )：

// src/mock/index.js
import mock from "@mpxjs/mock";
mock([
  {
    url: "http://api.example.com",
    rule: {
      "list|1-10": [
        {
          "id|+1": 1
        }
      ]
    }
  }
]);

在入口文件( app.mpx )中引入：

<script type="text/javascript">
  import "mock/index"; // 引入mock即可
</script>
<!-- 其他配置 -->
<script type="application/json">
  {
    "pages": ["./pages/index"],
    "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "WeChat",
      "navigationBarTextStyle": "black"
    }
  }
</script>

由于 mock 为全局自动代理，执行@mpxjs/mock所暴露的方法之后会立即拦截小程序的原生请求，如果需要根据不同环境变量等去控制是否使用 mock 数据，可以参考如下方法：

// src/mock/index.js
import mock from "@mpxjs/mock";
export default () => mock([
  {
    url: "http://api.example.com",
    rule: {
      "list|1-10": [
        {
          "id|+1": 1
        }
      ]
    }
  }
]);

<!-- app.mpx -->
<script type="text/javascript">
  import mockSetup from "mock/index";
  // 当为开发环境时才启用mock
  process.env.NODE_ENV === "development" && mockSetup();
</script>

Mock 入参

@mpxjs/mock 所暴露的函数仅接收一个类型为 mockRequstList 的参数，该类型定义如下：

type mockItem = {
  url: string,
  rule: object
}
type mockRequstList = Array<mockItem>

//示例:
let mockList: mockRequstList = [
  {
    url: "http://api.example.com", // 请求触发后匹配到该链接时其响应数据会被mock拦截
    rule: { // mock生成返回数据的规则
      'number|1-10': 1
    }
  }
]

Mock 规则示例

• 基本类型数据生成

import mock from "@mpxjs/mock";
mock([
  {
    url: "http://api.example.com",
    rule: {
      "number|1-10": 1, // 随机生成1-10中的任意整数
      "string|6": /[0-9a-f]/, // 值支持正则表达式,随机生成6位的16进制值
      "boolean|1": true // 随机生成一个布尔值,值为 true 的概率是 1/2
    }
  }
]);
// 请求 http://api.example.com 后返回值为:
// {
//   number: 2,
//   string: "e1e6dc",
//   boolean: false
// }

• 生成随机长度id自增的列表

查看示例

import mock from "@mpxjs/mock";
mock([
  {
    url: "http://api.example.com",
    rule: {
      "list|2-5": [ // 生成长度范围在2-5的数组
        {
          "id|+1": 0 // id每次自增1
        }
      ]
    }
  }
]);
// 请求 http://api.example.com 后返回
// {
//   "list": [{
//     "id": 0
//   },{
//     "id": 1
//   },{
//     "id": 2
//   }]
// }

• pick对象中的随机个值

查看示例

import mock from "@mpxjs/mock";
mock([
  {
    url: "http://api.example.com",
    rule: {
      "object|2": { // 随机选取object中的两条数据作为返回
        "310000": "上海市",
        "320000": "江苏省",
        "330000": "浙江省",
        "340000": "安徽省"
      }
    }
  }
]);
// 请求 http://api.example.com 后返回
// {
//   "object": {
//     "330000": "浙江省",
//     "340000": "安徽省"
//   }
// }

更多生成规则可查阅 Mock官方文档-Syntax Specification (opens new window)

更多示例可查看 Mock示例 (opens new window)

WARNING

由于小程序环境的局限性，mockjs 依赖 eval 函数实现的相关能力(如：占位符)无法正确运行