有的小伙伴在做微信小程序時(shí)突然發(fā)現(xiàn)網(wǎng)上的授權(quán)方法不太統(tǒng)一烫沙，翻看文檔發(fā)現(xiàn)，噢隙笆，原來是有改動(dòng)锌蓄！這個(gè)時(shí)候有的友友就很生氣，人家都寫完了怎么說改就改撑柔，還得重新去兼容瘸爽，沒辦法，人在屋檐下不得不低頭铅忿，這里我就把授權(quán)部分整理一下方便大家理解剪决！
一：小程序登錄、用戶信息相關(guān)接口
老規(guī)矩，我們先放個(gè)官方公告康康—>小程序登錄昼捍、用戶信息相關(guān)接口調(diào)整說明
反正就是由于一些不是我們能左右的原因识虚，調(diào)用wx.getUserInfo或<button open-type="getUserInfo"/>以后就不會(huì)再彈出授權(quán)彈窗啦，所以我們?cè)谧龅卿浭跈?quán)的時(shí)候需要進(jìn)行兼容或者直接使用文檔提供的wx.getUserProfile接口妒茬，我把官方提供的demo放在下面担锤，歡迎自取~
1.兼容寫法（文檔在此）：
wxml里：
<view class="userinfo">
<!-- 這里的hasUserInfo主要是為了判斷用戶是否已經(jīng)授權(quán)，如果沒有授權(quán)過就展示獲取頭像昵稱按鈕 -->
<block wx:if="{{!hasUserInfo}}">
<!--canIUseGetUserProfile判斷當(dāng)前版本是否支持wx.getUserProfile方法-->
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 獲取頭像昵稱 </button>
<button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
</block>
<!--用戶已經(jīng)授權(quán)過直接展示頭像和用戶名乍钻，大家實(shí)際開發(fā)中這里可以換成別的操作-->
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
js里：
Page({
data: {
userInfo: {},//默認(rèn)為空肛循，但是進(jìn)入頁面我們需要先請(qǐng)求后臺(tái)接口判斷用戶是否已經(jīng)授權(quán)過信息，沒有獲取到的情況下我們需要提醒新用戶授權(quán)
hasUserInfo: false,//判斷是否展示授權(quán)按鈕/授權(quán)彈窗或者跳到授權(quán)頁面
canIUseGetUserProfile: false,//是否支持wx.getUserProfile方法
},
onLoad() {
//進(jìn)入頁面判斷是否可以使用wx.getUserProfile
if (wx.canIUse('getUserProfile')) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推薦使用wx.getUserProfile獲取用戶信息银择，開發(fā)者每次通過該接口獲取用戶個(gè)人信息均需用戶確認(rèn)
// 開發(fā)者妥善保管用戶快速填寫的頭像昵稱多糠，避免重復(fù)彈窗
wx.getUserProfile({
desc: '用于完善會(huì)員資料', // 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會(huì)展示在彈窗中浩考，請(qǐng)謹(jǐn)慎填寫
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推薦使用getUserInfo獲取用戶信息夹孔，預(yù)計(jì)自2021年4月13日起，getUserInfo將不再彈出彈窗析孽，并直接返回匿名的用戶個(gè)人信息
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
})
2.有的友友說：“我就不想兼容怎么辦搭伤？”，那你就把上面那一堆判斷都給刪了袜瞬，直接
<button bindtap="getUserProfile"> 獲取頭像昵稱 </button>
getUserProfile(e) {
wx.getUserProfile({
desc: '用于完善會(huì)員資料',
success: (res) => {
this.setData({
userInfo: res.userInfo
})
}
})
},
獲取到的userInfo包含：
- nickName：用戶昵稱
- gender：性別怜俐，1-男 2-女 0-未知（以后不再返回用戶性別，只返回0）
- avatarUrl：用戶頭像
- country：國(guó)家
- province：省份
- city：城市
- language：顯示 country邓尤，province拍鲤，city 所用的語言， en-英文 zh_CN-簡(jiǎn)體中文 zh_TW-繁體中文
(注意：這里獲取到的國(guó)家省份城市不一定是用戶的真實(shí)地址汞扎，用戶的收貨地址需要用戶手動(dòng)填寫或者調(diào)用wx.chooseAddress季稳，獲取用戶當(dāng)前地理位置需要調(diào)用wx.getLocation)
二：獲取用戶手機(jī)號(hào)
獲取用戶手機(jī)號(hào)需要通過點(diǎn)擊button按鈕來觸發(fā)（文檔），因?yàn)槲覀儷@取到的是加密的信息澈魄，所以我們需要把參數(shù)傳給后臺(tái)進(jìn)行解密绞幌，然后就可以拿到手機(jī)號(hào)了！
wxml里：
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
js里：
Page({
getPhoneNumber (e) {
console.log(e.detail.errMsg)
console.log(e.detail.iv)//加密算法的初始向量
console.log(e.detail.encryptedData)//包括敏感數(shù)據(jù)在內(nèi)的完整用戶信息的加密數(shù)據(jù)
}
})
這是最基本的demo一忱，但是實(shí)際項(xiàng)目中比較繁瑣莲蜘，我直接放js代碼，大家根據(jù)自己的需求修改使用就好啦
getPhoneNumber: function (e) {
var that = this;
//檢查session-key是否過期
wx.checkSession({
success() {
wx.login({
success: res => {
wx.request({
url: '寫你自己的接口地址/' + res.code,
method: 'GET',
header: {
'content-type': 'application/xml'
},
success: function (res) {
if (res.data.code == 200) {
//是否允許獲取手機(jī)號(hào)
if (e.detail.errMsg == "getPhoneNumber:ok") {
//這里是因?yàn)楹笈_(tái)讓我把參數(shù)拼接在url上給他帘营，大家最好用data來傳票渠，別學(xué)我（氣哭）
wx.request({
url: '寫自己的接口地址?enData=' + e.detail.encryptedData + '&iv=' + e.detail.iv + '&sessionKey=' + res.data.data.session_key,
method: "POST",
success: function (res) {
if (res.data.code == 200) {
console.log(res.data.data.phone);
}
}
})
}
}
}
})
}
})
}
})
},
關(guān)于為啥我要套這么多層，細(xì)心的友友們?cè)谖臋n里會(huì)看到：
覺得有用記得給個(gè)贊芬迄，我寫的不對(duì)的地方請(qǐng)大佬指正问顷，我會(huì)改過來的，over，散會(huì)散會(huì)杜窄，撒花~
