博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序中this关键字使用技巧
阅读量:6823 次
发布时间:2019-06-26

本文共 1862 字,大约阅读时间需要 6 分钟。

转自:https://blog.csdn.net/qq_33956478/article/details/81348453

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

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

在success回调函数中使用self.data就能获取到数据了,如下:

/**

* 页面的初始数据
*/
data: {
imageSrc: '',
},
/**
* 图片选择事件
*/
chooseImage: function() {
var self = this; // 官方的解决办法是,复制一份当前的对象
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
console.log(res.tempFilePaths);
self.setData({
imageSrc: res.tempFilePaths[0],
})
},
});
},
不过,还有另外一种方式,也很特别,是将success回调函数换一种声明方式,如下:

/**

* 页面的初始数据
*/
data: {
imageSrc: '',
},
/**
* 图片选择事件
*/
chooseImage: function() {
// var self = this; // 这里不用复制
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: res => {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
console.log(res.tempFilePaths);
this.setData({
imageSrc: res.tempFilePaths[0],
})
},
});
},
.wxml文件如下:

<!--index.wxml-->

<view>
<view style='border:solid black 1px;height:200rpx;width:200rpx'>
<image src='{
{imageSrc}}' style='height:100%;width:100%' mode='aspectFill'></image>
</view>
<button bindtap='chooseImage' size='mini' style='border:0px;width:200rpx' type='warn' plain>选择</button>
</view>
 
---------------------
作者:淡漠花开
来源:CSDN
原文:https://blog.csdn.net/qq_33956478/article/details/81348453
版权声明:本文为博主原创文章,转载请附上博文链接!

转载于:https://www.cnblogs.com/sharpest/p/10304155.html

你可能感兴趣的文章
蚂蚁金服副CTO胡喜ATEC上宣布:蚂蚁金服技术全面开放
查看>>
重读算法导论之算法基础
查看>>
《Linux命令行与shell脚本编程大全》第九章 安装软件程序
查看>>
PHP+MySQL实现对一段时间内每天数据统计优化操作实例
查看>>
openlayers3 pointermove onmousemove 显示feature信息
查看>>
一天学习使用maven
查看>>
盘点9月阿里云云计算基础产品开通新地域详情
查看>>
【python进阶】Garbage collection垃圾回收1
查看>>
详谈分布式系统缓存的设计细节
查看>>
C语言-typedef的用法
查看>>
Golang源码探索(二) 协程的实现原理
查看>>
课程目标
查看>>
记一次使用Ubuntu 14.04 LTS搭建FBctf平台
查看>>
领英准备好成为下一个媒体巨人了吗?
查看>>
head first python(第二章)–学习笔记
查看>>
grunt和前端模块管理工具的简单使用
查看>>
linux - command - iftop 磁盘IO查看神器
查看>>
腾讯MSDK支付接入记录
查看>>
Binary Tree Maximum Path Sum@LeetCode
查看>>
修改了一个HTML2Markdown 函数
查看>>