微信官方修改了授權(quán)接口：從2018年4月30日開(kāi)始，小程序體驗(yàn)版、開(kāi)發(fā)版調(diào)用
wx.getUserInfo接口，將無(wú)法彈出授權(quán)詢(xún)問(wèn)框，默認(rèn)調(diào)用失敗。我們只能通過(guò)button讓用戶(hù)主動(dòng)觸發(fā)授權(quán)。這樣做能提高用戶(hù)體驗(yàn)，對(duì)小程序來(lái)說(shuō)，當(dāng)用戶(hù)拒絕授權(quán)，也可以展示它的功能和特色；對(duì)用戶(hù)來(lái)說(shuō)，一開(kāi)始拒絕了授權(quán)也可以重新授權(quán)。
先說(shuō)明，登錄是登錄，授權(quán)是授權(quán)。
1、登錄：通過(guò)wx.login拿到code給后臺(tái)，接口返回token、openID等參數(shù)。有了這些參數(shù)我們就可以直接請(qǐng)求那些不需要用戶(hù)操作便可以讀取的接口（比如：新聞列表、新聞詳情、視頻播放等等）；
2、授權(quán)：當(dāng)小程序需要用戶(hù)操作（比如：關(guān)注、評(píng)論、下單購(gòu)買(mǎi)、地理位置、個(gè)人中心等等），就需要用戶(hù)先授權(quán)。
用戶(hù)點(diǎn)擊需要授權(quán)的操作時(shí)（如關(guān)注），會(huì)有以下幾種情況：
1、已授權(quán)的用戶(hù)可以直接操作；
2、未授權(quán)的用戶(hù)彈出授權(quán)框：
（1）拒絕授權(quán)：關(guān)閉授權(quán)框，用戶(hù)操作無(wú)效（如關(guān)注，無(wú)法觸發(fā)關(guān)注的http請(qǐng)求，保持原狀）；
（2）接收授權(quán)：將用戶(hù)信息通過(guò)token發(fā)送給后臺(tái)，并主動(dòng)請(qǐng)求用戶(hù)操作（如關(guān)注，接收授權(quán)后觸發(fā)關(guān)注的http請(qǐng)求，提示關(guān)注成功）。
代碼詳解
（注意！注意！下方高能！以下提到的NetWork.xxx是我這封裝的方法，如果沒(méi)有封裝可以直接使用wx.reques()方法，等同于wx.reques()成功返回的回調(diào)函數(shù)。）
1、首先需要定義一個(gè)全局變量判斷該用戶(hù)是否授權(quán)，授權(quán)的狀態(tài)需要后臺(tái)在請(qǐng)求登錄接口時(shí)返回給前臺(tái)，在app.js聲明：
getToken: function(){
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
console.log("code:", res.code);
this.globalData.loginCode = res.code
let params = {
code: res.code
}
NetWork.login(params, (res, err) => {
//授權(quán)狀態(tài)
this.globalData.is_auth = res.data.is_auth;
})
}
})
},
globalData: {
is_auth: 0 //登錄后返回的授權(quán)狀態(tài)：0未授權(quán)，1已授權(quán)
}
2、在界面上，若是未授權(quán)狀態(tài)，將使用open-type="getUserInfo"的button遮罩在頁(yè)面或相應(yīng)點(diǎn)擊事件的最上層，樣式是全透明；若是已授權(quán)，則不展示這個(gè)button（這里的is_auth首先要在該頁(yè)面的js中聲明是全局的那個(gè)is_auth哦）：
<!-- 未授權(quán) -->
<button
wx:if="{{is_auth == 0}}"
class='auth-btn'
open-type="getUserInfo"
lang="zh_CN"
bindgetuserinfo="onGotUserInfo"></button>
.auth-btn{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99;
background-color: rgba(255, 255, 255, 0)
}
3、當(dāng)用戶(hù)是未授權(quán)狀態(tài)時(shí)，才會(huì)點(diǎn)擊到上述的授權(quán)button，并觸發(fā)上述的onGotUserInfo事件。若用戶(hù)接受授權(quán)，該方法會(huì)將用戶(hù)信息放在e.detail.userInfo，然后將信息傳給后臺(tái)，同時(shí)改變當(dāng)前頁(yè)和全局的授權(quán)狀態(tài)。該事件方法在當(dāng)前界面的js中代碼如下：
//授權(quán)用戶(hù)信息
onGotUserInfo: function (e) {
console.log(e.detail.userInfo)
if (e.detail.userInfo !== undefined){
let info = e.detail.userInfo;
let paramsObj = {
nickname: info.nickName,
province: info.province,
city: info.city,
country: info.country,
headimgurl: info.avatarUrl,
sex: info.gender
}
NetWork.postUserInfo(paramsObj, (res, err) => {
wx.showLoading({
title: '加載中...',
})
//將全局的授權(quán)狀態(tài)改為：1已授權(quán)，其他頁(yè)面授權(quán)的按鈕也會(huì)通過(guò)該狀態(tài)看是否展示
App.globalData.is_auth = 1;
//當(dāng)前頁(yè)面授權(quán)狀態(tài)改為：1已授權(quán)
this.setData({
is_auth: 1,
});
})
}
},
4、最后存在一個(gè)問(wèn)題。類(lèi)似收藏、關(guān)注等功能，更合理的操作應(yīng)該是：在未授權(quán)狀態(tài)點(diǎn)擊收藏按鈕時(shí)，彈出授權(quán)框，用戶(hù)點(diǎn)擊 “允許” 授權(quán)之后，用戶(hù)不用再次點(diǎn)擊收藏，直接http請(qǐng)求收藏的接口，提示收藏成功or失敗。所以上一步的操作可以這么寫(xiě)：
//授權(quán)用戶(hù)信息
onGotUserInfo: function (e) {
console.log(e.detail.userInfo)
if (e.detail.userInfo !== undefined){
let info = e.detail.userInfo;
let paramsObj = {
nickname: info.nickName,
province: info.province,
city: info.city,
country: info.country,
headimgurl: info.avatarUrl,
sex: info.gender
}
NetWork.postUserInfo(paramsObj, (res, err) => {
wx.showLoading({
title: '加載中...',
})
//將全局的授權(quán)狀態(tài)改為：1已授權(quán)，其他頁(yè)面授權(quán)的按鈕也會(huì)通過(guò)該狀態(tài)看是否展示
App.globalData.is_auth = 1;
//當(dāng)前頁(yè)面授權(quán)狀態(tài)改為：1已授權(quán)
this.setData({
is_auth: 1,
});
//請(qǐng)求收藏
this.collectOrder();
})
}
},
//收藏
collectOrder: function () {
// type 狀態(tài)：0未收藏，1已收藏
let paramsObj = {
goods_id: this.data.goodsId,
type: 0
}
NetWork.getCollect(paramsObj, (res, err) => {
wx.showToast({
title: '收藏成功！',
icon: 'none',
duration: 1500
})
//collect狀態(tài)：0未收藏，1已收藏。頁(yè)面展示已收藏的樣式
this.setData({
collect: 1
})
})
},
以下是授權(quán)前后圖例：
