微信小程序 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 相关文章推荐
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
VUE动态生成word的实现
Jul 26 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python版微信红包分配算法
2015/05/04 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
详解Python中where()函数的用法
2018/03/27 Python
python3实现逐字输出的方法
2019/01/23 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
SQL Server笔试题
2012/01/10 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
2014年节能工作总结
2014/12/18 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
学校学期工作总结
2015/08/13 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
「月刊Action」2022年5月号封面公开
2022/03/21 日漫