做過疆偿、知道咱筛、了解微信小程序的都知道如果你的小程序應用需要獲取微信的用戶信息數(shù)據(jù)是需要通過用戶同意的搓幌，也就是需要用戶授權(quán)，如果用戶不授權(quán)那么你就拿不到用戶的信息迅箩。很多人也都知道現(xiàn)在的人什么都可以不用帶溉愁，但手機不許要帶，因為手機就是我們的全部饲趋，無論是錢包拐揭，證件等等。所以安全和隱私就是一個比較敏感的話題了奕塑。
小程序這么做也是為了保護用戶的隱私數(shù)據(jù)堂污，早期開發(fā)小程序的都知道，小程序的授權(quán)在中途接口時大改了的龄砰，當時很多人吐槽盟猖，反正改和沒改都是一樣的，做任何事都會有人吐槽的换棚。
在我看來小程序的做法挺好式镐，畢竟用戶的隱私還是又用戶自己來做決定的，特別最近頭條和騰訊開發(fā)數(shù)據(jù)之間因為頭像等信息的事件固蚤，這種就更需要了娘汞。
今天就來看看如何去做一個小程序的授權(quán)封裝，這里封裝主要針對小程序應用必須要微信用戶數(shù)據(jù)的夕玩，所以也就是不授權(quán)就沒辦法用的你弦。
結(jié)構(gòu)搭建
首先需要我們在小程序組件目錄中添加一個授權(quán)的組件惊豺，基本結(jié)構(gòu)如下：
然后新建一個頁面用于組件的測試，如下：
上面的代碼json和wxml文件中沒有具體展示禽作，大家要記得引入組件以及在wxml中添加組件的標簽扮叨，如果不是很清楚可以看看微信小程序組件的使用。
組件的基本結(jié)構(gòu)
組件的界面主要是想模仿微信小程序自帶授權(quán)彈窗的樣式领迈，所以就按照這個樣式做一個彻磁，如下：
<view class='box' catchtouchmove='true'>
<view class='pop'>
<view class='top'>
<view class='txt'></view>
<view class='title'>微信授權(quán)</view>
<view class='txt'>關(guān)閉</view>
</view>
<view class='center'>
<view class='explain'><text>土家肸哥申請獲得以下權(quán)限：</text></view>
<view class='tip'>
<view class='dian'></view>
<text>同意此應用訪問你的相機功能</text>
</view>
</view>
<button class='bottom' open-type="openSetting">允許</button>
</view>
</view>
上面的代碼有一個地方要注意就是允許這個按鈕，由于微信小程序后來接口調(diào)整必須要使用按鈕才能打開設置界面授權(quán)狸捅，而且小程序的授權(quán)api只在用戶第一次授權(quán)時才會彈窗詢問衷蜓，如果一旦拒絕授權(quán)，那么后來就不能再調(diào)起授權(quán)彈窗界面了尘喝，所以頭疼的問題就在這里磁浇，明明官方有一個好的彈窗可以用，就是不給用朽褪，非要自己去寫一個置吓。沒辦法要用人家的東西，必須得遵守人家的規(guī)則缔赠，所以只能自己寫了衍锚。
組件的樣式
.box{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
font-family: 'PingFang SC';
background-color: rgba(0, 0, 0, .4);
}
.box .pop{
width: 621rpx;
height: 522rpx;
border-radius: 10rpx;
background-color: rgb(248,247,249);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box .pop .top{
width: 100%;
height: 94rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid rgb(233,237,245);
}
.box .pop .top .txt{
font-size: 28rpx;
color: rgb(136,136,136);
width: 128rpx;
height: 93rpx;
line-height: 93rpx;
text-align: center;
}
.box .pop .top .title{
font-size: 36rpx;
font-weight: bold;
}
.box .pop .center{
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box .pop .center .duoduo{
width: 71rpx;
height: 71rpx;
border-radius: 50%;
margin-bottom: 32rpx;
}
.box .pop .center .duoduo image{
width: 100%;
height: 100%;
border-radius: 50%;
}
.box .pop .center .explain{
font-size: 32rpx;
width: 520rpx;
text-align: center;
border-bottom: 1rpx solid rgb(233,237,245);
padding-bottom: 32rpx;
}
.box .pop .center .tip{
width: 520rpx;
font-size: 28rpx;
color: rgb(136,136,136);
display: flex;
align-items: center;
margin-top: 32rpx;
}
.box .pop .center .tip .dian{
width: 9rpx;
height: 9rpx;
background-color: rgb(136,136,136);
border-radius: 50%;
margin-left: 10rpx;
margin-right: 22rpx;
}
.box .pop .bottom {
width: 100%;
height: 89rpx;
line-height: 89rpx;
text-align: center;
border-top: 1rpx solid rgb(233,237,245);
font-size: 32rpx;
color: rgb(66,169,31);
}
有了樣式就可以看到長什么樣了，效果如下：
彈窗是寫好了嗤堰，我們的邏輯怎么寫呢戴质，根據(jù)上面提到的規(guī)則首先需要使用微信小程序自帶的授權(quán)api來讓用戶選擇，如果用戶拒絕才用自己寫的彈窗來提示用戶授權(quán)踢匣，其實這里會有一個問題就是當用戶點擊拒絕后有彈窗提示用戶授權(quán)告匠，這就是微信為什么這樣改的原因，老是給用戶彈窗离唬，所以建議大家在做小程序的時候設計一個游客狀態(tài)時微信最為提倡的后专。
組件邏輯
首先的用微信小程序自己的api來獲取用戶是否已經(jīng)授權(quán)了，代碼如下：
/**
* 檢測用戶是否已經(jīng)授權(quán)過某個權(quán)限输莺，如果沒有授權(quán)就調(diào)用小程序的授權(quán)戚哎，如果授權(quán)了就返回相應的狀態(tài)給回調(diào)函數(shù)
* scope為具體的某個權(quán)限
* cb為回調(diào)
*/
isAuthorize(scope, cb) {
let self = this;
wx.getSetting({
success(res) {
if (!res.authSetting['scope.' + scope]) {
wx.authorize({
scope: 'scope.' + scope,
success() {
return typeof cb == "function" && cb();
},
fail() {
self.setAuthTxt(scope);
self.callBack = cb;
self.setData({
popShow: true
})
}
})
} else {
return typeof cb == "function" && cb();
}
}
})
}
在組件的methods中添加上面的方法，這里主要是用的回調(diào)函數(shù)來處理授權(quán)成功多需要執(zhí)行的邏輯模闲。上面的代碼大家也可以看到如果授權(quán)失敗則會調(diào)用setAuthTxt這個函數(shù)建瘫，這里主要功能就是設置彈窗的一些提示信息，設置好后將回調(diào)保存尸折，最后顯示彈窗授啰脚。設置頁面提示信息很簡單就是設置data的值，如下：
setAuthTxt(authType) {
var authTxt = '';
switch (authType) {
case 'userInfo':
authTxt = '用戶信息';
break;
case 'userLocation':
authTxt = '地理位置';
break;
case 'record':
authTxt = '錄音功能';
break;
case 'writePhotosAlbum':
authTxt = '保存到相冊';
break;
case 'camera':
authTxt = '攝像頭';
break;
}
this.setData({
authType: authType,
authTxt: authTxt
})
}
如果上面的內(nèi)容沒有你需要請求的權(quán)限的對應，請自行按照格式添加即可橄浓。
這里需要對頁面的結(jié)構(gòu)修改一下粒梦，主要添加一些事件來處理授權(quán)操作，如下：
+ <view class='box' catchtouchmove='true' wx:if='{{popShow}}'>
<view class='pop'>
<view class='top'>
<view class='txt'></view>
<view class='title'>微信授權(quán)</view>
+ <view class='txt' bindtap='popClose'>關(guān)閉</view>
</view>
<view class='center'>
<view class='explain'><text>土家肸哥申請獲得以下權(quán)限：</text></view>
<view class='tip'>
<view class='dian'></view>
+ <text>同意此應用訪問你的{{authTxt}}功能</text>
</view>
</view>
+ <button class='bottom' open-type="openSetting" bindopensetting="getAuthorizeTool">允許</button>
</view>
</view>
然后就是用戶點擊允許的邏輯了荸实，如下：
getAuthorizeTool: function(res) {
var scope = 'scope.' + this.data.authType;
if (res.detail.authSetting[scope]) {
this.setData({
popShow: false
})
return typeof this.callBack == "function" && this.callBack();
}
}
這里記得最后成功返回保存的回調(diào)告訴調(diào)用者授權(quán)成功了匀们，最后記得添加上關(guān)閉彈窗的事件處理函數(shù)，如下：
popClose() {
this.setData({
popShow: false
})
}
到這里這個組件算是封裝好了准给，下面就看看如何使用這個封裝好的組件了泄朴。
授權(quán)組件的使用
組件的使用這里就不做過多介紹，大家可以看看官方文檔露氮，主要介紹封裝的組件的幾種情況祖灰。首先需要在json文件中引入組件，然后在wxml中添加組件標簽畔规，這里需要注意給標簽添加一個id方便后面調(diào)用事件局扶，如下：
<!--pages/auth/auth.wxml-->
<text>pages/auth/auth.wxml</text>
<auth id='authorization'></auth>
在調(diào)用的要么ready生命周期中獲取組件實例，如下：
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
this.authorize = this.selectComponent("#authorization");
},
最后就是調(diào)用了叁扫，這里分幾種情況調(diào)用三妈。
頁面級調(diào)用
這個其實就是如果某個頁面需要某些權(quán)限的，當然啦莫绣，這個組件目前只是簡單的功能所以這種情況即使用戶不授權(quán)頁面也已經(jīng)加載了畴蒲，所以適合有游客狀態(tài)的使用，如果沒有游客狀態(tài)的要么添加一個頁面要么自己加以改進兔综。調(diào)用方法如下：
onReady: function () {
this.authorize = this.selectComponent("#authorization");
this.authorize.isAuthorize('record', () => {
console.log('fffffffff')
})
},
其實就是在獲取到組件實例后調(diào)用即可
按鈕級調(diào)用
這種主要針對點擊某個按鈕的操作需要獲取某個權(quán)限才能進行的饿凛，如點擊按鈕錄制語音的狞玛，方法和上面的一樣软驰，只是具體調(diào)用的函數(shù)在不同地方而已，如下：
onReady: function () {
this.authorize = this.selectComponent("#authorization");
},
/**
* 處理錄制按鈕的點擊事件
*/
handleRecordButton(){
this.authorize.isAuthorize('record', () => {
console.log('fffffffff')
})
},
主要的調(diào)用就這兩種心肪。
調(diào)用效果
調(diào)用組件后的效果風三種情況锭亏。
只觸發(fā)小程序自帶授權(quán)
這種情況就是用戶在初次使用時調(diào)用的是微信小程序自帶的授權(quán)彈窗，而且用戶馬上就是授權(quán)了硬鞍，這種情況的效果如下：
上面的動圖中大家可以看到授權(quán)之后調(diào)試器就會打印出來了慧瘤，說明授權(quán)成功了。
拒絕授權(quán)觸發(fā)自定義彈窗
當用戶拒絕授權(quán)后就可以彈窗我們自定義的彈窗了固该，在自定義彈窗中可以選擇允許或者不處理锅减。這里主要是自定義彈窗后允許的情況。效果如下：
用戶拒絕自定義授權(quán)
如果上面異步用戶選擇了關(guān)閉伐坏，那么回調(diào)就不會執(zhí)行了怔匣，和上面提到的頁面級一樣了，效果如下：
到此這個授權(quán)組件就已經(jīng)封裝查不到了桦沉，如果有什么錯誤或者不足希望大家提出每瞒，共同學習金闽，交流！
也可以加我的vx:w_loading
謝謝大家剿骨！
