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

微信小程序开发系列教程

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

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

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

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

 

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

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

这个例子很简单，在微信小程序的视图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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: