微信小程序 this和that详解及简单实例


Posted in Javascript onFebruary 13, 2017

微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend。原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了。官方的解决办法是,复制一份当前的对象,如下:

var that=this;//把this对象复制到临时变量that

在success回调函数中使用that.data就能获取到数据了。

不过,还有另外一种方式,也很特别,是将success回调函数换一种声明方式,如下:

success: res =>{
  this.setData({
      loadingHidden: true,
      hideCommitSuccessToast: false
  })
}

在这种方式下,this可以直接使用,完全可以获取到data数据。

再给一个完整的例子:

success: res => {
    if (res.data.code != 0) {
     // 提交失败
     this.setData({
      loadingHidden: true,
      hiddenTips: false,
      tipsContent: res.data.message
     })
    } else {
     // 提交成功
     this.setData({
      loadingHidden: true,
      hideCommitSuccessToast: false
     })
     subBtn = false;

     // 定时,3秒消失
     setTimeout(() => {
      this.setData({
       hideCommitSuccessToast: true
      })
      wx.navigateBack({ delta: 2 });
     }, 2000);

    }
   }

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS实现一键回顶功能示例代码
Oct 28 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
js中style.display=""无效的解决方法
Oct 30 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
js实现简易ATM功能
Oct 27 Javascript
脚本div实现拖放功能(两种)
Feb 13 #Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 #Javascript
判断横屏竖屏(三种)
Feb 13 #Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 #Javascript
jQuery实现大图轮播
Feb 13 #Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 #Javascript
你真的了解BOM中的history对象吗
Feb 13 #Javascript
You might like
PHP截取中文字符串的问题
2006/07/12 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
php实现的CSS更新类实例
2014/09/22 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
javascript 二进制运算技巧解析
2012/11/27 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
javascript基本类型详解
2014/11/28 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
python 连续不等式语法糖实例
2020/04/15 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
《胡杨》教学反思
2014/02/16 职场文书
节能宣传周活动总结
2014/05/08 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
常住证明范本
2015/06/23 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis