小程序獲取用戶位置授權(quán)的示例分析

這篇文章主要介紹小程序獲取用戶位置授權(quán)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

流程圖

有時(shí)候項(xiàng)目的很多地方都會(huì)用到判斷用戶是否授權(quán)的邏輯，所以封裝是非常有必要的。下面我們拿位置授權(quán)作為例子說(shuō)一下一般的流程。

很多應(yīng)用在一進(jìn)入就會(huì)讓用戶授權(quán)地理位置，可以拿到用戶的經(jīng)緯度通過(guò)計(jì)算獲取距離用戶的距離。下面是一個(gè)簡(jiǎn)單的流程圖。

開(kāi)發(fā)先要通過(guò)wx.getSettiing()獲取用戶的當(dāng)前設(shè)置,官方文檔。如果擁有權(quán)限進(jìn)行下一步操作，如果沒(méi)有再次請(qǐng)求用戶打開(kāi)權(quán)限，如果點(diǎn)擊用戶點(diǎn)擊否，授權(quán)失敗。如果用戶同意，調(diào)用wx.openSetting()調(diào)起客戶端小程序設(shè)置界面，返回用戶設(shè)置的操作結(jié)果，官方文檔。打開(kāi)設(shè)置頁(yè)面后如果用戶沒(méi)有打開(kāi)授權(quán)就返回了，會(huì)拿到授權(quán)失敗的結(jié)果。如果打開(kāi)了授權(quán)返回之前的頁(yè)面就授權(quán)成功了。

這邊要注意一點(diǎn) 獲取地理授權(quán) 要在 app.json 添加下面代碼。

"permission": {
    "scope.userLocation": {
      "desc": "您的位置信息將用于展示您所在城市的信息"
    }
  }復(fù)制代碼

主要代碼

在utils文件夾下新建 auth.js 用于授權(quán)操作，然后在代碼中就可以直接2行搞定拉！

/**
* 微信授權(quán)
*/
const authList = {
 userInfo: {
   apiName: ['getUserInfo'],
   authTitle: '需要使用你的用戶信息',
   authContent: '需要使用你的用戶信息，請(qǐng)確認(rèn)授權(quán)'
 },
 userLocation: {
   apiName: ['getLocation', 'chooseLocation'],
   authTitle: '請(qǐng)求授權(quán)當(dāng)前位置',
   authContent: '需要獲取您的地理位置，請(qǐng)確認(rèn)授權(quán)'
 },
 address: {
   apiName: ['chooseAddress'],
   authTitle: '需要使用你的通訊地址',
   authContent: '需要使用你的通訊地址，請(qǐng)確認(rèn)授權(quán)'
 },
 invoiceTitle: {
   apiName: ['chooseInvoiceTitle'],
   authTitle: '需要使用你的發(fā)票抬頭',
   authContent: '需要使用你的發(fā)票抬頭，請(qǐng)確認(rèn)授權(quán)'
 },
 invoice: {
   apiName: ['chooseInvoice'],
   authTitle: '需要獲取你的發(fā)票',
   authContent: '需要獲取你的發(fā)票，請(qǐng)確認(rèn)授權(quán)'
 },
 werun: {
   apiName: ['getWeRunData'],
   authTitle: '需要獲取你的微信運(yùn)動(dòng)數(shù)據(jù)',
   authContent: '需要獲取你的微信運(yùn)動(dòng)數(shù)據(jù)，請(qǐng)確認(rèn)授權(quán)'
 },
 writePhotosAlbum: {
   apiName: ['saveImageToPhotosAlbum', 'saveVideoToPhotosAlbum'],
   authTitle: '請(qǐng)求授權(quán)相冊(cè)',
   authContent: '需要使用你的相冊(cè)，請(qǐng)確認(rèn)授權(quán)'
 },
}
/**
* @description: 返回值中只會(huì)出現(xiàn)小程序已經(jīng)向用戶請(qǐng)求過(guò)的權(quán)限
* @param {String} 權(quán)限名稱(chēng)
* @return {Boolean} 是有擁有權(quán)限
*/
const getWxSetting = key => {
 if (typeof key === 'string' && !authList[key]) return false
 return new Promise(function (resolve) {
   wx.getSetting({
     success: async res => {
       var result = res.authSetting
       // 用戶拒絕過(guò)
       if (result[`scope.${key}`] === false) {
         // 引導(dǎo)去授權(quán)頁(yè)
         _showModal(key).then(() => {
           resolve()
         })
       } else {
         //  已授權(quán)，或者還未授權(quán)
         resolve()
       }
     }
   })
 })
}
/**
* @description: 引導(dǎo)去授權(quán)設(shè)置頁(yè)面
* @param {String} 權(quán)限名稱(chēng)
* @return {Boolean} 是有擁有權(quán)限
*/
const _showModal = key => {
 console.log(authList[key].authContent)
 return new Promise(function (resolve) {
   wx.showModal({
     title: authList[key].authTitle,
     content: authList[key].authContent,
     success: function (res) {
       if (res.confirm) {
         wx.openSetting({
           success: async dataAu => {
             // 異步，進(jìn)入授權(quán)頁(yè)面授權(quán)后返回判斷
             if (dataAu.authSetting[`scope.${key}`] === true) {
               wx.showToast({
                 title: '授權(quán)成功',
                 icon: 'success',
                 duration: 1000
               })
               resolve()
             } else {
               wx.showToast({
                 title: '授權(quán)失敗',
                 icon: 'none',
                 duration: 1000
               })
             }
           }
         })
         // 用戶點(diǎn)擊取消
       } else if (res.cancel) {
         wx.showToast({
           title: '授權(quán)失敗',
           icon: 'none',
           duration: 1000
         })
       }
     }
   })
 })
}

module.exports = {
 getWxSetting
}復(fù)制代碼

頁(yè)面js引入auth.js 傳入,調(diào)用 getWxSetting 方法傳入已經(jīng)在auth.js中定義authList 對(duì)應(yīng)的屬性名

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
const wxApi = require('../../utils/auth.js')
Page({
  data: {
  },
  // 打開(kāi)地圖
  openMap: function() {
    wxApi.getWxSetting('userLocation').then(()=>{
        // 已經(jīng)授權(quán)或還未授權(quán)，下面的代碼也可以根據(jù)需求提取到公共文件中
      wx.getLocation({
        type: 'wgs84',
        success: res => {
          wx.openLocation({
            latitude: res.latitude,
            longitude: res.longitude,
          })
        },
        fail: err => {
          wx.showToast({
            title: '檢查手機(jī)定位權(quán)限',
            icon: 'none',
            duration: 2000
          })
        }
      })
    })
  },
  // 保存到相冊(cè)
  writePhotosAlbum: function() {
    wxApi.getWxSetting('writePhotosAlbum').then(()=>{
     // 已經(jīng)授權(quán)或還未授權(quán)，下面的代碼也可以根據(jù)需求提取到公共文件中
      wx.downloadFile({
        url: 'https://imgs.solui.cn/avatar.png',
        success: function(res) {
            wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function(res) {
                   wx.showToast({
                     title: '保存成功',
                     icon:'none'
                   })
                },
                fail: function(err) {
                  wx.showToast({
                    title: '保存失敗',
                    icon:'none'
                  })
                }
            })
        }
      })
    })
  },
  onLoad: function () {

  },
})復(fù)制代碼

然后就可以進(jìn)行授權(quán)后的操作了，這里的  wx.getLocation 也可以提取公共文件，這里就不再贅述了。

以上是“小程序獲取用戶位置授權(quán)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！