微信小程开发之setData
白羽 2018-07-18 来源 :网络 阅读 1133 评论 0

摘要:本文将带你了解微信小程开发之setData,希望本文对大家学微信有所帮助。

   

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.jsPage({
    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 带来的最大便利了,提高开发效率、减少代码量。实际开发中使用第一种和第二种都可以,取决于团队的开发规范和个人喜好。不过在微信小程序中,更推荐第二种写法,代码更少更简洁,也没有兼容问题,何乐而不为呢?    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!

本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程