uni-app 一键登录失败后按钮一直转圈不会停止
uni-app 一键登录失败后按钮一直转圈不会停止
示例代码：
univerifyManager.login({
univerifyStyle: {
"fullScreen": true,
"backgroundColor": "#ffffff",
"backgroundImage": "",
"icon": {
"path": "static/logo.png",
"width": "60px",
"height": "60px"
},
"phoneNum": {
"color": "#202020"
},
"slogan": {
"color": "#BBBBBB"
},
"authButton": {
"normalColor": "#3479f5",
"highlightColor": "#2861c5",
"disabledColor": "#73aaf5",
"textColor": "#ffffff",
"title": "本机号码一键登录",
"borderRadius": "24px"
},
"otherLoginButton": {
"visible": true,
"textColor": "#656565",
"title": "其他登录方式",
"borderRadius": "0px"
},
"privacyTerms": {
"defaultCheckBoxState": true,
"isCenterHint": false,
"textColor": "#BBBBBB",
"termsColor": "#5496E3",
"prefix": "我已阅读并同意",
"suffix": "并使用本机号码登录",
"privacyItems": [
{
"url": "https://",
"title": "用户服务协议"
}
]
},
"buttons": {
"iconWidth": "45px",
"list": [
{
"provider": "apple",
"iconPath": "/static/image/iosLogo.png"
},
{
"provider": "weixin",
"iconPath": "/static/image/wxLogo.png"
}
]
}
},
success(res) {
that.openid = res.authResult.openid;
that.access_token = res.authResult.access_token;
uniCloud.callFunction({
name: "getPhoneNumber",
data: {
openid: that.openid,
access_token: that.access_token
}
}).then(res1 => {
console.log("获取成功", res1);
that.phoneNumber = res1.result.res.phoneNumber;
uni.closeAuthView();
/**到这已经拿到手机号了，后续可以使用获取到的手机号调用后端同事给的手机号码登录接口*/
}).catch((err) => {
uni.showToast({
title: '登录失败，请重新一键登录',
icon: "none",
duration:1000
});
setTimeout(() => {
uni.closeAuthView();
}, 1000);
console.log('errs', err);
});
},
fail(err) {
uni.showToast({
title: res.errMsg || err.metadata?.resultDesc,
icon: "none"
});
setTimeout(() => {
uni.closeAuthView();
}, 500);
}
});
操作步骤：
- 调用一键登录弹框，如果云函数报错，或者
univerifyManager.login失败回调函数之后 一键登录 不可点击。
预期结果：
- 失败之后可以让一键登录继续点，而不是要关闭页面重新调用。
实际结果：
- 一键登录失败后不可以重新点击，必须关弹框再进。
bug描述：
- APP一键登录的时候如果没开网或者其他情况导致一键登录失败，一键登录按钮会一直在转圈圈，不可重新点击。
1 回复
在uni-app中遇到一键登录失败后按钮一直转圈不停止的问题，通常是由于状态管理不当或异步处理错误导致的。为了解决这个问题，我们可以通过以下步骤来确保按钮状态在登录操作完成后能够正确更新。
以下是一个简单的代码示例，展示了如何在一键登录功能中实现按钮状态的正确管理：
<template>
<view>
<button :loading="isLoading" @click="handleLogin">一键登录</button>
</view>
</template>
<script>
export default {
data() {
return {
isLoading: false, // 按钮加载状态
};
},
methods: {
async handleLogin() {
this.isLoading = true; // 开始加载，按钮转圈
try {
// 模拟异步的一键登录请求
const result = await this.performLogin();
if (result.success) {
// 登录成功处理
console.log('登录成功');
// 可以在这里进行页面跳转或显示登录成功提示
} else {
// 登录失败处理
console.error('登录失败', result.message);
}
} catch (error) {
// 捕获异步请求中的其他错误
console.error('请求失败', error);
} finally {
this.isLoading = false; // 结束加载，按钮停止转圈
}
},
performLogin() {
// 这里应该是一键登录的实际请求逻辑
// 为了演示，我们返回一个模拟的Promise
return new Promise((resolve, reject) => {
setTimeout(() => {
// 模拟登录失败
resolve({ success: false, message: '登录失败，请重试' });
// 如果要模拟登录成功，可以使用以下代码：
// resolve({ success: true });
}, 2000); // 模拟网络延迟2秒
});
},
},
};
</script>
<style scoped>
/* 可选的样式调整 */
button {
margin: 20px;
}
</style>
在这个示例中，我们使用了isLoading数据属性来控制按钮的加载状态。当点击按钮时，handleLogin方法会被调用，并将isLoading设置为true，使按钮进入加载状态（转圈）。然后，我们模拟了一个异步的一键登录请求，并在请求完成后（无论成功或失败），都在finally块中将isLoading设置为false，以确保按钮状态能够正确更新。
通过这种方式，即使一键登录失败，按钮也不会一直转圈，而是会在请求完成后恢复为正常状态。这种方法可以很好地解决按钮状态管理不当的问题。
