微信小程序彈出用戶授權(quán)彈窗，微信小程序引導(dǎo)用戶授權(quán)，獲取位置經(jīng)緯度
2021-08-08 12:45:00

我們?cè)陂_發(fā)小程序時(shí)，有些操作必須讓用戶授權(quán)。比如我們獲取用戶位置，需要用戶授權(quán)位置信息。授權(quán)操作我們需要給用戶彈窗提示，在用戶禁用某些權(quán)限時(shí)，又要引導(dǎo)用戶去設(shè)置頁(yè)開啟相應(yīng)權(quán)限。我們這里就以獲取經(jīng)緯度為例，來(lái)帶大家學(xué)會(huì)友好的引導(dǎo)用戶授權(quán)。

老規(guī)矩，先看效果圖

一，我們使用位置信息，就需要授權(quán)

 //校驗(yàn)位置權(quán)限是否打開
 checkLocation() {
  let that = this;
  //選擇位置，需要用戶授權(quán)
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //這里提示失敗原因
        title: '授權(quán)成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('需要授權(quán)位置信息');
      }
     })
    }
   }
  })
 },

首先檢驗(yàn)用戶是否授權(quán)位置信息的權(quán)限“scope.userLocation”，如果有授權(quán)，我們就可以直接去獲取用戶的位置經(jīng)緯度了。如果沒有授權(quán)，我們就彈窗引導(dǎo)用戶去設(shè)置頁(yè)。去設(shè)置頁(yè)的方法如下

 // 打開權(quán)限設(shè)置頁(yè)提示框
 showSettingToast: function (e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去設(shè)置',
   showCancel: false,
   content: e,
   success: function (res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 },

由于去設(shè)置頁(yè)，需要用戶手動(dòng)觸發(fā)，這里我們就用一個(gè)setting.wxml頁(yè)作為過(guò)過(guò)渡頁(yè)。

我們這個(gè)過(guò)渡頁(yè)的按鈕，用戶點(diǎn)擊后就會(huì)去真正的授權(quán)頁(yè)了。

當(dāng)用戶開啟地理位置授權(quán)后。我們?cè)冱c(diǎn)擊獲取位置，就可以獲取到用戶當(dāng)前的經(jīng)緯度了。

完整代碼如下

//index.js

Page({
 getLocation() {
  this.checkLocation();

  let that = this;
  wx.chooseLocation({
   success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude;
    that.setData({
     address: "經(jīng)緯度：" + longitude + ", " + latitude,
    })
   }
  });
 },
 //校驗(yàn)位置權(quán)限是否打開
 checkLocation() {
  let that = this;
  //選擇位置，需要用戶授權(quán)
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //這里提示失敗原因
        title: '授權(quán)成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('需要授權(quán)位置信息');
      }
     })
    }
   }
  })
 },
 // 打開權(quán)限設(shè)置頁(yè)提示框
 showSettingToast: function (e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去設(shè)置',
   showCancel: false,
   content: e,
   success: function (res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 },
})

還有我們授權(quán)必須再app.json里注冊(cè)相關(guān)權(quán)限。如我的app.json如下

{
 "pages": [
  "pages/index/index",
  "pages/setting/setting"
 ],
 "window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle": "black"
 },
 "permission": {
  "scope.userLocation": {
   "desc": "你的位置信息將用于小程序位置接口的效果展示"
  }
 }
}

到此我們就實(shí)現(xiàn)了小程序引導(dǎo)授權(quán)的全部功能，并且可以獲取到用戶的位置經(jīng)緯度了。是不是很簡(jiǎn)單。

?