Page.prototype.setDatasetData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 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 带来的最大便利了,提高开发效率、减少代码量。实际开发中使用第一种和第二种都可以,取决于团队的开发规范和个人喜好。不过在微信小程序中,更推荐第二种写法,代码更少更简洁,也没有兼容问题,何乐而不为呢? |
微信小程序专题之setData
发布:2018-06-29 14:51浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08