微信小程序開發——小程序API獲取用戶位置及異常流處理完整示例

前言：

小程序需要添加一個定位功能，主要的就是獲取用戶位置的經緯度，然后根據用戶經緯度進行一些判斷操作。

在小程序提供的Api中，獲取用戶定位信息的主要Api是 wx.getLocation（obj） 。但是使用這個API，會先獲取用戶授權。如果用戶取消授權，那么再調這個Api，也不會再出現授權頁面，也就不能再獲取用戶位置了，這就需要使用其他的Api輔助打開授權頁面了。所以獲取用戶位置就需要完整的授權、獲取位置的流程及異常流處理了。

業務流程圖：

關鍵技術點：

頁面加載默認調用 wx.getLocation ,然后如果獲取失敗則調用 wx.getSetting ，如果未授權，則調用 wx.openSetting 打開授權設置界面，如果授權界面設置允許授權，則返回頁面再次調用 wx.getLocation，主要的流程就是這個了。

示例代碼：

const app = getApp()

Page({
  data: {
    hiddenReAuthorizePop:true,//隱藏重新授權確認彈窗
    latitude: "", //維度，浮點數
    longitude: "", //經度，浮點數
    content:"本活動需要獲取位置才可以參加"
  },
  onLoad: function() {
    //1. 頁面加載的時候獲取定位
    this.getLocation()
  },
  /**
   * 1. 獲取用戶定位
   */
  getLocation: function() {
    var self = this;
    wx.getLocation({
      type: 'wgs84', // 默認為wgs84的gps坐標，如果要返回直接給openLocation用的坐標，可傳入'gcj02'
      altitude: true, //傳入 true 會返回高度信息，由於獲取高度需要較高精確度，會減慢接口返回速度
      success: function(res) {
        var latitude = res.latitude; // 緯度，浮點數
        var longitude = res.longitude; // 經度，浮點數
        self.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      },
      fail: function(res) {
        //未授權就彈出彈窗提示用戶重新授權
        self.reAuthorize();          
      }
    });
  },
  /**
   * 1.2 重新授權按鈕點擊事件
   * click event   
   */
  openLocationSetting: function() {
    var self = this
    //先獲取用戶的當前設置，返回值中只會出現小程序已經向用戶請求過的權限
    wx.getSetting({
      success: function(res) {
        if (res.authSetting && !res.authSetting["scope.userLocation"]) {
          //未授權則打開授權設置界面
          wx.openSetting({
            success: function(res) {              
              if (res.authSetting && res.authSetting["scope.userLocation"]) {                
                //允許授權,則自動獲取定位，並關閉二確彈窗，否則返回首頁不處理
                self.getLocation();
                self.setData({
                  hiddenReAuthorizePop:true
                })
                wx.showToast({
                  title: '您已授權獲取位置信息',
                  icon: 'none'
                })
              }else{
                //未授權就彈出彈窗提示用戶重新授權      
                self.reAuthorize();
              }
            }
          })
        } else {
          //授權則重新獲取位置新（授權設置界面返回首頁，首頁授權二確彈窗未關閉）
          self.getLocation();
        }
      }
    })
  },
  /**
   * 重新授權
   */
  reAuthorize:function(){
    var self=this
    self.setData({ hiddenReAuthorizePop:false})
  }
})

 代碼片段地址：https://developers.weixin.qq.com/s/uRMylxmO7e3Q

原創專業博客，轉載請注明來源地址：https://www.cnblogs.com/xyyt/p/9871898.html