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


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 相关文章推荐
jquery select下拉框操作的一些说明
Apr 02 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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分页思路以及在ZF中的使用
2012/05/30 PHP
PHP引用(&)各种使用方法实例详解
2014/03/20 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
Ext 今日学习总结
2010/09/19 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Python 基础知识之字符串处理
2017/01/06 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python框架flask表单实现详解
2019/11/04 Python
python中count函数简单用法
2020/01/05 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
《白鹅》教学反思
2014/04/13 职场文书
党支部特色活动方案
2014/08/20 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
用Python简陋模拟n阶魔方
2021/04/17 Python
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
为什么RedisCluster设计成16384个槽
2021/09/25 Redis