微信小程序 this和that详解及简单实例
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend。原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了。官方的解决办法是,复制一份当前的对象,如下:
|
1
|
var that=this;//把this对象复制到临时变量that |
在success回调函数中使用that.data就能获取到数据了。
不过,还有另外一种方式,也很特别,是将success回调函数换一种声明方式,如下:
|
1
2
3
4
5
6
|
success: res =>{ this.setData({ loadingHidden: true, hideCommitSuccessToast: false })} |
在这种方式下,this可以直接使用,完全可以获取到data数据。
再给一个完整的例子:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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); } } |
微信小程序 this和that详解及简单实例的更多相关文章
- 微信小程序获取用户手机号详解
最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...
- 【微信小程序】支付过程详解
一.介绍 今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html ...
- 微信小程序--问题汇总及详解之form表单
附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> ...
- 微信小程序支付之代码详解
微信小程序自带的一套规则,类似vue语法,但是好多功能都集成在api中,给了很多初学者轮子,所以首先要熟悉这些api,忘记可照官网继续开发 这里主要说下微信小程序的支付,原理类似上篇介绍的公众网页支付 ...
- 微信小程序项目wx-store代码详解
这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然 ...
- 微信小程序flex容器属性详解
flex容器属性详解 flex-direction决定元素的排列方向 flex-wrap决定元素如何换行 flex-flow 是 flex-direction 和flex-wrap的简写 justif ...
- 微信小程序--问题汇总及详解之图片上传和地图
地图用的是百度的地图,链接:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation 获取日期时间可以用小程序里自带的js文件 ...
- 微信小程序~生命周期方法详解
生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...
- 微信小程序setData()方法的详解以及对数组/json操作
此篇文章是本人对setData方法的一些理解,是查阅文档和查找一些其他资料综述的,有所不足希望指正! 直接进入正题! 一.setData()方法: 1.参数接受一个对象,以key,value的形式表示 ...
随机推荐
- 【php】随缘php企业网站管理系统V2.0 shownews.php注入漏洞
程序名称:随缘网络php企业网站管理系统2.0免费版 以下为系统的功能简介: 1.采用div+css布局经测试兼容IE及firefox主流浏览器,其他浏览器暂未测试. 2.产品新闻三级无限分类. 3. ...
- 【转】Python之正则表达式(re模块)
[转]Python之正则表达式(re模块) 本节内容 re模块介绍 使用re模块的步骤 re模块简单应用示例 关于匹配对象的说明 说说正则表达式字符串前的r前缀 re模块综合应用实例 参考文档 提示: ...
- 使用命令行解析php文件
使用命令行解析php文件,这样可以调用Log4PHP库中的一些demo,因为默认的输出使用命令行作为输出. 建一个bat文件: echo 以下是使用命令行解析php文件 C:\xampp\php\ph ...
- FTP服务器基础设定
1.安装vsftpd文件服务器 sudo apt-get install vsftpd 2.配置文件:/etc/vsftpd/vsftpd.conf 严格来说,整个 vsftpd 的配置文件就只有这个 ...
- epoll机制详解
epoll机制详解 大牛的详解 epoll详解 什么是epoll? epoll是为处理大批量句柄而作了改进的poll, 是性能最好的多路I/O就绪通知方法; 只有三个系统调用: epoll_creat ...
- ansible笔记(11):初识ansible playbook(二)
ansible笔记():初识ansible playbook(二) 有前文作为基础,如下示例是非常容易理解的: --- - hosts: test211 remote_user: root tasks ...
- thymeleaf:访问list,map等
1.map 在后端放入一个map Map<String, String> mapDict = serviceBaseDict.selectMap(ConstantDictType.SYSI ...
- SQL Server代码段
1.cast和convert ' as int) -- 123 ') -- 123 select CAST(123.4 as int) -- 123 select CONVERT(int, 123.4 ...
- 前端 ------ 03 body标签中的相关标签
列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...
- [转]Java微服务框架选型(Dubbo 和 Spring Cloud?)
转载于 http://www.cnblogs.com/xishuai/p/dubbo-and-spring-cloud.html 微服务(Microservices)是一种架构风格,一个大型复杂软件应 ...