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

古城微笑少年丶 2022-10-11 01:00 249阅读 0赞

把准备好的json数据渲染到前端界面，模拟在这里加载本地json数据。效果如下，能看到界面渲染的数据。

![图片.png][.png]

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

module.exports = {
      dataList: json
    }

![图片.png][.png 1]

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：wxss

.item-container{
     border: 5px solid #ffffff;
      height: 110rpx;
      line-height: 110rpx;
      margin-bottom:4rpx;
      text-align: center; 
      background: #f6c8fb;
      color: #ffffff;
      
    }

4：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
        });
      },
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[.png]: /images/20221005/f822a4f58f9046c88ed42611a2cd4771.png
[.png 1]: /images/20221005/9d5aaa26769f4c5eaacdf6b2a8341fa1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/f952b30f5ed146f8940919f30ef8b458.png