Wechat small program development series tutorial

Micro channel small program development series 1: micro channel small program application and development environment construction

Micro channel applets development Series 2: Micro channel applets view design

Micro channel applets development series three: micro channel applets debugging methods

Micro channel applets development series 4: micro channel applets controller initialization logic

How to respond to user input events in wechat applets

Through the introduction of the previous five chapters, we have had a basic understanding of the view and controller of the micro channel applet, the micro channel debugger, and how to write JavaScript functions in the micro channel controller to respond to the user events of the micro channel applet. Let’s now develop some knowledge related to wechat application to further consolidate the knowledge we have learned before.

Effects achieved in this paper:

A button that says “Get avatar nickname” is displayed on the wechat mini program.

After clicking the button, the wechat applet will automatically retrieve the details of the wechat user who clicks the button through the API provided by the wechat framework, such as nickname, profile picture, province, city and other information, and display them on the page of the applet, as shown in the picture below.

View Design:

<view class="userinfo">

<button open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo">Get avatar nickname</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>
Copy the code

There are six UI elements in this view, one button element, one image element, and four text elements. Button element is responsible for responding to user click events and calling API of wechat framework to read user details.

One image element is responsible for displaying the image of the wechat account clicked on the button, and the remaining four text elements show the details of wechat users. The binding path of the last five UI elements is userInfo, and the data of userInfo is read by calling wechat API after clicking button.

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

Page({

   data: {

         userInfo: {}}});Copy the code

Let’s go back to the most important button element in this small program. It has two attributes:

Open-type = “getUserInfo” : After the button is clicked, the API getUserInfo of wechat framework is automatically called

Bindgetuserinfo = “jerry_getUserInfo” : Specifies the name of a callback function implemented in our controller index.js. When the API call of wechat framework successfully retrieves wechat user details, the wechat user details will be used as the input parameter to call the callback function we wrote.

jerry_getUserInfo: function(e) {

app.globalData.userInfo = e.detail.userInfo

      this.setData({

           userInfo: e.detail.userInfo

      });

}
Copy the code

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

All the members of this WX are explained on the wechat mini program website:

Developers.weixin.qq.com/miniprogram…

Let’s try another API: getSystemInfo

Start by defining a button in the applet view and binding it to a JavaScript function called jerry_systemInfo that triggers getSystemInfo:

Obtaining System Information

You then define seven UI elements that display the return results 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>
Copy the code

The result returned by wx.getSystemInfo is automatically passed as an input parameter to our defined SUCCESS callback function, which is then set to the view’s data structure using setData.

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); }}})},Copy the code

Finally, I clicked “Get System Info” on my Android Samsung phone, which showed me the model SM-C7010 and other details.

For more of Jerry’s original technical articles, please follow the public account “Wang Zixi” or scan the following QR code: