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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38209578/article/details/78810165

本文主要引导微信小程序初学者如何对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)
}

实现的效果图如下:
这里写图片描述

展开阅读全文

没有更多推荐了,返回首页