微信小程序用戶授權最佳實踐指南
更新時間：2021年05月08日 11:44:31 作者：九旬的博客
這篇文章主要給大家介紹了關于微信小程序用戶授權最佳實踐的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前言
開發(fā)微信小程序中，經(jīng)常會用到獲取一些用戶權限的頁面，比如你要登錄，就要獲取個人信息、你要做人臉識別，就要獲取相機權限、你要做位置地圖功能、就要獲取用戶的位置權限，你要將圖片保存在用戶的相冊，需要獲取相冊權限等等
微信的 scope 流程：
大多數(shù)功能都是沒有授權不可用的，一般我會檢測是否開啟權限，然后如果開啟了就繼續(xù)使用，沒開啟就給出提示繼續(xù)請求授權..如果還是拒絕 就給出提示 然后讓用戶手動去設置頁打開...
#正常邏輯
但是這一套寫下來可能就是這樣的：
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)=>{}
})
現(xiàn)在都 1202 年了，這一套寫下來，再摻雜著業(yè)務邏輯，那真的是慘不忍睹~
我是受不了，花了點時間封裝了個函數(shù)，只需傳入指定的權限名稱，就能檢測用戶是否開啟權限，沒有開啟，會提示，提示還不開就去設置頁手動打開（總之必須打開）。
本來想寫個代碼片段，后來發(fā)現(xiàn)工具上在調(diào)用 openSetting 時有問題，只好放棄。
#代碼細節(jié)
// 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");
},
});
});
}
// 調(diào)起客戶端小程序設置界面，返回用戶設置的操作結(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(){
// 授權代碼
auth('camera').then(() => {
console.log('授權成功')
this.setData({
isCameraAuth: true
}
}).catch((err) => {
console.error('授權失敗');
})
}
})
wxml 代碼參考：
<!-- index.wxml -->
<view>是否授權：{{isCameraAuth}}</view>
<camera wx:if="{{isCameraAuth}}" style="width: 100%; height: 300px;"></camera>
#預覽
為此，我制作了一個 Demo，點擊Demo 預覽 ，即可在開發(fā)工具中直接打開預覽。
總結(jié)
到此這篇關于微信小程序用戶授權最佳實踐的文章就介紹到這了,更多相關微信小程序用戶授權內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
獲取JS中網(wǎng)頁各種高寬與位置的方法總結(jié)
本文詳細羅列了如何在javascript獲取網(wǎng)頁各種高寬及位置，內(nèi)容比較全面，有需要的可以參考一下。2016-07-07
js幾個不錯的函數(shù) $$()...2006-10-10
JS中的回調(diào)函數(shù)(callback)講解
回調(diào)函數(shù)是一段可執(zhí)行的代碼段，它作為一個參數(shù)傳遞給其他的代碼，其作用是在需要的時候方便調(diào)用這段（回調(diào)函數(shù)）代碼,這篇文章主要介紹了JS中的?回調(diào)函數(shù)（callback）,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了微信用戶訪問小程序的登錄過程詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
JavaScript之創(chuàng)意時鐘項目(實例講解)
下面小編就為大家?guī)硪黄狫avaScript之創(chuàng)意時鐘項目。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細介紹了js私有作用域中創(chuàng)建特權方法，何為特權方法，特權方法就是有權訪問私有變量和私有函數(shù)的公有方法，感興趣的小伙伴們可以參考一下2016-01-01
JavaScript使用arcgis實現(xiàn)截圖截屏功能
這篇文章主要為大家詳細介紹了JavaScript如何使用arcgis實現(xiàn)截圖截屏功能,類似于qq截圖,文中的示例代碼講解詳細,需要的可以參考一下2024-01-01
Bootstrap每天必學之基礎排版，排版是學習的最基礎環(huán)節(jié)，相當于地基，所以大家一定要認真對待，認真學習本文內(nèi)容。2015-11-11
TextRange是用來表現(xiàn)HTML元素中文字的對象，是一個用于處理JavaScript對象文本部分內(nèi)容的一個對象2014-07-07