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


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 相关文章推荐
js 异步处理进度条
Apr 01 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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里得到前天和昨天的日期的代码
2007/08/16 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python中协程用法代码详解
2018/02/10 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Pandas中resample方法详解
2019/07/02 Python
python写入文件自动换行问题的方法
2019/07/05 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
公司总经理岗位职责
2014/03/15 职场文书
结对共建协议书
2014/08/20 职场文书
2014年团队工作总结
2014/11/24 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript