這期內容當中小編將會給大家?guī)碛嘘P微信小程序中怎么響應用戶輸入事件，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

介休網站建設公司創(chuàng)新互聯(lián)建站,介休網站設計制作，有大型網站制作公司豐富經驗。已為介休近1000家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿營銷網站建設要多少錢，請找那個售后服務好的介休做網站的公司定做！

微信小程序中如何響應用戶輸入事件

讓我們進一步學習微信小程序控制器，掌握在小程序控制器中響應用戶輸入的方法。

這個例子很簡單，在微信小程序的視圖index.wxml里，我定義了一個按鈕，和一個文本元素。

點我加1

{{counter}}

文本元素綁定到小程序數(shù)據(jù)模型的counter字段上，是一個計數(shù)器。按鈕綁定了一個事件處理函數(shù)jerry_increase。每點擊一次按鈕，微信小程序UI上的計數(shù)器加一。

為此，首先需要在控制器index.js的data數(shù)據(jù)模型里增添一個counter字段。

然后實現(xiàn)button的bindtap綁定的函數(shù)jerry_increase。可以看到這個事件處理函數(shù)有一個輸入?yún)?shù)e：

當事件處理函數(shù)被調用時，這個輸入?yún)?shù)e是微信框架自動傳入到事件處理函數(shù)的。通過微信開發(fā)者工具的調試器可以看到這個參數(shù)e的明細：tap事件發(fā)生的X和Y坐標，以及事件類型tap。

我們如果從當前控制器事件處理函數(shù)執(zhí)行棧向外觀察，發(fā)現(xiàn)它的前一層，即微信框架層的處理邏輯里，在調用事件處理函數(shù)前后分別取兩個當前的時間戳。如果時間戳之差大于1000毫秒，會執(zhí)行第30365行的Reporter.slowReport。由此我們看出，微信希望開發(fā)者實現(xiàn)的事件處理函數(shù)要盡可能高效，執(zhí)行時間不能超過1秒。在手機使用場景里，1秒的等待時間對于最終用戶來說是一個相當長的時間了。

另一個值得一提的知識點是，如果直接用JavaScript修改數(shù)據(jù)模型的值，則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函數(shù)，把最新的數(shù)據(jù)通過emit函數(shù)投遞出去。

繼續(xù)查看emit的實現(xiàn)，可以發(fā)現(xiàn)emit又調用了微信工具類wx的方法：invokeWebviewMethod。從WAService.js的內部實現(xiàn)，我們能發(fā)現(xiàn)其實微信小程序在手機上的執(zhí)行實際是運行在WebView里的。

一旦WeixinJSBridge.publish.apply(WeixinJSBridge, e)這一行代碼執(zhí)行完畢，UI上的計數(shù)器才被刷新。

上述就是小編為大家分享的微信小程序中怎么響應用戶輸入事件了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。