頭像昵稱彈窗彈出條件：button授權(quán)按鈕 + uni.getUserProfile API請求
簡單喚醒示范案例：
1.H5部分
<text class="loginsubmitbox-text" v-on:tap="wechatLogin">微信一鍵登錄</text>
2.JS部分
wechatLogin(){
// 獲取用戶信息
uni.getUserProfile({
desc: '獲取你的昵稱、頭像、地區(qū)及性別',
success: res => {
console.log(res);
console.log(1);
},
fail: res => {
console.log(2);
console.log(res)
//拒絕授權(quán)
uni.showToast({
title: '您拒絕了請求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
return;
}
});
}
注意事項(xiàng)：
不能嵌入其他API內(nèi)調(diào)用，一定要在調(diào)用的方法中第一層執(zhí)行（優(yōu)先執(zhí)行
uni.getUserProfile）
正確做法：必須第一步用戶點(diǎn)擊按鈕，第二步調(diào)取
uni.getUserProfileAPI（調(diào)取uni.getUserProfile操作與用戶操作緊密聯(lián)系）
錯誤做法：第一步用戶點(diǎn)擊按鈕，第二步調(diào)
uni.checkSession，第三步才調(diào)取uni.getUserProfileAPI（中間隔著其他操作會導(dǎo)致調(diào)取uni.getUserProfileAPI授權(quán)彈窗失?。?/p>
實(shí)戰(zhàn)應(yīng)用中的授權(quán)登錄示范案例：
1.錯誤寫法：（兩點(diǎn)錯誤：1.uni.checkSession中嵌入uni.getUserProfile會導(dǎo)致頭像授權(quán)彈窗拉不起來；2.uni.login應(yīng)該在uni.getUserProfile之前執(zhí)行，否則會導(dǎo)致秘鑰和密文不匹配從而解密失?。?/p>
wechatLogin() {
//檢查登錄態(tài)是否過期
uni.checkSession({
provider: 'weixin',
success: function(loginRes) {
console.log('checkSession成功', loginRes);
},
fail: function(loginRes) {
console.log('checkSession失敗', loginRes);
// 獲取用戶信息
uni.getUserProfile({
desc: '獲取你的昵稱、頭像、地區(qū)及性別',
success: res => {
console.log('獲取你的昵稱、頭像', res);
//重新登錄
uni.login({
provider: 'weixin',
success: function(loginRes) {
console.log('login重新登錄', loginRes);
// 登錄請求
// api.apiPost("/api/member/wechatappauth", {
// jscode: loginRes.code,
// }, (res) => {
// console.log(res)
// if (res.code == 0) {
// } else {
// uni.showModal({
// title: '提示',
// content: res.msg,
// });
// }
// })
},
fail: function(loginRes) {
console.log(loginRes)
}
});
},
fail: res => {
console.log(2);
console.log(res)
//拒絕授權(quán)
uni.showToast({
title: '您拒絕了請求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
return;
}
});
},
});
}
2.正確寫法：（uni.getUserProfile在最外層直接調(diào)用，這樣就成功喚醒授權(quán)彈窗；且uni.login要比uni.getUserProfile先執(zhí)行）
wechatLogin() {
//檢查登錄態(tài)是否過期
uni.checkSession({
provider: 'weixin',
success: function(loginRes) {
console.log('checkSession成功',loginRes);
},
fail: function(loginRes) {
console.log('checkSession失敗',loginRes);
},
});
//重新登錄
let jsCode = ''
uni.login({
provider: 'weixin',
success: function(loginRes) {
jsCode = loginRes.code;
console.log('login重新登錄',{
jscode: loginRes.code,
jscodeinfo:res
});
},
fail: function(loginRes) {
console.log(loginRes)
}
});
// 獲取用戶信息
uni.getUserProfile({
desc: '獲取你的昵稱、頭像、地區(qū)及性別',
success: res => {
console.log('獲取你的昵稱、頭像',res);
// 登錄請求
// api.apiPost("/api/member/wechatappauth", {
// jscode: jsCode,
// jscodeinfo:res
// }, (res1) => {
// console.log(res1)
// if (res1.code == 0) {
// } else {
// uni.showModal({
// title: '登錄失敗',
// content: '請刷新小程序后重新操作',
// });
// }
// })
},
fail: res => {
console.log(2);
console.log(res)
//拒絕授權(quán)
uni.showToast({
title: '您拒絕了請求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
return;
}
});
}
注意事項(xiàng)：
服務(wù)端用戶信息解密失敗原因：小程序客戶端調(diào)用微信服務(wù)器的接口順序反了。文章來源：http://www.zghlxwxcb.cn/news/detail-509965.html
順序應(yīng)該是 1、wx.login 2、wx.getUserInfo 。
如果順序反過來 ，會出現(xiàn)校驗(yàn)解密失敗的問題，比較坑的是 不是每次都出錯。
小程序客戶端需要調(diào)用微信服務(wù)器的wx.login接口來獲取code，然后調(diào)用wx.getUserInfo來獲取加密數(shù)據(jù)和偏移向量iv。正確的順序應(yīng)該是先調(diào)用login，然后再調(diào)用getUserInfo。文章來源地址http://www.zghlxwxcb.cn/news/detail-509965.html
到了這里，關(guān)于uniApp微信小程序喚出授權(quán)頭像昵稱(微信授權(quán)登錄)彈窗，及服務(wù)端用戶信息解密注意事項(xiàng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
