专栏首页Jerry的SAP技术分享微信小程序开发系列五:微信小程序中如何响应用户输入事件
原创

微信小程序开发系列五:微信小程序中如何响应用户输入事件

微信小程序开发系列教程

微信小程序开发系列一:微信小程序的申请和开发环境的搭建

微信小程序开发系列二:微信小程序的视图设计

微信小程序开发系列三:微信小程序的调试方法

微信小程序开发系列四:微信小程序之控制器的初始化逻辑

微信小程序开发系列五:微信小程序中如何响应用户输入事件

通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上,让我们进一步学习微信小程序控制器,掌握在小程序控制器中响应用户输入的方法。

这个例子很简单,在微信小程序的视图index.wxml里,我定义了一个按钮,和一个文本元素。

<button bindtap="jerry_increase"> 点我加1 </button>

<text class="user-motto">{{counter}}</text>

文本元素绑定到小程序数据模型的counter字段上,是一个计数器。按钮绑定了一个事件处理函数jerry_increase。每点击一次按钮,微信小程序UI上的计数器加一。

为此,首先需要在控制器index.js的data数据模型里增添一个counter字段。

然后实现button的bindtap绑定的函数jerry_increase。可以看到这个事件处理函数有一个输入参数e:

当事件处理函数被调用时,这个输入参数e是微信框架自动传入到事件处理函数的。通过微信开发者工具的调试器可以看到这个参数e的明细:tap事件发生的X和Y坐标,以及事件类型tap。

我们如果从当前控制器事件处理函数执行栈向外观察,发现它的前一层,即微信框架层的处理逻辑里,在调用事件处理函数前后分别取两个当前的时间戳。如果时间戳之差大于1000毫秒,会执行第30365行的Reporter.slowReport。由此我们看出,微信希望开发者实现的事件处理函数要尽可能高效,执行时间不能超过1秒。在手机使用场景里,1秒的等待时间对于最终用户来说是一个相当长的时间了。

另一个值得一提的知识点是,如果直接用JavaScript修改数据模型的值,则UI不会有任何变化。

下面是错误的做法:

jerry_increase: function(e){

     this.data.counter = this.data.counter + 1;

},

下面是正确的做法:

jerry_increase: function(e){

  this.setData({

       counter: this.data.counter + 1

});

},

我们可以通过单步调试正确的做法来理会其中的奥妙:

可以看到this.setData里面会调用微信框架的c.default.emit函数,把最新的数据通过emit函数投递出去。

继续查看emit的实现,可以发现emit又调用了微信工具类wx的方法:invokeWebviewMethod。从WAService.js的内部实现,我们能发现其实微信小程序在手机上的执行实际是运行在WebView里的。

一旦WeixinJSBridge.publish.apply(WeixinJSBridge, e)这一行代码执行完毕,UI上的计数器才被刷新。

本文介绍了如果在微信小程序里编写JavaScript来响应button的点击事件。

本系列的下一篇文章会介绍微信小程序的button组件提供的一些微信原生功能,比如获取当前用户信息等强大功能的用法。

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog....

    Jerry Wang
  • 微信程序开发系列教程(三)使用微信API给微信用户发文本消息

    这个系列的第二篇教程,介绍的实际是被动方式给微信用户发文本消息,即微信用户关注您的公众号时,微信平台将这个关注事件通过一个HTTP post发送到您的微信消息服...

    Jerry Wang
  • 微信小程序开发系列教程三:微信小程序的调试方法

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 薛青:融合通信企业实践案例分享

    企业微信的口号叫做“连接成就智慧企业”, 曾经还有一个口号叫做“让每一家企业都有自己的微信”,企业微信是从微信系统中发展出来的。

    云加社区技术沙龙
  • 微信营销你是否做好了上半屏的工作?

      微信营销,图文消息群发是其很重要的一块,一篇好的图文可以阅读量过万甚至更多,带来的收藏分享粉丝也不尽相同。那么问题来了,微信图文消息要注意哪些呢?你研究过微...

    ytkah
  • 微信支付来了,微信App来了,微信能力来了

    5000人报名,400人参加的微信公众平台合作伙伴大会,异常火爆,连主办方在场外设置的视频直播间也爆满。一句话总结这个大会:给合作伙伴打鸡血,向行业秀榜...

    罗超频道
  • 微信,站在6亿用户的门槛上

    据媒体报道,腾讯内部人士透露微信用户数已经突破6亿!微信海外业务可能会独立发展。年初我在《微信,3亿用户之后的默然演进》一文中曾预测微信今年底用户数将突...

    罗超频道
  • 微信小程序:短期不可高估,长期不可低估

    今天早晨到40公里开外的广州亚运城参加了2017年微信公开课Pro,之所以跑这么远去参加,除了微信有邀请之外,主要是因为一年一度的公开课Pro能看清微信的最新动...

    罗超频道
  • 实测第一弹!横亘在微信5.0面前的几座大山

    虎嗅、雷锋2013年8月6日 8月5日,微信5.0千呼万唤始出来。 这个版本原定于今天下午15:00正式发布。不过由于没能控制住苹果App Store的审核节...

    罗超频道
  • CabloyJS微信模块、企业微信模块已出齐

    当Cabloy-企业微信模块完成时,加上之前已完成的Cabloy-微信模块,关于在CabloyJS中与微信/企业微信对接的任务已经完成了。这些模块的目标就是,只...

    zhennann

扫码关注云+社区

领取腾讯云代金券