微信小程序之setData用法

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

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

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

Page({data: {userInfo: {avatar: 'https://images.example.com/default_avatar.png'},articleList: [{title: 'init title'}]},onLoad: function () {var avatar = 'https://images.example.com/avatar.png';var newTitle = 'This is a new title';//this.data.userInfo.avatar=avatar; //直接赋值是错误写法this.setData({'userInfo.avatar': avatar,'articleList[0].title': new Title})}
})

setData()这种赋值的方式只适合在微信小程序上面，原生js行不通。

this指向问题会报错
在某些情况的回调里面，直接使用 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});}});// 正确的写法1var 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用法相关推荐

微信小程序：setData 数据传输长度为 1678 KB，存在有性能问题！
微信小程序:setData 数据传输长度为 1678 KB,存在有性能问题! 记录遇到的问题本文也参考了其他文章由于data 数据过大,比如 base64 / 数据列表返回内容过大,导致无法执行 ...
微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
微信小程序使用setData方法修改data中对象或数组的属性值
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序使用setData方法修改data中对象或数组的属性值使用微信小程序开发时,涉及到data ...
html5 setdata函数,微信小程序this.setData is not a function错误解决
开发中遇到微信小程序"this.setData is not a function"错误,具体错误内容如下所示: VM10092:1 thirdScriptError this.s ...
微信小程序日历插件用法-举例为(爸妈搜日历)
一.添加插件在小程序管理后台添加插件. 小程序管理后台地址:https://mp.weixin.qq.com/ 设置>第三方设置>插件管理添加插件,可以直接搜索名称(爸妈搜日历)或者A ...
[微信小程序]this.setData ， that.setData ， this.data.val三者之间的区别和作用
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 1.this.setData({ }) <view bindtouchmove="ta ...
微信小程序中 setData 详解
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
微信小程序this.setData修改对象中某个属性的值
前言做过微信小程序的同学都知道,this.setData() 方法可以修改或者更新 data 中的值 .那不知道大家有没有遇到这么一种情况,我要修改对象中某个属性的值该怎么办呢?是不是第一想到的就是 ...
微信小程序：setData函数详解及注意事项
在微信小程序中经常会使用到setData函数把变量渲染到视图层,那么什么是setData呢?如何使用?注意事项有些什么?下面我们就来详细了解一下! 正文 setData是小程序开发中使用最频繁的接口, ...

微信小程序之setData用法

微信小程序之setData用法相关推荐

最新文章

热门文章