微信小程序——本地json数据在小程序中的展示

效果展示：

首先来看json数据：

我在项目里新建了data文件夹，并在该文件夹内新建了json.js文件，用于存放json数据。

接下来在该json.js内设置了大约10组的json数据，其格式为：

var json =[  {json1},{json2},{json3},······{json10}   ]

如下图：

定义好本地json数据后，还要为其定义一个数据出口（json数据后面定义即可）：

我将这个出口命名为testJsonList，类型为Json数据，后面的操作需要用到。

 

本地数据准备好后，我们进入正题：

我在pages目录下又新建了一个test文件夹，用来写数据展示的布局界面和逻辑。

这里要提一下：

①这个require后面的参数是入口文件的文件路径，但是注意必须是相对路径，不能绝对路径。

②this.setData方法，指定我们要展示的showJsonList的数据为刚刚我们设置的10组本地Json数据。

然后我们新建wxml文件，写布局

wx:for的对象要用刚刚在js中想要展示的showJsonList。

最后wxss的代码在下面，界面美化这方面确实不擅长，大家凑活看看吧。

/* pages/test/test.wxss */

.item-container{

padding: 25rpx;

background: white;

border: green;

flex-direction: row;

border-width: 5rpx

}

 

.item-detail{

margin-left:20rpx;

padding: 25rpx;

flex-direction:column;

line-height: 70rpx

}

 

.item-id{

font-size: 55rpx;

color: black;

padding: 10rpx;

 

background-color: green;

box-shadow: 6rpx 6rpx 6rpx 6rpx gray;

margin: auto;

text-align: center;

line-height: 65rpx;

}

 

.item-name{

font-size: 60rpx;

color: black;

padding: 10rpx;

margin-left:20rpx;

 

background-color: green;

box-shadow: 6rpx 6rpx 6rpx 6rpx gray;

 

text-align: center;

line-height: 65rpx;

}

 

.item-age{

font-size: 55rpx;

color:black;

padding: 10rpx;

margin-left:20rpx;

 

background-color: green;

box-shadow: 6rpx 6rpx 6rpx 6rpx gray;

text-align: center;

line-height: 65rpx;

}

 

至此，展示本地json的微信小程序已经完成。