微信小程序 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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
javascrip关于继承的小例子
May 10 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
node.js实现快速截图
Aug 27 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
layui table 参数设置方法
Aug 14 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
Webpack3+React16代码分割的实现
Mar 03 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简单提示框alert封装函数
2010/08/08 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JS简单计算器实例
2015/01/20 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
简单上手Python中装饰器的使用
2015/07/12 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
python实现门限回归方式
2020/02/29 Python
Python API len函数操作过程解析
2020/03/05 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
python获取linux系统信息的三种方法
2020/10/14 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
求职简历推荐信范文
2013/12/02 职场文书
初二物理教学反思
2014/01/29 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
法定代表人免职证明
2015/06/24 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
Python各协议下socket黏包问题原理
2022/04/12 Python