微信小程序用戶(hù)授權(quán)最佳實(shí)踐指南
前言
開(kāi)發(fā)微信小程序中，經(jīng)常會(huì)用到獲取一些用戶(hù)權(quán)限的頁(yè)面，比如你要登錄，就要獲取個(gè)人信息、你要做人臉識(shí)別，就要獲取相機(jī)權(quán)限、你要做位置地圖功能、就要獲取用戶(hù)的位置權(quán)限，你要將圖片保存在用戶(hù)的相冊(cè)，需要獲取相冊(cè)權(quán)限等等
微信的 scope 流程：
大多數(shù)功能都是沒(méi)有授權(quán)不可用的，一般我會(huì)檢測(cè)是否開(kāi)啟權(quán)限，然后如果開(kāi)啟了就繼續(xù)使用，沒(méi)開(kāi)啟就給出提示繼續(xù)請(qǐng)求授權(quán)..如果還是拒絕 就給出提示 然后讓用戶(hù)手動(dòng)去設(shè)置頁(yè)打開(kāi)...
#正常邏輯
但是這一套寫(xiě)下來(lái)可能就是這樣的：
wx.getSetting({
success(res)=>{
if (!res.authSetting['scope']) {
console.log('未授權(quán)')
wx.authorize({
scope: 'scope',
success() {
console.log('授權(quán)成功')
},
fail() {
console.log('授權(quán)失敗，讓用戶(hù)手動(dòng)授權(quán)')
wx.showModal({
title: '溫馨提示',
content: '未打開(kāi)xxx權(quán)限',
showCancel: false,
success(res) {
if (res.confirm) {
console.log('用戶(hù)點(diǎn)擊確定')
wx.openSetting({
success(res) {
console.log(res.authSetting)
res.authSetting = {
"scope.camera": true,
}
}
})
} else if (res.cancel) {
console.log('用戶(hù)點(diǎn)擊取消')
}
}
})
}
})
} else {
console.log('已授權(quán)')
}
},
fail(err)=>{}
})
現(xiàn)在都 1202 年了，這一套寫(xiě)下來(lái)，再摻雜著業(yè)務(wù)邏輯，那真的是慘不忍睹~
我是受不了，花了點(diǎn)時(shí)間封裝了個(gè)函數(shù)，只需傳入指定的權(quán)限名稱(chēng)，就能檢測(cè)用戶(hù)是否開(kāi)啟權(quán)限，沒(méi)有開(kāi)啟，會(huì)提示，提示還不開(kāi)就去設(shè)置頁(yè)手動(dòng)打開(kāi)（總之必須打開(kāi)）。
本來(lái)想寫(xiě)個(gè)代碼片段，后來(lái)發(fā)現(xiàn)工具上在調(diào)用 openSetting 時(shí)有問(wèn)題，只好放棄。
#代碼細(xì)節(jié)
// utils/auth.js
/**
* @param {
* authType: 授權(quán)類(lèi)型
* }
*/
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("請(qǐng)輸入正確的授權(quán)類(lèi)型");
}
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);
// 彈框提示去授權(quán)
if (showModalMes) {
// 去手動(dòng)授權(quán)
let openSet = await openSettingSync(scope);
if (openSet) {
return true;
} else {
return false;
}
} else {
// 拒絕授權(quán)
return false;
}
};
// 判斷用戶(hù)是否開(kāi)啟該授權(quán)
function getSettingSync(scope) {
return new Promise((resolve, reject) => {
wx.getSetting({
success(res) {
if (!res.authSetting[scope]) {
console.log("未授權(quán)");
resolve(false);
} else {
console.log("已授權(quán)");
resolve(true);
}
},
fail(err) {
reject();
console.error("wx.getSetting Error", err);
},
});
});
}
// 請(qǐng)求用戶(hù)授權(quán)
function authorizeSync(scope) {
return new Promise((resolve, reject) => {
wx.authorize({
scope: scope,
success() {
resolve(true);
console.log("授權(quán)成功");
},
fail() {
resolve(false);
console.log("授權(quán)失敗");
},
});
});
}
// 彈框提示用戶(hù)手動(dòng)授權(quán)
function showModalSync(scope) {
return new Promise((resolve, reject) => {
wx.showModal({
title: "提示",
content: `為了更好的用戶(hù)體驗(yàn)，請(qǐng)您授權(quán) ${scope} 功能`,
confirmText: "去授權(quán)",
showCancel: false,
success(res) {
if (res.confirm) {
console.log("點(diǎn)擊確認(rèn)");
resolve(true);
} else if (res.cancel) {
resolve(false);
}
},
fail(err) {
reject();
console.error(err, "wx.showModal Error");
},
});
});
}
// 調(diào)起客戶(hù)端小程序設(shè)置界面，返回用戶(hù)設(shè)置的操作結(jié)果
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(){
// 授權(quán)代碼
auth('camera').then(() => {
console.log('授權(quán)成功')
this.setData({
isCameraAuth: true
}
}).catch((err) => {
console.error('授權(quán)失敗');
})
}
})
wxml 代碼參考：
<!-- index.wxml -->
<view>是否授權(quán)：{{isCameraAuth}}</view>
<camera wx:if="{{isCameraAuth}}" style="width: 100%; height: 300px;"></camera>
#預(yù)覽
為此，我制作了一個(gè) Demo，點(diǎn)擊Demo 預(yù)覽 ，即可在開(kāi)發(fā)工具中直接打開(kāi)預(yù)覽。
總結(jié)
到此這篇關(guān)于微信小程序用戶(hù)授權(quán)最佳實(shí)踐的文章就介紹到這了,更多相關(guān)微信小程序用戶(hù)授權(quán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實(shí)現(xiàn)貪吃蛇游戲 canvas繪制地圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲，canvas繪制地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js 判斷各種數(shù)據(jù)類(lèi)型的簡(jiǎn)單方法(推薦)
下面小編就為大家?guī)?lái)一篇js 判斷各種數(shù)據(jù)類(lèi)型的簡(jiǎn)單方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義Modal彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript數(shù)組實(shí)例的9個(gè)方法
這篇文章主要介紹了JavaScript數(shù)組實(shí)例的9個(gè)方法,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹沒(méi)具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07
JavaScript中對(duì)象的不同創(chuàng)建方法
js對(duì)象與一般的面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言有所不同的。js中的對(duì)象是基本原型的。下面給大家介紹js中對(duì)象的不同創(chuàng)建方法，非常不錯(cuò)，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平（扁平化）方法
數(shù)組扁平化是指將一個(gè)多維數(shù)組變?yōu)橐痪S數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平（扁平化）方法的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
JavaScript中創(chuàng)建字典對(duì)象（dictionary）實(shí)例
這篇文章主要介紹了JavaScript中創(chuàng)建字典對(duì)象（dictionary）實(shí)例,本文直接給出了實(shí)現(xiàn)的源碼,并給出了使用示例,需要的朋友可以參考下2015-03-03
js 操作table之 移動(dòng)TR位置 兼容FF 跟 IE
js操作table之 移動(dòng)TR位置 兼容FF 跟 IE,需要的朋友可以參考下。2009-11-11
js實(shí)現(xiàn)window.open不被攔截的解決方法匯總
這篇文章主要介紹了js實(shí)現(xiàn)window.open不被攔截的解決方法,實(shí)例匯總了常用的不被攔截的解決方法,需要的朋友可以參考下2014-10-10
js實(shí)現(xiàn)簡(jiǎn)單點(diǎn)贊操作
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單點(diǎn)贊操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03