解决uniapp设置自动登录跳转首页时加载登录页问题

本文介绍在uniapp开发中如何优化自动登录流程,避免登录页或首页一闪而过的用户体验问题。通过修改manifest.json配置关闭默认启动界面,并在App生命周期中手动控制启动界面的关闭时机。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用uniapp开发APP的时候,很多时候需要用到自动登录功能,由于uniapp默认显示的第一页是在pages.json中设置的第一项,如果我们将登录页设置为pages.json中第一项的话,在自动登录首页的时候会从登录页一闪而过;如果设置首页为pages.json中第一项的话第一次登录App则会从首页一闪而过,如果是多身份登录的App则设置哪一个身份的首页当做第一显示页面也都不合适。

解决方法:

  1. 修改默认的启动界面参数,当页面加载完毕再手动关闭启动页面;
  2. 设置空白页作为第一启动页

第二种方法就不多做介绍,接下来介绍一下第一种方法的实现过程:

  • 首先修改manifest.json配置文件关闭默认启动界面
"app-plus" : {
        "usingComponents" : true,
        "nvueCompiler" : "uni-app",
        "compilerVersion" : 3,
        "splashscreen" : { // 主要是修改该对象下的参数
            "alwaysShowBeforeRender" : false,
            "waiting" : false,
            "autoclose" : false,
            "delay" : 0
        },
        ...
}

uni-app 启动界面(splash)参数配置说明 | 启动慢的原因

  • 然后在App生命周期onShow或者在你需要的地方手动关闭启动界面,设置的延迟时间不宜过长,不建议超过6s
setTimeout(()=>{
	// #ifdef APP-PLUS 
	plus.navigator.closeSplashscreen()
	// #endif
}, 2000)

之前在使用android离线打包的时候一直停留在启动界面无法正常进入首页,在线打包则正常。

### UniApp 应用首次启动不跳转登录页解决方案 对于 UniApp 应用,在首次启动不希望自动跳转登录页面的情况,可以采取以下措施来实现这一目标。 #### 1. 判断应用是否为首次启动 可以通过本地存储(如 `uni.setStorageSync` 和 `uni.getStorageSync` 方法)设置一个标志位来判断应用程序是否是第一次运行。如果该标志不存在,则认为这是初次启动;反之则不是[^1]。 ```javascript // 在 App.vue 的 onLaunch 生命周期钩子内执行如下逻辑 onLaunch() { const isFirstStart = !uni.getStorageSync('hasLaunched'); if (isFirstStart) { // 设置已启动过标记 uni.setStorageSync('hasLaunched', true); // 进入引导页或其他非登录界面 uni.reLaunch({ url: '/pages/guide/index' }); } else { // 正常进入首页或根据业务需求处理 checkLoginStatus(); } } ``` #### 2. 处理缓存问题引起的异常情况 当遇到由于缓存原因造成的问题,可采用强制更新文件名的方式防止旧版本资源被加载,从而避免因缓存而导致的行为偏差[^2]。这一步骤虽然主要针对的是静态资源的管理,但对于确保整个项目的稳定性和一致性同样重要。 #### 3. 用户状态持久化保存与验证 为了使用户能够在关闭并重新打开应用后保持登录状态,应该考虑使用安全可靠的机制来进行会话管理和身份认证信息的安全储存。通常情况下,可以在成功登录之后将必要的 token 或者其他形式的身份凭证保存到本地,并在每次启动读取这些数据以决定是否需要再次显示登录界面。 ```javascript function checkLoginStatus(){ let accessToken = uni.getStorageSync('accessToken'); if(accessToken){ // 已经有有效的 access_token, 可能已经登录过了 verifyTokenValid().then(isValid => { isValid ? navigateHome() : redirectToLoginPage(); }).catch(err=>{ console.error("验证token失败", err); redirectToLoginPage(); }) }else{ // 没有任何 token 存储记录,默认去往登录页 redirectToLoginPage(); } } async function verifyTokenValid(/* 参数 */){ /* 实现 */ } function navigateHome(){ /* 导航到主页函数 */ } function redirectToLoginPage(){ /* 跳转登录页函数 */} ``` 通过上述方法组合运用,能够有效控制 UniApp 应用程序在不同场景下的行为模式,特别是满足特定条件下阻止默认跳转的需求。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值