開發微信小程序中,常常會用到獲取一些用戶權限的頁面,好比你要登陸,就要獲取我的信息、你要作人臉識別,就要獲取相機權限、你要作位置地圖功能、就要獲取用戶的位置權限,你要將圖片保存在用戶的相冊,須要獲取相冊權限等等html
微信的 scope 流程:小程序
大多數功能都是沒有受權不可用的,通常我會檢測是否開啓權限,而後若是開啓了就繼續使用,沒開啓就給出提示繼續請求受權..若是仍是拒絕 就給出提示 而後讓用戶手動去設置頁打開...微信小程序
可是這一套寫下來可能就是這樣的:微信
wx.getSetting({ success(res)=>{ if (!res.authSetting['scope']) { console.log('未受權') wx.authorize({ scope: 'scope', success() { console.log('受權成功') }, fail() { console.log('受權失敗,讓用戶手動受權') wx.showModal({ title: '舒適提示', content: '未打開xxx權限', showCancel: false, success(res) { if (res.confirm) { console.log('用戶點擊肯定') wx.openSetting({ success(res) { console.log(res.authSetting) res.authSetting = { "scope.camera": true, } } }) } else if (res.cancel) { console.log('用戶點擊取消') } } }) } }) } else { console.log('已受權') } }, fail(err)=>{} })
如今都 1202 年了,這一套寫下來,再摻雜着業務邏輯,那真的是慘不忍睹~async
我是受不了,花了點時間封裝了個函數,只需傳入指定的權限名稱,就能檢測用戶是否開啓權限,沒有開啓,會提示,提示還不開就去設置頁手動打開(總之必須打開)。函數
原本想寫個代碼片斷,後來發現工具上在調用 openSetting 時有問題,只好放棄。工具
// utils/auth.js /** * @param { * authType: 受權類型 * } */ module.exports = async function wxAuth(authType) { // scopeArr ref: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html let scopeArr = [ "userInfo", "userLocation", "userLocationBackground", "address", "invoiceTitle", "invoice", "werun", "record", "writePhotosAlbum", "camera", ]; if (scopeArr.indexOf(authType) == -1) { return console.error("請輸入正確的受權類型"); } let scope = "scope." + authType; let isUserSet = await getSettingSync(scope); if (isUserSet) return true; let isAuthorize = await authorizeSync(scope); if (isAuthorize) return true; let showModalMes = await showModalSync(scope); // 彈框提示去受權 if (showModalMes) { // 去手動受權 let openSet = await openSettingSync(scope); if (openSet) { return true; } else { return false; } } else { // 拒絕受權 return false; } }; // 判斷用戶是否開啓該受權 function getSettingSync(scope) { return new Promise((resolve, reject) => { wx.getSetting({ success(res) { if (!res.authSetting[scope]) { console.log("未受權"); resolve(false); } else { console.log("已受權"); resolve(true); } }, fail(err) { reject(); console.error("wx.getSetting Error", err); }, }); }); } // 請求用戶受權 function authorizeSync(scope) { return new Promise((resolve, reject) => { wx.authorize({ scope: scope, success() { resolve(true); console.log("受權成功"); }, fail() { resolve(false); console.log("受權失敗"); }, }); }); } // 彈框提示用戶手動受權 function showModalSync(scope) { return new Promise((resolve, reject) => { wx.showModal({ title: "提示", content: `爲了更好的用戶體驗,請您受權 ${scope} 功能`, confirmText: "去受權", showCancel: false, success(res) { if (res.confirm) { console.log("點擊確認"); resolve(true); } else if (res.cancel) { resolve(false); } }, fail(err) { reject(); console.error(err, "wx.showModal Error"); }, }); }); } // 調起客戶端小程序設置界面,返回用戶設置的操做結果 function openSettingSync(scope) { return new Promise((resolve, reject) => { wx.openSetting({ success(res) { console.log(res.authSetting); if (res.authSetting[scope]) { resolve(true); } else { resolve(false); } }, fail(err) { reject(); console.error(err, "wx.openSetting Error"); }, }); }); }
JS 代碼參考:開發工具
import auth from './../../utils/auth' Page({ data:{ isCameraAuth: false }, onLoad(){ // 受權代碼 auth('camera').then(() => { console.log('受權成功') this.setData({ isCameraAuth: true } }).catch((err) => { console.error('受權失敗'); }) } })
wxml 代碼參考:this
<!-- index.wxml --> <view>是否受權:{{isCameraAuth}}</view> <camera wx:if="{{isCameraAuth}}" style="width: 100%; height: 300px;"></camera>
爲此,我製做了一個 Demo,點擊Demo 預覽,便可在開發工具中直接打開預覽。spa
來自九旬的原創: 博客原文連接