微信小程序——页面中使用本地json数据

拼搏现实的明天。 2023-02-21 09:04 40阅读 0赞

### 1，创建数据文件 ###

![20200629184025939.png][]

创建一个testdata文件，再创建一个data.js文件用来写我们的json数据

data.js页面：

var localData = {
      "list":[
        { 
          "id":55,
          "name":"小明",
          "age":18,
          "month":"2020-5-21",
          "content":"微信小程序中实现模拟数据报文进行页面展示"
        },
        { 
          "id":56,
          "name":"李雯",
          "age":17,
          "month":"2020-6-1",
          "content":"微信小程序"
        }
      ]
    }
     
    module.exports = {
      postData: localData
    }

### 2，引入json数据文件，调用  ###

我们需要在我们的pages目录的文件下面使用到json数据文件，如下为在home/index页面使用情况

1）这里的pastData为我们在data.js数据文件暴露出来的变量，在这里引入

2）设置变量，在onLoad时直接赋值渲染出数据，这时可以先console看数据情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

![20200629185053938.png][]

###  3，在页面显示 ###

<view>{
       {datalist.postData.list[0].name}}</view>
     <view wx:for="{
       {datalist.postData.list}}"  wx:key="*this">
      <view>
    	 {
       {item.name}}
    	</view>
     </view>

效果，数据显示出来了

![20200629184959549.png][]

[20200629184025939.png]: https://img-blog.csdnimg.cn/20200629184025939.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629184303714.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200629185053938.png]: https://img-blog.csdnimg.cn/20200629185053938.png
[20200629184959549.png]: https://img-blog.csdnimg.cn/20200629184959549.png