微信開發之小程式模擬json資料實現頁面除錯

我們在專案開發時，經常會遇到Http伺服器介面和前端開發並行的情況。對於前端開發者來說，尤其是時間進度要求較高的專案，不可能一直等服務介面可除錯了再開始去開發頁面。因此，我們可以提前根據服務端介面文件，模擬http服務返回的報文內容，加快開發除錯進度。

下面舉例說明，如何在微信小程式中實現模擬資料包文進行頁面展示：

1、建立js檔案，模擬測試資料；

2、載入js檔案，呼叫測試資料；

3、頁面展示呼叫所需資料

1、新建testdata.js，內容如下：

var localData = {
  "list": [
    {
      "data": [
        {
          "id": 443,
          "title": "Android學習",
          "content": "Android學習的主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題",
          "from": "知乎",
          "imgSrc": "/images/qd.png",
          "iscollect": "1",
          "datetime": "2017-09-11 10:12",
          "open": true,
          "others": null,
          "parentNode": [
            121,
            232
          ]
        },
        {
          "id": 412,
          "title": "PHP學習論壇",
          "imgSrc": "http://p1.pstatp.com/origin/37e300054cb525cf8807",
          "content": "PHP，全世界最好的語言，學習提高，知識豐富",
          "from": "ITEYE",
          "iscollect": "0",
          "datetime": "2017-06-22 8:36",
          "open": true,
          "others": null,
          "parentNode": [
            121,
            232
          ]
        }
      ],
      "id": 1001,
      "name": "5月份交易記錄",
      "month": "2018年5月",
      "label": "晶片備案1",
      "open": true,
      "parentNode": [
        121
      ]
    },
    {
      "data": [
        {
          "id": 443,
          "title": "Android學習2",
          "content": "Android學習的主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題",
          "from": "知乎",
          "imgSrc": "/images/qd.png",
          "iscollect": "1",
          "datetime": "2017-09-11 10:12",
          "open": true,
          "others": null,
          "parentNode": [
            121,
            232
          ]
        },
        {
          "id": 443,
          "title": "Android學習2",
          "content": "Android學習的主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題內容資訊主題",
          "from": "知乎",
          "imgSrc": "/images/qd.png",
          "iscollect": "1",
          "datetime": "2017-09-11 10:12",
          "open": true,
          "others": null,
          "parentNode": [
            121,
            232
          ]
        }
      ],
      "id": 1002,
      "name": "4月份交易記錄",
      "month": "2018年4月",
      "label": "晶片備案2",
      "open": true,
      "parentNode": [
        121
      ]
    }
  ]
};

module.exports = {
  postData: localData
}

2、載入、呼叫：

控制檯輸出：

3、頁面呼叫js變數，這裡需要注意這裡有個坑：WXML 中的動態資料繫結均來自對應 Page 的 data。

效果如圖：