微信小程序弹出用户受权弹窗，微信小程序引导用户受权，获取位置经纬度

咱们在开发小程序时，有些操做必须让用户受权。好比咱们获取用户位置，须要用户受权位置信息。受权操做咱们须要给用户弹窗提示，在用户禁用某些权限时，又要引导用户去设置页开启相应权限。咱们这里就以获取经纬度为例，来带你们学会友好的引导用户受权。

老规矩，先看效果图

一，咱们使用位置信息，就须要受权

//校验位置权限是否打开
 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": "你的位置信息将用于小程序位置接口的效果展现"
  }
 }
}

到此咱们就实现了小程序引导受权的所有功能，而且能够获取到用户的位置经纬度了。是否是很简单。