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: success: function (res) {
that.setData({
starCount: res.starCount
});
}
});
// 正确的写法2
wx.request({
url: success: res => {
this.setData({
starCount: res.starCount
});
}
});
}
})
从代码中可以看到,第二种写法更加的简洁,这也是 ES6 带来的最大便利了,提高开发效率、减少代码量。实际开发中使用第一种和第二种都可以,取决于团队的开发规范和个人喜好。不过在微信小程序中,更推荐第二种写法,代码更少更简洁,也没有兼容问题,何乐而不为呢?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。