微信小程序開發系列五：微信小程序中如何響應用戶輸入事件

微信小程序開發系列教程

微信小程序開發系列一：微信小程序的申請和開發環境的搭建

微信小程序開發系列二：微信小程序的視圖設計

微信小程序開發系列三：微信小程序的調試方法

微信小程序開發系列四：微信小程序之控制器的初始化邏輯

經過前面四個章節的介紹，你們對微信小程序的視圖和控制器，以及微信調試器的用法已經有了一個最基本的認識了。在這個基礎上，讓咱們進一步學習微信小程序控制器，掌握在小程序控制器中響應用戶輸入的方法。

這個例子很簡單，在微信小程序的視圖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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: