uni-app一键登录点击其他登录方式也关闭了弹窗
uni-app一键登录点击其他登录方式也关闭了弹窗
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | w10 | HBuilderX |
产品分类:uniapp/App
PC开发环境操作系统:Windows
HBuilderX类型:正式
HBuilderX版本号:4.66
手机系统:Android
手机系统版本号:Android 15
手机厂商:华为
手机机型:华为mate40pro
页面类型:vue
vue版本:vue2
打包方式:云端
项目创建方式:HBuilderX
示例代码:
uni.preLogin({
provider: 'univerify',
success(e) { //预登录成功
console.log(e)
// 显示一键登录选项
uni.login({
provider: 'univerify',
univerifyStyle: {
"fullScreen": true, // 是否全屏显示,默认值: false
"icon": {
"path": "/static/logo.jpg", // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo
},
"authButton": {
"normalColor": "#4D4CA8", // 授权按钮正常状态背景颜色 默认值:#3479f5
},
"otherLoginButton": {
"visible": true, // 是否显示其他登录按钮,默认值:true
"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值:透明
"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值:透明
"textColor": "#656565", // 其他登录按钮文字颜色 默认值:#656565
"title": "其他登录方式", // 其他登录方式按钮文字 默认值:“其他登录方式”
"borderColor": "", //边框颜色 默认值:透明(仅iOS支持)
"borderRadius": "0px" // 其他登录按钮圆角 默认值:"24px" (按钮高度的一半)
},
"buttons": { // 自定义页面下方按钮仅全屏模式生效(3.1.14+ 版本支持)
"iconWidth": "45px", // 图标宽度(高度等比例缩放) 默认值:45px
"list": [{
"provider": "weixin",
"iconPath": "/static/wx.png" // 图标路径仅支持本地图片
},
{
"provider": "phone",
"iconPath": "/static/phone.png" // 图标路径仅支持本地图片
}
]
}
},
success(res) { // 登录成功
app.globalData.api.request('index/getUserPhone', {
access_token: res.authResult.access_token,
openid: res.authResult.openid
}, 'POST', 'form').then((sub) => {
if (sub.code == 0) {
uni.closeAuthView();
uni.setStorageSync('token', sub.data.token)
uni.setStorageSync('login', 0)
uni.switchTab({
url: '/pages/index/index'
})
app.globalData.show("登录成功!")
} else {
app.globalData.show(sub.msg)
}
});
uni.showLoading({
title: "加载中...",
mask: true
})
uni.showToast({
title: res.authResult,
icon: "none"
})
},
fail(res) {
console.log('自定义按钮被点击', res);
// 在这里处理按钮点击事件
switch (res.provider) {
case 'weixin':
this.loginWx()
break;
case 'phone':
uni.navigateTo({
url: '/pages/login/telLogin'
})
univerifyManager.close()
break;
}
}
})
},
fail(res) {
// 预登录失败
// 不显示一键登录选项(或置灰)
// 根据错误信息判断失败原因,如有需要可将错误提交给统计服务器
console.log(res.errCode)
console.log(res.errMsg)
}
})
操作步骤:
uni.preLogin({
provider: 'univerify',
success(e) { //预登录成功
console.log(e)
// 显示一键登录选项
uni.login({
provider: 'univerify',
univerifyStyle: {
"fullScreen": true, // 是否全屏显示,默认值: false
"icon": {
"path": "/static/logo.jpg", // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo
},
"authButton": {
"normalColor": "#4D4CA8", // 授权按钮正常状态背景颜色 默认值:#3479f5
},
"otherLoginButton": {
"visible": true, // 是否显示其他登录按钮,默认值:true
"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值:透明
"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值:透明
"textColor": "#656565", // 其他登录按钮文字颜色 默认值:#656565
"title": "其他登录方式", // 其他登录方式按钮文字 默认值:“其他登录方式”
"borderColor": "", //边框颜色 默认值:透明(仅iOS支持)
"borderRadius": "0px" // 其他登录按钮圆角 默认值:"24px" (按钮高度的一半)
},
"buttons": { // 自定义页面下方按钮仅全屏模式生效(3.1.14+ 版本支持)
"iconWidth": "45px", // 图标宽度(高度等比例缩放) 默认值:45px
"list": [{
"provider": "weixin",
"iconPath": "/static/wx.png" // 图标路径仅支持本地图片
},
{
"provider": "phone",
"iconPath": "/static/phone.png" // 图标路径仅支持本地图片
}
]
}
},
success(res) { // 登录成功
app.globalData.api.request('index/getUserPhone', {
access_token: res.authResult.access_token,
openid: res.authResult.openid
}, 'POST', 'form').then((sub) => {
if (sub.code == 0) {
uni.closeAuthView();
uni.setStorageSync('token', sub.data.token)
uni.setStorageSync('login', 0)
uni.switchTab({
url: '/pages/index/index'
})
app.globalData.show("登录成功!")
} else {
app.globalData.show(sub.msg)
}
});
uni.showLoading({
title: "加载中...",
mask: true
})
uni.showToast({
title: res.authResult,
icon: "none"
})
},
fail(res) {
console.log('自定义按钮被点击', res);
// 在这里处理按钮点击事件
switch (res.provider) {
case 'weixin':
this.loginWx()
break;
case 'phone':
uni.navigateTo({
url: '/pages/login/telLogin'
})
univerifyManager.close()
break;
}
}
})
},
fail(res) {
// 预登录失败
// 不显示一键登录选项(或置灰)
// 根据错误信息判断失败原因,如有需要可将错误提交给统计服务器
console.log(res.errCode)
console.log(res.errMsg)
}
})
预期结果:
用户点击了其他登录方式或者顶部的删除按钮我自己控制后续逻辑页面跳转和弹窗关闭
实际结果:
在没有调用uni.closeAuthView()情况下授权弹窗也关闭了,不受控制
更多关于uni-app一键登录点击其他登录方式也关闭了弹窗的实战教程也可以访问 https://www.itying.com/category-93-b0.html
没人吗?bug都没人来回复?
使用全局 univerifyManager不也一样的吗?univerifyManager.onButtonsClick(callback)方法也只提供了自定义的按钮事件,全屏顶部的删除按钮和其他登录方式一样获取不到事件?这哪里解决了问题
回复 大太阳嗷嗷: 抱歉,是我看错了,你期望的行为目前不支持,我们认为点击其他登录方式或者点击关闭按钮,登录页关闭是一个默认行为。
回复 DCloud_Android_YJC: 把这个事件放出来呗,让用户自行处理是关闭授权弹窗还是执行自己业务逻辑这样不是更适业务场景吗
回复 大太阳嗷嗷: 可以去需求墙投票,https://vote.dcloud.net.cn/#/?name=uni-app。我们会根据情况进行排期。
在 uni.login 的 fail 回调中,点击自定义按钮或其他登录方式时,授权弹窗会自动关闭。这是 uni-app 一键登录组件的默认行为。
问题在于:当用户点击“其他登录方式”或自定义按钮时,系统会触发 fail 回调并自动关闭授权界面。你需要在 fail 回调中自行处理页面跳转逻辑,无需手动调用 uni.closeAuthView()。
在你的代码中,case 'phone' 分支调用了 univerifyManager.close(),这会导致重复关闭。建议移除该行:
case 'phone':
uni.navigateTo({
url: '/pages/login/telLogin'
})
// 移除 univerifyManager.close()
break;

