小程序开发相关

微信小程序

setData()

setData其一般调用格式是 setData(data, callback)，其中data是由多个key: value构成的Object对象。

// page.js
Page({
  onLoad: function(){
    this.setData({
      text: 'change data'
    }, function(){
      // 在这次setData对界面渲染完毕后触发
    })
  }
})

实际在开发的时候，页面的data数据会涉及相当多的字段，你并不需要每次都将整个data字段重新设置一遍，你只需要把改变的值进行设置即可，宿主环境会自动把新改动的字段合并到渲染层对应的字段中，如下代码所示。
data中的key还可以非常灵活，以数据路径的形式给出，例如

// page.js
Page({
  data: {
    a: 1, b: 2, c: 3,
    d: [1, {text: 'Hello'}, 3, 4]
  }
  onLoad: function(){
       // a需要变化时，只需要setData设置a字段即可
    this.setData({a : 2})
  }
})

this.setData({"d[0]": 100}); 
this.setData({"d[1].text": 'Goodbye'});

key要写成字符串形式，否则会报错

我们只要保持一个原则就可以提高小程序的渲染性能：每次只设置需要改变的最小单位数据。

案例：自定义多选框setData()选中数据

Page({
  data: {
    checkboxItems: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本', checked: 'true' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ]
  },
  checkboxChange: function (e) {
    var checked = e.detail.value //['中国','日本']
    var changed = {}; //定义一个空对象，用for循环把要更改的属性键值循环出来
    for (var i = 0; i < this.data.checkboxItems.length; i++) {
      if (checked.indexOf(this.data.checkboxItems[i].name) !== -1){
        changed['checkboxItems[' + i + '].checked'] = true
      } else {
        changed['checkboxItems[' + i + '].checked'] = false
      }
    }
    this.setData(changed)
    /**changed = {
        checkboxItems[0].checked:true,
        checkboxItems[1].checked:true,
        checkboxItems[2].checked:false,
        checkboxItems[3].checked:true,
        checkboxItems[4].checked:false,
        checkboxItems[5].checked:false
    }**/
  }
})