WeChat Mini Program Development Series (3): How WeChat Mini Programs Respond to User Click Events and the Usage of WeChat Platform APIs

Due to work needs, the author once participated in a project integrating WeChat applet with SAP system, so I learned the development knowledge of WeChat applet from scratch. Here I share what I have learned through a series of articles, hoping to help relevant learners.

The first two articles in this tutorial:

• WeChat Mini Program Development Series (1): Development Environment Construction and View Design and Development of WeChat Mini Programs
• WeChat Mini Program Development Series (2): Overview of Single-Step Debugging and Controller Implementation Steps for WeChat Mini Programs

Through the introduction of the first two articles in this tutorial, you already have a basic understanding of the view and controller of WeChat applet and the usage of WeChat debugger. On this basis, let's further study the WeChat applet controller and master the method of responding to user input in the applet controller.

This example is very simple. In the view of the WeChat applet index.wxml , I define a button and a text element.

 <button bindtap="jerry_increase"> 点我加1 </button>
<text class="user-motto">{{counter}}</text>

The text element is bound to the counter field of the applet data model, which is a counter. The button is bound to an event handler jerry_increase .

Each time the button is clicked, the counter on the WeChat applet UI is incremented by one.

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

Then implement the button bindtap bound function of jerry_increase .

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 to the event handler by the WeChat framework. You can see the details of this parameter e through the debugger of the WeChat developer tool: tap the X and Y coordinates of the event, and the event type tap.

If we observe from the current controller event processing function execution stack, we find that in the processing logic of its previous layer, that is, the WeChat framework layer, two current timestamps are taken before and after the event processing function is called. If the difference between the timestamps is greater than 1000 milliseconds, the line Reporter.slowReport 30365 will be executed.

From this, we can see that WeChat hopes that the event processing function implemented by developers should be as efficient as possible, and the execution time should not exceed 1 second. In the mobile phone usage scenario, 1 second of waiting time is not too short for the end user.

Another point worth mentioning is that if you modify the value of the data model directly with JavaScript , the UI will not change.

The following is the wrong approach:

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

Here is the correct way to do it:

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

We can understand the mystery by stepping through the correct way of doing it:

You can see this.setData which will call the c.default.emit function of the WeChat framework, and deliver the latest data through the emit function.

Continue to view the implementation of emit , and you can find that emit calls the WeChat tool class wx method: invokeWebviewMethod.

From the internal implementation of WAService.js, we can find that the execution of the WeChat applet on the mobile phone actually runs in the WebView.

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

This article introduces how to write JavaScript in the WeChat applet to respond to button click events.
The next article in this series will introduce some WeChat native functions provided by the button component of WeChat applet, such as the usage of powerful functions such as obtaining current user information.

WeChat framework API call

Through the introduction so far, you already have a basic understanding of the view and controller of the WeChat applet, the WeChat debugger, and how to write JavaScript functions in the WeChat controller to respond to the user events of the WeChat applet.

We will now develop a practical example of a WeChat applet to further reinforce what we have learned earlier.

The effect of this example is as follows: a button is displayed on the WeChat applet: 获取头像昵称 .

After clicking, the WeChat applet will automatically retrieve the details of the WeChat user who currently clicks this button, such as nickname, avatar, province, city and other information provided by the WeChat framework API and display it in the applet page, as shown below.

View Design:

 <view class="userinfo">

<button open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

<text class="userinfo-nickname">{{userInfo.city}}</text>

<text class="userinfo-nickname">{{userInfo.country}}</text>

<text class="userinfo-nickname">{{userInfo.province}}</text>

</view>

There are a total of 6 UI elements in this view, including 1 button element, 1 image element and 4 text elements.

The button element is responsible for responding to user click events and calling the API of the WeChat framework to read user details.

1 image element is responsible for displaying the avatar of the WeChat user who clicked the button, and the remaining 4 text elements display the details of the WeChat user. The binding paths of the last five UI elements are all userInfo , and the data of userInfo is read by calling the WeChat API after clicking the button.

This userInfo is the data model we defined in the controller index.js:

 Page({
   data: {
         userInfo: {}
   }
});

Let's go back and look at the most important element of this small program in this article button element, which has two attributes:

• open-type="getUserInfo" : indicates that after the button is clicked, the API of the WeChat framework is automatically called getUserInfo ;
• bindgetuserinfo="jerry_getUserInfo": specifies the name of a callback function that is implemented in our controller index.js .

When the API call of the WeChat framework successfully retrieves the WeChat user details, the callback function we wrote will be called with the WeChat user details as input parameters.

 jerry_getUserInfo: function(e) {
app.globalData.userInfo = e.detail.userInfo
      this.setData({
           userInfo: e.detail.userInfo
      });
}

In the context that the applet can access, there is a global variable wx , which contains all the APIs exposed by the WeChat framework:

There is a description of all members about this wx on the WeChat applet official website :

Let's try another API: getSystemInfo.

First define a button in the applet view and bind a JavaScript function jerry_systeminfo to trigger getSystemInfo:

 <button bindtap = "jerry_systeminfo"> 获取系统信息 </button>

Then define seven UI elements to display the return result of getSystemInfo .

 <text class="userinfo-nickname">{{systeminfo.model}}</text>
<text class="userinfo-nickname">{{systeminfo.pixelRatio}}</text>
<text class="userinfo-nickname">{{systeminfo.windowWidth}}</text>
<text class="userinfo-nickname">{{systeminfo.windowHeight}}</text>
<text class="userinfo-nickname">{{systeminfo.language}}</text>
<text class="userinfo-nickname">{{systeminfo.version}}</text>
<text class="userinfo-nickname">{{systeminfo.platform}}</text>

wx.getSystemInfo The returned result is used as an input parameter, which is automatically passed into the success callback function we defined, and then setData is set to the data structure of the view .

 jerry_systeminfo: function(){
   var that = this;
   wx.getSystemInfo({
         success: function (res) {
              var systeminfo = {};
              systeminfo.model = res.model;
              systeminfo.pixelRatio = res.pixelRatio;
              systeminfo.windowWidth = res.windowWidth;
              systeminfo.windowHeight = res.windowHeight;
              systeminfo.language = res.language;
              systeminfo.version = res.version;
              systeminfo.platform = res.platform;
              try {
                    that.setData({
                          systeminfo: systeminfo
                 });
              }
               catch(e){
                        console.log(e);
                 }
         }
  })
},

Finally, after I clicked "Get System Information" on my Android Samsung phone, it showed the model of my Samsung phone SM-C7010 and other details.

Summarize

This tutorial first introduces how the WeChat applet controller responds to user click events, and then introduces the method of how the WeChat applet consumes the WeChat platform API through an actual example of how to obtain the current user's WeChat nickname and mobile phone signal.

The first two articles in this tutorial:

• WeChat Mini Program Development Series (1): Development Environment Construction and View Design and Development of WeChat Mini Programs
• WeChat Mini Program Development Series (2): Overview of Single-Step Debugging and Controller Implementation Steps for WeChat Mini Programs