微信小程序开发日记:重要的var that=this

目前《微信小程序》内测发布已经有一个多月了,没有收到内测资格的,官方也已有提供了开发文档,并且提供了新版本的开发者工具.相信很多开发者都迫不及待的来尝试一下。笔者也是马上按开发者文档的说明来尝试一下微信小程序的庐山真面目。

什么是微信小程序

关于什么是微信小程序在网络上已经有很多文章介绍,这里就不再阐述了。简单来说微信小程序应该是嵌套在微信里面的应用,这个应用体现“用完即走”的理念,用户无需安装过多APP,应用无需下载,用完就销毁。

这给我们带来很多的思考,关于微信小程序未来会给我们带来什么样的体验以及更多的思考笔者以后会在其他文章进行阐述,这里就不过多的描述。


四个交互接口

新版本的微信小程序最新版本号是 0.10.102800,这次更新增加了 四个交互API:

  • wx.showToast
  • wx.showModal
  • wx.hideModal
  • wx.showActionSheet
    同时停用
  • <toast/>
  • <loading/>
  • <action-sheet/>
  • <modal/>

这四个组件。
所有微信提供的API接口都是以 wx.开头,并且一般情况下都接收一个对象作为参数。接收的对象中可以指定success, fail, complete这三个函数来接收接口调用结果。

回调函数


一般情况下。我们调用某个接口后都会在success回调函数里面处理一下成功之后的业务逻辑,比如发送个提示什么的。这里我举例使用 wx.showActionSheet接口,截图看程序

视图页面
视图页面
<view class="btn">
    <button type="primary" size="default" bindtap="showactionsheet">选择国家</button>
</view>
文件页面
Page({ 
      data:{ 
          itemLists: ['中国', '美国', '日本', '英国'] 
        }, 
        showactionsheet: function () { 
           wx.showActionSheet({
               itemList: this.data.itemLists, 
                 itemColor: "red", 
                 success: function (res) { 
                     if (!res.cancel) { 
                         console.log(res); 
                     } 
                 }
           }) 
       }
})

调试窗口
调试窗口

从调试窗口可以看到接口调用成功后 success函数回调返回的参数是一个对象 ,其中只有tapIndex代表点击中的项目索引(从上往下index从0开始),如果用户点击的是取消,则返回一个布尔类型的cancel,并且cancel="true"!这时候,如果我们想打印点击的项目的文本,就只能通过tapIndex索引去数组里面显示,聪明的你一定会想到

function (res) { 
 if (!res.cancel) {
    console.log(this.data.itemLists[res.tapIndex]); 
 } 
}

这是时候我们发现报错了

报错itemLists 为undefiend

原因是说itemLists 未定义。我们尝试把对象this.data也打印出来。同样发现是undefined.

**重要的 var that=this **

原来我们忘记了javascript 语言中 this关键字的用法了。在javascript语言中,this代表着当前的对象,它在程序中随着执行的上下文随时会变化。在本例中回调函数对象相对于showactionsheet点击事件函数对象已经发生了变化。所以已经不是原来的页面对象了。自然就没有了data属性,也没有了data.itemLists属性了。解决的办法就是复制一份当前的对象。所以我们有了这个重要的语句:

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

这时候我们使用that 就不会找不到原来的对象了。

console.log(that.data.itemLists[res.tapIndex]);//使用that.data 属性
正确的结果

其它接口也一样

这里虽然只是举例了一个接口。但是鉴于微信小程序几乎所有的API接口都会有success, fail, complete三个回调函数来处理业务的后续逻辑,很多时候我们要获取当前页面对象来对视图进行渲染。当我们想要获取页面的初始数据 data时候,在回调函数里面就不能使用 this.data来获取,同样的就不能使用this.setData()函数来渲染视图。我们需要做的就是在把我们想要的this对象想复制到that.因此就有了本文的解说 重要的 var that=this .希望能够给正在学习微信小程序开发的初学者帮助。

关于javascript this的用法大家还是要通过实例去好好理解。这里不再详细的解释。这里附送一个传送门,可以看看这篇写得很好的 关于深入理解this的文章:

深入理解JavaScript中的this关键字

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容