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


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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 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 Pear 安装及使用
2009/03/19 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
js初始化验证实例详解
2016/11/26 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
ajax异步请求详解
2017/01/06 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python中yaml配置文件模块的使用详解
2018/04/27 Python
详解python单元测试框架unittest
2018/07/02 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
条幅标语大全
2014/06/20 职场文书
辩论会主持词
2015/07/03 职场文书
小学班级口号大全
2015/12/25 职场文书