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


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 相关文章推荐
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
angular组件间通讯的实现方法示例
May 07 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
完美解决PHP中文乱码
2009/11/26 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
js实现抽奖效果
2017/03/27 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
python 实现控制鼠标键盘
2020/11/27 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
关于人生的感言
2014/01/17 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
老干部工作汇报材料
2014/10/28 职场文书
单位租车协议书
2015/01/29 职场文书
社区端午节活动总结
2015/02/11 职场文书
婚宴新娘致辞
2015/07/28 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL