This is the fifth day of my participation in Gwen Challenge

1. Introduction

In the process of developing small programs, it is often necessary to obtain user information: eg: The user’s phone number needs to be obtained when logging in; For example, the small program of group purchase in a duo Duo community needs to obtain the user’s location information and so on. This requires the user to take the initiative to authorize, since there is a choice, then the user may refuse the authorization, so how to guide the user to reauthorize?

2. Requirement description

Next, the topic of how to guide users to open again after they refuse location service will be explained.

Business sorting:

In a word, when the user clicks refuse authorization, a pop-up prompt box will appear to prompt the user to set the page for re-authorization; When the user goes to the Settings page to re-authorize and then returns to the page, the user location information can be obtained.

Starting from version 2.3.0, users can jump to the Settings page to manage authorization information only after clicking.

3. Pre-knowledge

  • Wx. getLocation: Gets the current location and speed.
  • Wx. openSetting: Invokes the client applet setting interface and returns the operation result set by the user. The Settings screen will only show the permissions that the applet has requested from the user.

4. Requirement realization

4.1 Enabling the Location Service Right

A. In the root directory app.json, configure the following codes to enable the location service permission.

"Permission ": {"scope.userLocation": {"desc":" Your location information displays the effect of the user applets location interface "}}Copy the code

If you do not perform this step, the following prompt will appear on the wechat developer tool:

B. Prepare the page test code

// WXML <view bindtap="getLocation"> <view wx:if="{{location}}"> {{location, latitude}} - latitude: {{location. Longitude}} < / view >Copy the code
4.2 Waking up the Authorization popup

A. Implement the getLocation() business method – get the current geographic location

When using the third-party service to perform reverse address resolution, check the default coordinate system of the third-party service and correctly translate coordinates.

getLocation () { wx.getLocation({ type: 'wgs84', altitude: false, success: Res = > {the console. The log (' success callback interface call - > 'res) const {latitude and longitude} = res | | {}}, fail: Err =>{console.log(' interface call failed callback ->', err)}, complete: () =>{console.log(' interface call failed callback -> execute on success and failure ')}})}Copy the code

At this point, you press the get user location button to wake up the authorization popup, as shown below:

If the user clicks reject in the authorization popover, there is no longer any way to click the authorization button to get location information, which is why we need to navigate to the Settings page.

4.3 Realization of authorized missile window

A. Implement showTipsModal() business method – click cancel and the missile window pops up

We found that if the user clicked reject, it would send a message in the Fail callback, so we could fix this.

The main code is as follows:

ShowTipsModal (e) {wx.showmodal ({title: 'prompt ', confirmText:' to set ', showCancel: false, Content: e, success: Function (res) {console.log(' popup callback ->', Res) const {confirm} = res | | {} the if (confirm) {the console. The log (' click the pop-up window to set button - > to launch next process ')}}})}Copy the code

The result is as follows:

4.4 Go to the native Settings page

A. Implement the openLocationSetting() business method – go to Settings to jump to the native Settings page

The Settings screen will only show the permissions that the applet has requested from the user.

The main code is as follows:

openLocationSetting () { const _this = this const setting = 'scope.userLocation' wx.openSetting({ success (res) { Console. log(' native Settings page callback ->', Res) const {authSetting} = res | | {} / / have been authorized the if open position (authSetting. HasOwnProperty (setting) && authSetting [setting]) { Console. log(' enabled location service successfully ->But no location information is returned here ')}}, fail () {toast(' failed to obtain location information, Press "Right up menu - About \ N - Right up menu - Settings - Location Info" Authorization ')}})}Copy the code

Select the item you want to change here, like here I want to change the location message permissionsClick to jump to the location message setting page, as shown below:After we modify, for example, to be used only during the applets, the SUCCESS callback will be triggered. Details are as follows:

4.5 Receive setup page callback

A. In the callback function, obtain the user location information again. Here are a few points to note:

  • If the user still does not agree to authorize, need to have a backstop scheme;
  • If the method of obtaining positioning is not manually triggered by the user, but actively triggered when the page onShow, we need to pay attention to the user refused to authorize and then come back to the page, still constantly appear authorization missile window bug -> users can never normally browse the page -> solution: Set a switch, only in the page the first show when the missile window, no other time.

The complete code is shown below:

const app = getApp() Page({ data:{ location: '' }, getLocation () { wx.getLocation({ type: 'wgs84', altitude: false, success: Res = > {the console. The log (' success callback interface call - > 'res) const {latitude and longitude} = res | | {} this. SetData ({location: { latitude, longitude } }) }, fail: Err => {console.log(' interface call failed callback ->', err) // Rejected the appearance of the missile window this.showTipsModal(' please authorize ')}, complete: ShowTipsModal (e) {const _this = this wx.showmodal ({title: const _this = this wx.showmodal ({title: const _this = this wx.showmodal ({title: 'Prompt ', confirmText:' to set ', showCancel: false, Content: e, success: Function (res) {console.log(' popup callback ->', Res) const {confirm} = res | | {} if {(confirm). The console log (' click the pop-up window to set button - > to launch next process ') / / jump to the original Settings page _this.openLocationSetting() } } }) }, openLocationSetting () { const _this = this const setting = 'scope.userLocation' wx.openSetting({ success (res) { Console. log(' native Settings page callback ->', Res) const {authSetting} = res | | {} / / have been authorized the if open position (authSetting. HasOwnProperty (setting) && authSetting [setting]) { _this.getlocation ()}}, fail () {toast(' failed to getLocation information, Press "Right up menu - About \ N - Right up menu - Settings - Location Info" Authorization ')}})}})Copy the code

5. Write at the end

If there is a mistake, please leave a message, will be corrected in time! If feel helpful to you, please click a like or collect it!