微信小程序中怎么響應(yīng)用戶輸入事件

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

微信小程序中如何響應(yīng)用戶輸入事件

讓我們進(jìn)一步學(xué)習(xí)微信小程序控制器，掌握在小程序控制器中響應(yīng)用戶輸入的方法。

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

<button bindtap="jerry_increase"> 點(diǎn)我加1 </button>

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

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

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

然后實(shí)現(xiàn)button的bindtap綁定的函數(shù)jerry_increase?？梢钥吹竭@個(gè)事件處理函數(shù)有一個(gè)輸入?yún)?shù)e：

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

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

另一個(gè)值得一提的知識(shí)點(diǎn)是，如果直接用JavaScript修改數(shù)據(jù)模型的值，則UI不會(huì)有任何變化。

下面是錯(cuò)誤的做法：

jerry_increase: function(e){     this.data.counter = this.data.counter + 1;
},

下面是正確的做法：

jerry_increase: function(e){  this.setData({       counter: this.data.counter + 1});
},

我們可以通過(guò)單步調(diào)試正確的做法來(lái)理會(huì)其中的奧妙：

可以看到this.setData里面會(huì)調(diào)用微信框架的c.default.emit函數(shù)，把最新的數(shù)據(jù)通過(guò)emit函數(shù)投遞出去。

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

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

上述就是小編為大家分享的微信小程序中怎么響應(yīng)用戶輸入事件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。