微信开发之小程序模拟json数据实现页面调试_如果微信小程序使用了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。

效果如图：