微信小程序--Json数组的构造与调用

本文主要引导微信小程序初学者如何对Json数组进行构造与调用。

###Json数组的构造与调用

Tips：小程序json的数组的形式与WEB前端是完全相同。
####方法一：当前页面构造
模型图

//index.js当前页
Page({
  data: {
    parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模拟商品参数数据
  },
})

Tips:此处的data内的parameter就是我们构造的Json数组。

//index.xml当前页
 <block wx:for="{{parameter}}" wx:key="parameter">
    <text class='parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id='{{item.id}}' bindtap='parameterTap'>{{item.name}}</text>
 </block>

Tips:此处通过wx：for循环遍历的方式将parameter数组的name显示在前端页面，具体效果如上图所示，但是.wcss没有上传，所以需要自行完善。

####方法二：引用外部.js的json数组
外部data.js

	
	 parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模拟商品参数数据
	 
	 module.exports = {
	   parameter:  parameter,//每一个新的方法或者json都是需要指向对象的
	}//这个是必不可少，module.exports表示指向新的对象

当前页index.js

	var util=require('pages/data/data.js');//分号必须有，然后url路径可以是相对路径也可以是绝对路径，此处就是调用外部data.js的方式
	Page({
	   onLoad: function () {
			let parameter=util.parameter//此时parameter就是我们的json数组parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }]
			this.setData({
				parameter:parameter,
			})
		}
})

Tips:方法二将data.js+index.js代码的结合实现的效果就是方法一的index.js，二者是等价的，唯一好处就是方法二的data.js可以被多次调用
####方法三：动态添加json数据
index.js页面

data:{
	  parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模拟商品参数数据}
,
onLoad: function () {
	  this.data.parameter[0].checked = true;//给parameter第一个数组动态添加checked：true
    this.setData({
      id: options.id,
      parameterVal: this.data.parameter[0].name,
      parameter: this.data.parameter,
    })
    //如果想获取当前的数组，需要通过this.data.对象,如下
    console.log(this.data.parameter)
}

实现的效果图如下：