效果展示：
首先来看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的微信小程序已经完成。
