微信小程式開發系列教程

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

微信小程式開發系列二：微信小程式的檢視設計

微信小程式開發系列三：微信小程式的除錯方法

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

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

透過前面四個章節的介紹，大家對微信小程式的檢視和控制器，以及微信偵錯程式的用法已經有了一個最基本的認識了。在這個基礎上，讓我們進一步學習微信小程式控制器，掌握在小程式控制器中響應使用者輸入的方法。

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