How does WeChat Mini Programs invoke Wechat Authorization window

This article mainly explains "how WeChat Mini Programs invokes the Wechat authorization window". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how WeChat Mini Programs invokes the Wechat authorization window.

1. Concrete realization

In the onLaunch () function of app.js, add a code snippet that gets the user's personal information. It is realized that the personal information of the user can be obtained automatically when the user has already authorized it (for example, when the Mini Program is opened for the second time), without the authorization of the user.

/ / obtain user information wx.getSetting ({success: res = > {if (res.authSetting ['scope.userInfo']) {console.log ("app:" + "user has been authorized") / / has been authorized. You can call getUserInfo directly to get the avatar nickname. Do not pop up wx.getUserInfo ({success: res = > {/ / you can send res to the background to decode unionId this.globalData.userInfo = res.userInfo console.log (this.globalData.userInfo) this.globalData.hasUserInfo = true / / because getUserInfo is a network request May return / / after Page.onLoad, so add callback here to prevent this situation if (this.userInfoReadyCallback) {this.userInfoReadyCallback (res)}} Fail: (res) = > {console.log ("app:" + "failed to get user information")})} else {console.log ("app:" + "user is not authorized temporarily")})

Add authorization button to me.wxml (specific page according to your actual situation). The button component here must be in the following form.

Wechat authorizes login

The effect is like this, the specific style will be changed according to everyone's preference.

The following variables and methods are added to me.js, which requires the user to actively click the button without prior authorization.

Data: {userInfo: null, hasUserInfo: false}, getUserInfo: function (e) {console.log ("me:" + "user click authorization") if (e.detail.userInfo) {this.setData ({userInfo: e.detail.userInfo, hasUserInfo: true}) app.data.userInfo = this.userInfo app.data.hasUserInfo = true}}

two。 Unable to pop up authorization window

Attention must be paid here.

The authorization window will only appear when the user first authorizes, that is, only once!

In WeChat Mini Programs's development tool, we need to clear all caches.

3. Do not display buttons if authorized

Because app.js fetches the user's personal information when the user is authorized (rather than when the user clicks the authorization button), but the process is asynchronous.

You can see that when our authorization button appears, it can be judged by the true value of {{! hasUserInfo}}, which can be assigned by whether the app.js has obtained the information.

Wechat authorizes login

However, it may appear that the user has been authorized, but the app.js is too slow to obtain personal information, but our authorization button mistakenly thinks that app.js does not get the information, so the authorization button is rendered.

At this point, we want to tell us the authorization button after app.js determines that the user has been authorized and obtained the information.

Let's add the following code snippet to me.js.

OnLoad: function () {/ / get personal information if (app.globalData.userInfo) {this.setData ({userInfo: app.globalData.userInfo, hasUserInfo: true})} else {/ / when app.js does not get the information Determine whether the asynchronous operation of app.js returns information app.userInfoReadyCallback = res = > {this.setData ({userInfo: app.globalData.userInfo, hasUserInfo: true})}

Why is there an app.userInfoReadyCallback function here? we noticed that there is a callback function in app.js 's wx.getSetting, which is used to solve the asynchronous problem.

At this point, I believe you have a deeper understanding of "how WeChat Mini Programs invokes the Wechat authorization window". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!