微信小程序專題之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 帶來的最大便利了，提升開發效率、減小代碼量。實際開發中使用第一種和第二種均可以，取決於團隊的開發規範和我的喜愛。不過在微信小程序中，更推薦第二種寫法，代碼更少更簡潔，也沒有兼容問題，何樂而不爲呢？