后浪云百度小程序教程：Mock

2022-5-15
  • Mock
    • 启用 Mock 功能
    • 管理 mock 数据
      • 过滤规则
        • 参数过滤
        • 过滤函数
      • 模拟返回
        • 1. JSON
        • 2. Mock.js 格式数据

    Mock

    此功能在 3.6.0 之后版本可用。

    开发者工具 3.6.0 以上的版本现在支持 Mock 接口功能，可以模拟部分小程序 api 的调用结果。

    目前支持的 api 为 swan.request swan.downloadFile swan.uploadFile swan.getLocation swan.checkSession。

    启用 Mock 功能

    在开发者工具的工具栏点击 Mock 按钮，即可进入 Mock 功能的管理页面。

    打开是否启用 mock 的开关并选择项目后，即可启用 Mock 功能。启用 Mock 功能后，小程序调用的 api 如果匹配到了 Mock 规则就会使用 Mock 数据返回结果。如果没有匹配，会使用真实数据返回。

    后浪云百度小程序教程：Mock插图

    管理 mock 数据

    点击新建 mock 项目按钮，新建一个 Mock 项目。

    新建项目后会自动进入项目详情页。可以在详情页管理项目规则。每条规则对应一个 api。目前支持的 api 为 swan.request swan.downloadFile swan.uploadFile。可通过下拉选择。

    后浪云百度小程序教程：Mock插图1

    过滤规则

    可以通过过滤规则来过滤是否匹配 Mock 数据，如果过滤规则都通过的情况才会返回 Mock 数据。

    过滤规则分为参数过滤和函数过滤。

    后浪云百度小程序教程：Mock插图2

    参数过滤

    可配置参数名和参数对应的正则表达式来匹配调用 api 传入的参数。可输入多条参数过滤规则。

    参数的正则表达式需要传入正则表达式内容的字符串。如想匹配 /abcd/，传入 abcd 即可。

    注意正则表达式中的特殊字符是需要转义的。如相匹配 path 为 http://example.com/path/to/data?a=1 可以输入 http:\/\/example\.com\/path\/to\/data\?a=1

    对于对象类型的属性，可以使用 . 字符来定位到要匹配内容的最后一级。如传参为 {data: {isMocked: ‘mocked’}} 想匹配 data.isMocked 的值。在参数名输入 data.isMocked，在参数正则表达式输入 mocked。

    这里需要注意，函数类型的参数是匹配不到的。比如 success fail complete 等是不会匹配到参数的。

    过滤函数

    启用过滤函数后可以通过函数来控制过滤规则。过滤函数返回 true 就说明匹配到了过滤规则，就会返回 mock 数据。当然前提是已经通过参数过滤规则的校验。如果只想使用过滤函数而不使用参数过滤的话可以不写过滤参数。

    过滤函数的函数名需要为 filter。函数的参数为 api 去掉回调后的入参。

    比如下面的代码

    • JS
     
 
 
      
  
  
  
    1. swan.request({
      2. 
  
  
  
    2.  url: 'https://www.baidu.com',
      3. 
  
  
  
    3.  data: {
      4. 
  
  
  
    4.  mock: 1
      5. 
  
  
  
    5.  },
      6. 
  
  
  
    6.  success(res) {
      7. 
  
  
  
    7.  console.log('success', res);
      8. 
  
  
  
    8.  },
      9. 
  
  
  
    9.  fail(err) {
      10. 
  
  
  
    10.  console.log('fail', err);
      11. 
  
  
  
    11.  }
      12. 
  
  
  
    12. });
      13.

    入参为

     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  url: 'https://www.baidu.com',
      3. 
  
  
  
    3.  data: {
      4. 
  
  
  
    4.  mock: 1
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6. }
      7.

    模拟返回

    模拟返回可以控制返回的回调 success 或 fail 。选择后 mock 数据就会调用对应的回调。

    数据的生成方式有 JSON 和 Mock.js 两种。

    1. JSON

     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "data": "",
      3. 
  
  
  
    3.  "statusCode": 200,
      4. 
  
  
  
    4.  "header": ""
      5. 
  
  
  
    5. }
      6.

    2. Mock.js 格式数据

    Mock.js 模板数据会有预览数据展示。

    Mock.js 语法

    例如输入

     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "data": {
      3. 
  
  
  
    3.  "list|2": [{
      4. 
  
  
  
    4.  "id|+1": 0
      5. 
  
  
  
    5.  }]
      6. 
  
  
  
    6.  },
      7. 
  
  
  
    7.  "statusCode|200": 1,
      8. 
  
  
  
    8.  "header": ""
      9. 
  
  
  
    9. }
      10.

    会在数据预览中看到如下数据

     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "data": {
      3. 
  
  
  
    3.  "list": [
      4. 
  
  
  
    4.  {
      5. 
  
  
  
    5.  "id": 0
      6. 
  
  
  
    6.  },
      7. 
  
  
  
    7.  {
      8. 
  
  
  
    8.  "id": 1
      9. 
  
  
  
    9.  }
      10. 
  
  
  
    10.  ]
      11. 
  
  
  
    11.  },
      12. 
  
  
  
    12.  "statusCode": 200,
      13. 
  
  
  
    13.  "header": ""
      14. 
  
  
  
    14. }
      15.

    后浪云百度小程序教程：Mock插图3

    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/185888/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图