Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to respond to user input events in WeChat Mini Programs. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

How to respond to user input events in WeChat Mini Programs

Let's further learn from the WeChat Mini Programs controller and master the method of responding to user input in the Mini Program controller.

This example is simple. In WeChat Mini Programs's view index.wxml, I defined a button and a text element.

Click and I add 1.

{{counter}}

The text element, which is bound to the counter field of the Mini Program data model, is a counter. The button binds an event handler function, jerry_increase. Every time the button is clicked, the counter on WeChat Mini Programs UI increases by one.

To do this, you first need to add a counter field to the data data model of the controller index.js.

Then implement the bindtap bound function jerry_increase of button. You can see that this event handler has an input parameter e:

When the event handler is called, the input parameter e is automatically passed into the event handler by the Wechat framework. You can see the details of this parameter e through the debugger of the Wechat developer tool: the X and Y coordinates of the tap event, as well as the event type tap.

If we look out from the current controller event handler execution stack, we can find that in its previous layer, that is, the Wechat framework layer, two current timestamps are taken before and after the event handler is called. If the timestamp difference is greater than 1000 milliseconds, the Reporter.slowReport of line 30365 is executed. From this, we can see that Wechat wants developers to implement event handling functions as efficiently as possible, with an execution time of no more than 1 second. In the mobile phone usage scenario, the waiting time of 1 second is quite a long time for the end user.

Another knowledge point worth mentioning is that if you modify the value of the data model directly with JavaScript, there will be no change in UI.

The following is the wrong thing to do:

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

The following is the right thing to do:

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

We can understand the secret by debugging the right approach step by step:

You can see that this.setData will call the c.default.emit function of Wechat framework to deliver the latest data through the emit function.

Continuing to look at the implementation of emit, you can see that emit also calls the method of the Wechat utility class wx: invokeWebviewMethod. From the internal implementation of WAService.js, we can find that WeChat Mini Programs's execution on the mobile phone is actually running in WebView.

Once the line of WeixinJSBridge.publish.apply (WeixinJSBridge, e) is executed, the counter on the UI is refreshed.

The above is how to respond to user input events in WeChat Mini Programs, which is shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.