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


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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
Java如何读取CLOB字段
2013/10/10 面试题
酒店采购员岗位职责
2014/03/14 职场文书
白血病募捐倡议书
2014/05/14 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
中学生逃课检讨书
2015/02/17 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
《春酒》教学反思
2016/02/22 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
正则表达式基础与常用验证表达式
2022/06/16 Javascript
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript