创新互联百度小程序教程：Mock

  • 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 项目。

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

    过滤规则

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

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

    参数过滤

    可配置参数名和参数对应的正则表达式来匹配调用 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
    标题网址：http://www.shufengxianlan.com/qtweb/news46/430046.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    商城网站知识

    分类信息网

    成都能净科技　　 　成都二枢机房　　 　绵阳网站制作　　 　响应式网站　　 　全网营销推广　　 　成都棕数机房　　 　响应式网站　　 　成都广告招牌制作　　 　成都展柜设计公司　　 　四川柴油发电机　　 　成都圣月制冷　　 　成都网站设计　　 　网站空间　　 　小程序开发　　 　德阳服务器托管　　 　成都LED显示屏　　 　成都网页设计　　 　名片印刷　　 　联通机房服务器托管　　 　安娜尚美