每日一嘮叨：
之前寫了公眾號(hào)H5的授權(quán)登錄功能洒沦，現(xiàn)在新加一個(gè)小程序的授權(quán)登錄衫哥，
然而闪萄，微信的授權(quán)登錄進(jìn)行了調(diào)整蚁袭，原本的getUserInfo()獲取不到信息了鱼响，
改為使用getUserProfile()竖瘾，下面來(lái)一個(gè)完成版小程序授權(quán)登錄功能沟突。
正文開(kāi)始??
需求：微信小程序授權(quán)登錄與退出。
HTML 代碼
效果圖與代碼（授權(quán)事件不是非要button才行捕传，image或div都是可以的）
image.png
image.png
image.png
image.png
image.png
image.png
<!-- #ifdef MP-WEIXIN -->
<image :src="weixiLogin" @tap="getMPLoging()"></image>
<!-- #endif -->
Css就不提供了 很簡(jiǎn)單 自行定義
JS代碼
創(chuàng)建字段
image.png
/*
*小程序授權(quán)登錄
**/
//#ifdef MP-WEIXIN
getMPLoging(){
let me=this
// 彈出授權(quán)框（每次執(zhí)行都會(huì)彈出）
uni.getUserProfile({
desc: '用于完善會(huì)員資料', // 聲明獲取用戶個(gè)人信息后的用途惠拭，后續(xù)會(huì)展示在彈窗中，請(qǐng)謹(jǐn)慎填寫
success: (res) => {
console.log("獲取用戶授權(quán)信息：",res)
me.userInfo=res.userInfo;
uni.setStorageSync('userInfo', res.userInfo);
if(me.userInfo){
// 獲取code
uni.login({
success: (res) => {
console.log("打印授權(quán)成功獲取的code：",res)
if(res.errMsg == "login:ok"){
me.userCode=res.code;
// 調(diào)用登錄方法
me.updateUserInfo();
}else{
uni.showToast({title: '登錄失敗职辅！',duration: 2000});
console.log('登錄失敯羟骸！' + res.errMsg)
}
}
})
}
},
fail(res){
uni.showToast({
title:"拒絕授權(quán)域携，將無(wú)法進(jìn)入小程序",
duration: 1000,
icon: 'none'
})
console.log("您點(diǎn)擊了拒絕授權(quán)簇秒，將無(wú)法進(jìn)入小程序，請(qǐng)授權(quán)之后再進(jìn)入!!")
}
})
},
/*
*小程序授權(quán)登錄（更新登錄數(shù)據(jù)）
*/
updateUserInfo() {
let me=this;
me.access_id = uni.getStorageSync("access_id")?uni.getStorageSync("access_id"):me.$store.state.access_id;
uni.showLoading({
title: '登錄中...'
});
//接口字段根據(jù)自己的來(lái)
let data = {
module: "app",
app: 'user',
action: "login",
code:me.userCode,
nickName:me.userInfo.nickName,
headimgurl:me.userInfo.avatarUrl,
sex:me.userInfo.gender, //新本授權(quán)獲取不到性別秀鞭，傳了0給后臺(tái)
access_id:me.access_id, //用戶的access_id趋观，如果有則是綁定，沒(méi)有就新創(chuàng)
pid:'', //上級(jí)PID
}
uni.request({
data,
url: uni.getStorageSync("url"), //后臺(tái)登錄接口URL
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success:(res)=> {
uni.hideLoading();
if(res.data.code==200){
uni.showToast({
title: res.message,
duration: 1000,
icon: 'none'
})
uni.setStorageSync('openid', res.data.openid);
uni.setStorageSync('session_key', res.data.session_key);
uni.switchTab({
url:'../tabBar/my'
})
}else{
uni.hideLoading();
uni.showToast({
title: res.message,
duration: 1000,
icon: 'none'
})
}
}
})
},
退出功能就更簡(jiǎn)單了锋边，清空緩存的數(shù)據(jù)
<!--v-if是我判斷是否授權(quán)的字段皱坛，用不上的可以不要-->
<!-- #ifdef MP-WEIXIN -->
<div class='button margin' v-if="lktauthflag" @tap="outLogin">退出登錄</div>
<!-- #endif -->
/*
* 小程序退出登錄
*/
outLogin(){
uni.getStorageSync("userInfo","")
uni.navigateTo({
url: '../../pages/login/login?toHome=true&quit=true&isauthorizedLogin=1'
})
},
