小程序模拟调用本地json接口数据

把准备好的json数据渲染到前端界面,模拟在这里加载本地json数据。

1.新建一个data文件夹,在文件夹底下新建一个js文件,写好准备的json格式的数据:并且定义数据出口

module.exports = {

  dataList: json

}

json:

// 本地模拟json数据

var json = [{

  "id": 1

},

{

  "id": 2

},

{

  "id": 3

},

{

  "id": 4

}

]

// 定义数据出口

module.exports = {

  dataList: json

}

2.wxml

<!--列表渲染  -->

<block wx:for="{{dataList}}" wx:key="item">

<view class='item-container'>

  <!--序列号  -->

  <text>{{item.id}}</text>

</view>

</block>

3.js

//引入本地json数据,这里引入的就是第一步定义的json数据

var jsonData = require('../../data/json.js');

Page({

  data: {

  },

  //我们在这里加载本地json数据

  onLoad: function () {

    this.setData({

      //jsonData.dataList获取json.js里定义的json数据,并赋值给dataList

      dataList: jsonData.dataList

    });

  },

})

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容