微信小程序 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 相关文章推荐
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
javascript连续赋值问题
Jul 08 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
js实现鼠标拖曳效果
Dec 30 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python http接口自动化脚本详解
2018/01/02 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
PyQt5实现拖放功能
2018/04/25 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
优秀交警事迹材料
2014/01/26 职场文书
企业员工薪酬方案
2014/06/04 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android