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 index.wxmlof , 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 counterfield and is a counter. The button has an event handler bound to it jerry_increase.
Each time the button is clicked, the counter on the WeChat applet UI is incremented by one.
To do this, we first need to add a field to the controller index.js's data data model.counter
Then implement buttonthe bindtapbound function jerry_increaseof .
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. The details of this parameter e can be seen through the debugger of the WeChat developer tool: tapthe X and Y coordinates where the event occurred, 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 30365, the Reporter.slowReport.
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 JavaScriptmodify , nothing will change in the UI.
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:
It can be seen this.setDatathat the c.default.emitfunction of the WeChat framework will be called, and the latest data will be delivered through the emitfunction .
Continue to view emitthe implementation, you can find that theemit method of the WeChat tool class is called again : invokeWebviewMethod.wx
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 WeixinJSBridge.publish.apply(WeixinJSBridge, e)this line of code is executed, the counter on the UI is 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 APIwho currently clicks this button, such as nickname, avatar, province, city and other information provided by the , and display it on the applet page, as shown in the following figure .
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 userInfothe data of 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 buttonelement , which has two properties:
-
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
index.jsis .
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 wxthat contains all the APIs exposed by the WeChat framework:
There is a description of all members about this on the WeChat applet official website :wx
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 for displaying getSystemInfothe returned results of .
<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.getSystemInfoThe returned result is used as an input parameter, which is automatically passed into the successcallback , and then used setDatato set it into 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 SM-C7010detailed information such as the model of my Samsung phone.
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: