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

This article mainly introduces "how to call Wechat framework API". In daily operation, I believe many people have doubts about how to call Wechat framework API. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "how to call Wechat framework API". Next, please follow the editor to study!

The effect of this paper is as follows:

A button is displayed on WeChat Mini Programs: "get avatar nickname".

After clicking, WeChat Mini Programs will automatically retrieve the details of the Wechat users currently clicking the button, such as nicknames, avatars, provinces and cities, through the API provided by the Wechat framework, and display them on the Mini Program page, as shown in the following picture.

View Design:

Get the avatar nickname {{userInfo.nickName}} {{userInfo.city}} {{userInfo.country}} {{userInfo.province}}

There are six UI elements in this view, including one button element, one image element, and four text elements. The button element is responsible for calling the API of the Wechat framework to read the user details in response to the user click event.

One image element is responsible for displaying the profile picture of Wechat users who clicked the button, and the remaining four text elements show the details of Wechat users. The binding paths of the last five UI elements are all userInfo, while the data of userInfo is read by calling Wechat API after clicking button.

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

Page ({data: {userInfo: {})

Let's go back to this article, Mini Program's most important button element, which has two attributes:

Open-type= "getUserInfo": indicates that after the button is clicked, the API:getUserInfo of the Wechat framework is automatically called

Bindgetuserinfo= "jerry_getUserInfo": specifies the name of a callback function, which is implemented in our controller index.js. When the API call of Wechat framework successfully retrieves the Wechat user details, the callback function we wrote will be called with Wechat user details as the input parameter.

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

In the context that Mini Program can access, there is a global variable wx that contains all the API exposed by the Wechat framework:

On WeChat Mini Programs's official website, there are notes on all members of this wx:

Https://developers.weixin.qq.com/miniprogram/dev/api/

Let's try another API:getSystemInfo.

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

Get system information

Seven UI elements are then defined to display the returned results of the getSystemInfo.

{{systeminfo.model}} {{systeminfo.pixelRatio}} {{systeminfo.windowWidth}} {{systeminfo.windowHeight}} {{systeminfo.language}} {{systeminfo.version}} {{systeminfo.platform}}

The result returned by wx.getSystemInfo is automatically passed into the success callback function we defined as an input parameter, and then set to the data structure of the view with 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) })}

Finally, after clicking "get system Information" on my Android Samsung phone, I showed the details such as the model SM-C7010 of my Samsung phone.

At this point, the study of "how to call Wechat Framework API" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.