微信小程序遇到修改数据后页面不渲染的问题解决


Posted in Javascript onMarch 09, 2017

微信小程序遇到修改数据后页面不渲染的问题解决

前言:

去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的。
唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,在我看来,有些应用场景是非常适合小程序的,以后生活中的更多场景会更多的应用小程序。

截止到目前,小程序的系列文章写了有十几篇,基本上是解决开发中的一些问题,踩过的坑。我的小程序也已经写的差不多了,但是公司的https加密认证还没有弄好,所以只能暂且搁置在那里了。

数据修改不生效

今天继续要介绍一个setData()的问题。

我们经常会这样写:

var that = this;
wx.getStorage({
  key: 'user',
  success: function(res){
    console.log(res.data)
    that.data.params.uuid = res.data.uuid;
    that.data.params.ticket = res.data.ticket;
    that.data.params.courseUuid = options.courseUuid;
    that.data.params.isCompany = options.isCompany;

    that.fetchData();
    that.getShareList();
  }
})

我们给data对象进行了一些赋值操作,但是发现接着使用这些数据的时候是不对的,我们赋值的数据并没有成功的渲染到页面。找了好久之后我发现,原来要想数据立马生效,必须要调用一下setData()方法才能有用,所以上面的代码修改如下:

var that = this;
wx.getStorage({
  key: 'user',
  success: function(res){
    console.log(res.data)
    that.data.params.uuid = res.data.uuid;
    that.data.params.ticket = res.data.ticket;
    that.data.params.courseUuid = options.courseUuid;
    that.data.params.isCompany = options.isCompany;

    that.setData({
      params: that.data.params
    })

    that.fetchData();
    that.getShareList();
  }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
vue  自定义组件实现通讯录功能
Sep 30 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
js实现时间轴自动排列效果
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 #Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 #Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 #Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 #Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 #Javascript
微信小程序 template模板详解及实例代码
Mar 09 #Javascript
You might like
php从文件夹随机读取文件的方法
2015/06/01 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
document.compatMode介绍
2009/05/21 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
python安装本地whl的实例步骤
2019/10/12 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
英文版银行求职信
2013/10/09 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
读书演讲主持词
2014/03/18 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
厨房管理计划书
2014/04/27 职场文书
酒店节能减排方案
2014/05/26 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
Python OpenCV实现图形检测示例详解
2022/04/08 Python