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


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访问对象属性和方法及区别
Nov 16 Javascript
js简易版购物车功能
Jun 17 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
three.js实现圆柱体
2018/12/30 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
python实现socket端口重定向示例
2014/02/10 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
pandas多级分组实现排序的方法
2018/04/20 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
推广普通话演讲稿
2014/05/23 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
爱心捐书活动总结
2014/07/05 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
党员转正申请报告
2015/05/15 职场文书
餐馆开业致辞
2015/08/01 职场文书
外科护士长工作总结
2015/08/12 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers