zoukankan      html  css  js  c++  java
  • 微信小程序中this关键字使用技巧

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

  • 相关阅读:
    EntityFramework 启用迁移 EnableMigrations 报异常 "No context type was found in the assembly"
    JAVA 访问FTP服务器示例(2)
    NuGet Package Manager 更新错误解决办法
    JAVA 访问FTP服务器示例(1)
    RemoteAttribute 的使用问题
    诡异的 javascript 变量
    javascript apply用法
    Babun 中文乱码
    GSM呼叫过程
    转站博客园
  • 原文地址:https://www.cnblogs.com/sharpest/p/10304155.html
Copyright © 2011-2022 走看看