微信小程序本地json数据在页面展示

新建一个json文件，使用module.exports定义出口，要不然其他文件读取不到json数据。还有一个需要注意的小细节，本地json数据放在js文件里面，不是json文件，不然会报错。

// 本地模拟json数据
var jsonData = [
  {
    "id":1,
    "name": "Tom1"
  },
  {
    "id": 2,
    "name": "Tom2"
  },
  {
    "id": 3,
    "name": "Tom3"
  },
  {
    "id": 4,
    "name": "Tom4"
  },
  {
    "id": 5,
    "name": "Tom5"
  }
]

// 定义数据出口
module.exports = {
  dataList: jsonData
}

wxml代码

<view>
  <block wx:for="{{dataList}}" wx:key="{{index}}">
      <view>{{item.id}}: {{item.name}}</view>
  </block>
</view>

js代码里面引入本地json数据，require后面的参数是入口文件的文件路径，但是注意必须是相对路径，不能绝对路径。

// 引入本地文件
var localData = require("../../static/localdata.js");

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  //在这里加载本地json数据
  onLoad: function () {
    this.setData({
      //localData.dataList获取本地localdata.js里定义的dataList数据，并赋值给dataList
      dataList: localData.dataList
    });
  }
})