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


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模拟弹出效果代码修正版
Aug 07 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
js实现点击生成随机div
Jan 16 Javascript
Vue触发input选取文件点击事件操作
Aug 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
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
Knockout visible绑定使用方法
2013/11/15 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
jQuery遮罩层实例讲解
2017/05/11 jQuery
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
英语文学专业学生的自我评价
2013/10/31 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
打架检讨书100字
2014/01/19 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
经营管理策划方案
2014/05/22 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
失恋33天观后感
2015/06/11 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android