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


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 相关文章推荐
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
可拖拽组件slider.js使用方法详解
Dec 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/01/06 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
javascript回到顶部特效
2016/07/30 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
react基本安装与测试示例
2020/04/27 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
python颜色随机生成器的实例代码
2020/01/10 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
情人节活动策划方案
2014/02/27 职场文书
小学课外活动总结
2014/07/09 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
个人年终总结结尾
2015/03/06 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
2015年行政部工作总结
2015/04/28 职场文书
小学运动会前导词
2015/07/20 职场文书
五年级作文之成长
2019/09/16 职场文书
创业计划书之网吧
2019/10/10 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL