头像昵称弹窗弹出条件:button授权按钮 + uni.getUserProfile API请求
简单唤醒示范案例:
1.H5部分
<text class="loginsubmitbox-text" v-on:tap="wechatLogin">微信一键登录</text>
2.JS部分
wechatLogin(){
// 获取用户信息
uni.getUserProfile({
desc: '获取你的昵称、头像、地区及性别',
success: res => {
console.log(res);
console.log(1);
},
fail: res => {
console.log(2);
console.log(res)
//拒绝授权
uni.showToast({
title: '您拒绝了请求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
return;
}
});
}
注意事项:
不能嵌入其他API内调用,一定要在调用的方法中第一层执行(优先执行
uni.getUserProfile
)
正确做法:必须第一步用户点击按钮,第二步调取
uni.getUserProfile
API(调取uni.getUserProfile
操作与用户操作紧密联系)
错误做法:第一步用户点击按钮,第二步调
uni.checkSession
,第三步才调取uni.getUserProfile
API(中间隔着其他操作会导致调取uni.getUserProfile
API授权弹窗失败)
实战应用中的授权登录示范案例:
1.错误写法:(两点错误:1.uni.checkSession
中嵌入uni.getUserProfile
会导致头像授权弹窗拉不起来;2.uni.login
应该在uni.getUserProfile
之前执行,否则会导致秘钥和密文不匹配从而解密失败)
wechatLogin() {
//检查登录态是否过期
uni.checkSession({
provider: 'weixin',
success: function(loginRes) {
console.log('checkSession成功', loginRes);
},
fail: function(loginRes) {
console.log('checkSession失败', loginRes);
// 获取用户信息
uni.getUserProfile({
desc: '获取你的昵称、头像、地区及性别',
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)
//拒绝授权
uni.showToast({
title: '您拒绝了请求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
return;
}
});
},
});
}
2.正确写法:(uni.getUserProfile
在最外层直接调用,这样就成功唤醒授权弹窗;且uni.login
要比uni.getUserProfile
先执行)
wechatLogin() {
//检查登录态是否过期
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: '获取你的昵称、头像、地区及性别',
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)
//拒绝授权
uni.showToast({
title: '您拒绝了请求,不能正常使用小程序',
icon: 'error',
duration: 2000
});
return;
}
});
}
注意事项:
服务端用户信息解密失败原因:小程序客户端调用微信服务器的接口顺序反了。文章来源:https://www.toymoban.com/news/detail-509965.html
顺序应该是 1、wx.login 2、wx.getUserInfo 。
如果顺序反过来 ,会出现校验解密失败的问题,比较坑的是 不是每次都出错。
小程序客户端需要调用微信服务器的wx.login接口来获取code,然后调用wx.getUserInfo来获取加密数据和偏移向量iv。正确的顺序应该是先调用login,然后再调用getUserInfo。文章来源地址https://www.toymoban.com/news/detail-509965.html
到了这里,关于uniApp微信小程序唤出授权头像昵称(微信授权登录)弹窗,及服务端用户信息解密注意事项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!