API Mock

為了(le)讓開發者更方(fang)便地開發小程(cheng)序(xu)，開發者工具提供(gong)了(le) API Mock 的能力，可以模擬部(bu)分 API 的調用結果。

運(yun)行環(huan)境 使(shi)用方法 基礎用法

Mock 的入口在工具調試面板頂(ding)部的 Tab，點 + 新建規則

規則示例

運行如下代碼：

wx.request({
  url: '//example.com/ajax?dataType=member',
  dataType: 'json',
  success(res) {
    console.log(res)
  }
})

將命中(zhong)上面的(de)規則，得到以(yi)下數據：

規則優先級

當(dang)對一(yi)個(ge) API 配(pei)置了多個(ge)規(gui)(gui)則時，靠前的規(gui)(gui)則，會優先匹配(pei)，當(dang)一(yi)條規(gui)(gui)則被命中，后面的規(gui)(gui)則將(jiang)不會再被執行。

可(ke)以通(tong)過拖(tuo)拽的(de)形式，改(gai)變規則(ze)的(de)優先順(shun)序(xu)，得到想要的(de) Mock 結(jie)果(guo)。

多層級參數匹配

如果(guo)匹配的參數類型不(bu)是一個(ge)基本類型，而是一個(ge) Object 參數下的某個(ge)屬性，這時需要用到多層級匹配。

例如：當wx.request調(diao)用的data參數帶有一個(ge)名為mock的屬性值(zhi)為true的時候，才通過 Mock 規則(ze)返回結果(guo)，參數匹配規則(ze)應填(tian)寫(xie)：

上述例子中的wx.request調用，需要修(xiu)改(gai)成：

wx.request({
  url: '//example.com/ajax?dataType=member',
  data: {         // \
    mock: true	  // - 添(tian)加這三行
  },              // /
  dataType: 'json',
  success(res) {
    console.log(res)
  }
})

才能命中此規則。

使用數據模板

當(dang)需要模(mo)擬的數據比較復雜(za)的時(shi)候，可(ke)以(yi)使(shi)用數據模(mo)板快速生成符合你(ni)要求(qiu)的數據。

數據模板的語(yu)法采用自開源(yuan)庫(ku) Mock.js，詳細的語(yu)法可以在該項目文檔中查看。

例如：上面的(de)例子(zi)，想要返回的(de) list 包(bao)含 10 項不同的(de)數(shu)據，可以在“數(shu)據生成”中(zhong)選擇(ze)“數(shu)據模(mo)板”，填入如下模(mo)板：

{
  "data": {
    "list|10": [
      {"id|+1": 1, "name": "@FIRST"}
    ]
  },
  "statusCode": 200,
  "header": {
    "content-type": "application/json; charset=utf-8"
  }
}

模板編輯器(qi)下方會根據模板實時生(sheng)成數據預覽，方便確(que)認模板的正確(que)性。

重新調用(yong)上(shang)面(mian)的代碼，將返回：

規則導入導出

當需要與項目中其(qi)他成員共享規(gui)(gui)則時，可(ke)以在 Mock 中導出規(gui)(gui)則配(pei)置，再(zai)把配(pei)置文(wen)件(jian)發(fa)送給其(qi)他成員導入即可(ke)，操(cao)作入口如圖：

注意事項 目(mu)前支持Mock 的(de) API 列表：