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


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实现的所谓的滑动门
May 23 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 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
通过文字传递创建的图形按钮
2006/10/09 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
javascript this详细介绍
2016/09/19 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
python开发之str.format()用法实例分析
2016/02/22 Python
解决Python requests 报错方法集锦
2017/03/19 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python脚本替换指定行实现步骤
2017/07/11 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
结婚邀请函范文
2014/01/14 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
一名老师的自我评价
2014/02/07 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
辞职信格式范文
2015/05/13 职场文书
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers