微信小程序专题之setData

Page.prototype.setData

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

setData() 参数格式

setData(data, callback); // data需为可 JSON 化的数据，callback在 setData 对界面渲染完毕后调用

setData() 非常灵活

setData() 的第一个参数 data 是 Object 类型的数据，其中 key 可以非常灵活，可以以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。
下面举个例子来说明：

index.js

Page({
    data: {
        userInfo: {
            avatar: 'https://images.example.com/default_avatar.png'
        },
        articleList: [{title: 'init title'}]
    },
    onLoad: function () {
        let avatar = 'https://images.example.com/avatar.png';
        let newTitle = 'This is a new title';
        
        this.setData({
            'userInfo.avatar': avatar,
            'articleList[0].title': new Title
        })
    }
})

微信小程序这种给 setData 赋值的方式在原生 JavaScript 中显然是不行的，比如：

let obj = {};
obj['person.gender'] = 'male'; // {'person.gender': 'male'}

从 obj 的结果我们可以看到两种赋值的差异。

this.setData() 失效？

在某些情况的回调里面，直接使用 this.setData 会得到错误的结果，这个其实不是 setData 的问题，而是 this 指向的问题，这时候只需要提前把 this 赋值给另外一个变量，比如 that，然后使用 that.setData 就可以了，或者使用 ES6 的箭头函数。

代码

Page({
    data: {
        starCount: 0
    },
    onLoad: function () {
       // 错误的写法
       wx.request({
           url: '/api/getStarCount',
           success: function (res) {
               this.setData({
                   starCount: res.starCount
               });
           }
       });
       
       // 正确的写法1
       let that = this;
       wx.request({
           url: '/api/getStarCount',
           success: function (res) {
               that.setData({
                   starCount: res.starCount
               });
           }
       });
       
       // 正确的写法2
       wx.request({
           url: '/api/getStarCount',
           success: res => {
               this.setData({
                   starCount: res.starCount
               });
           }
       });
    }
})

从代码中可以看到，第二种写法更加的简洁，这也是 ES6 带来的最大便利了，提高开发效率、减少代码量。实际开发中使用第一种和第二种都可以，取决于团队的开发规范和个人喜好。不过在微信小程序中，更推荐第二种写法，代码更少更简洁，也没有兼容问题，何乐而不为呢？