微信小程序彈出用戶受權彈窗，微信小程序引導用戶受權，獲取位置經緯度

咱們在開發小程序時，有些操做必須讓用戶受權。好比咱們獲取用戶位置，須要用戶受權位置信息。受權操做咱們須要給用戶彈窗提示，在用戶禁用某些權限時，又要引導用戶去設置頁開啓相應權限。咱們這裏就以獲取經緯度爲例，來帶你們學會友好的引導用戶受權。

老規矩，先看效果圖

一，咱們使用位置信息，就須要受權

//校驗位置權限是否打開
 checkLocation() {
  let that = this;
  //選擇位置，須要用戶受權
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //這裏提示失敗緣由
        title: '受權成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('須要受權位置信息');
      }
     })
    }
   }
  })
 },

首先檢驗用戶是否受權位置信息的權限「scope.userLocation」，若是有受權，咱們就能夠直接去獲取用戶的位置經緯度了。若是沒有受權，咱們就彈窗引導用戶去設置頁。去設置頁的方法以下

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

因爲去設置頁，須要用戶手動觸發，這裏咱們就用一個setting.wxml頁做爲過過渡頁。

咱們這個過渡頁的按鈕，用戶點擊後就會去真正的受權頁了。

當用戶開啓地理位置受權後。咱們再點擊獲取位置，就能夠獲取到用戶當前的經緯度了。

完整代碼以下

//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: "經緯度：" + longitude + ", " + latitude,
    })
   }
  });
 },
 //校驗位置權限是否打開
 checkLocation() {
  let that = this;
  //選擇位置，須要用戶受權
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //這裏提示失敗緣由
        title: '受權成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('須要受權位置信息');
      }
     })
    }
   }
  })
 },
 // 打開權限設置頁提示框
 showSettingToast: function (e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去設置',
   showCancel: false,
   content: e,
   success: function (res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 },
})

還有咱們受權必須再app.json裏註冊相關權限。如個人app.json以下

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

到此咱們就實現了小程序引導受權的所有功能，而且能夠獲取到用戶的位置經緯度了。是否是很簡單。