前言相關學習推薦:微信小程序教程
小程序在開發(fā)過程中很多地方需要用戶的授權,需要查詢用戶是否授權,沒有授權引導用戶去授權。所以我就把這個流程做了下封裝,小可愛們可以參考一下,多多提意見一起進步。
流程圖有時候項目的很多地方都會用到判斷用戶是否授權的邏輯,所以封裝是非常有必要的。下面我們拿位置授權作為例子說一下一般的流程。
很多應用在一進入就會讓用戶授權地理位置,可以拿到用戶的經(jīng)緯度通過計算獲取距離用戶的距離。下面是一個簡單的流程圖。
開發(fā)先要通過wx.getSettiing()
獲取用戶的當前設置,官方文檔。如果擁有權限進行下一步操作,如果沒有再次請求用戶打開權限,如果點擊用戶點擊否,授權失敗。如果用戶同意,調(diào)用wx.openSetting()
調(diào)起客戶端小程序設置界面,返回用戶設置的操作結果,官方文檔。打開設置頁面后如果用戶沒有打開授權就返回了,會拿到授權失敗的結果。如果打開了授權返回之前的頁面就授權成功了。
這邊要注意一點 獲取地理授權 要在 app.json 添加下面代碼。
"permission": { "scope.userLocation": { "desc": "您的位置信息將用于展示您所在城市的信息" } }復制代碼主要代碼
在utils文件夾下新建 auth.js 用于授權操作,然后在代碼中就可以直接2行搞定拉!
/** * 微信授權 */ const authList = { userInfo: { apiName: ['getUserInfo'], authTitle: '需要使用你的用戶信息', authContent: '需要使用你的用戶信息,請確認授權' }, userLocation: { apiName: ['getLocation', 'chooseLocation'], authTitle: '請求授權當前位置', authContent: '需要獲取您的地理位置,請確認授權' }, address: { apiName: ['chooseAddress'], authTitle: '需要使用你的通訊地址', authContent: '需要使用你的通訊地址,請確認授權' }, invoiceTitle: { apiName: ['chooseInvoiceTitle'], authTitle: '需要使用你的發(fā)票抬頭', authContent: '需要使用你的發(fā)票抬頭,請確認授權' }, invoice: { apiName: ['chooseInvoice'], authTitle: '需要獲取你的發(fā)票', authContent: '需要獲取你的發(fā)票,請確認授權' }, werun: { apiName: ['getWeRunData'], authTitle: '需要獲取你的微信運動數(shù)據(jù)', authContent: '需要獲取你的微信運動數(shù)據(jù),請確認授權' }, writePhotosAlbum: { apiName: ['saveImageToPhotosAlbum', 'saveVideoToPhotosAlbum'], authTitle: '請求授權相冊', authContent: '需要使用你的相冊,請確認授權' }, } /** * @description: 返回值中只會出現(xiàn)小程序已經(jīng)向用戶請求過的權限 * @param {String} 權限名稱 * @return {Boolean} 是有擁有權限 */ 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 // 用戶拒絕過 if (result[`scope.${key}`] === false) { // 引導去授權頁 _showModal(key).then(() => { resolve() }) } else { // 已授權,或者還未授權 resolve() } } }) }) } /** * @description: 引導去授權設置頁面 * @param {String} 權限名稱 * @return {Boolean} 是有擁有權限 */ 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 => { // 異步,進入授權頁面授權后返回判斷 if (dataAu.authSetting[`scope.${key}`] === true) { wx.showToast({ title: '授權成功', icon: 'success', duration: 1000 }) resolve() } else { wx.showToast({ title: '授權失敗', icon: 'none', duration: 1000 }) } } }) // 用戶點擊取消 } else if (res.cancel) { wx.showToast({ title: '授權失敗', icon: 'none', duration: 1000 }) } } }) }) } module.exports = { getWxSetting }復制代碼
頁面js引入auth.js 傳入,調(diào)用 getWxSetting 方法傳入已經(jīng)在auth.js中定義authList 對應的屬性名
//index.js //獲取應用實例 const app = getApp() const wxApi = require('../../utils/auth.js') Page({ data: { }, // 打開地圖 openMap: function() { wxApi.getWxSetting('userLocation').then(()=>{ // 已經(jīng)授權或還未授權,下面的代碼也可以根據(jù)需求提取到公共文件中 wx.getLocation({ type: 'wgs84', success: res => { wx.openLocation({ latitude: res.latitude, longitude: res.longitude, }) }, fail: err => { wx.showToast({ title: '檢查手機定位權限', icon: 'none', duration: 2000 }) } }) }) }, // 保存到相冊 writePhotosAlbum: function() { wxApi.getWxSetting('writePhotosAlbum').then(()=>{ // 已經(jīng)授權或還未授權,下面的代碼也可以根據(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 () { }, })復制代碼
然后就可以進行授權后的操作了,這里的 wx.getLocation 也可以提取公共文件,這里就不再贅述了。
想了解更多編程學習,敬請關注php培訓欄目!
本文題目:小程序獲取用戶位置授權的完美講述
瀏覽路徑:http://muchs.cn/article36/cjphpg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供微信小程序、網(wǎng)站改版、標簽優(yōu)化、網(wǎng)站導航、電子商務、網(wǎng)站設計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)