uniapp开发小程序,点击右上角<重新进入小程序>进行刷新时,设置开屏加载页面

一、需求及问题

问题:使用uniapp开发小程序时,有【学生端】和【企业端】两个入口,一进入小程序默认进入【学生端首页】,但是当前处于【企业端】时,点击右上角<重新进入小程序>进行刷新时,页面默认进入【学生端首页】了。

二、解决方式

如何解决?

在默认的【学生端首页】的onLoad中加一个判断:

javascript 复制代码
		onLoad() {
			if (uni.getStorageSync('loginType') == 2) { //企业时,跳转企业端首页
				uni.navigateTo({
					url: '/pages/company/uni_companyHome'
				})
			}
		},

但是现在这个情况会出现闪屏的效果,就是会先去【学生端首页】然后闪一下跳转到【企业端首页】,以下是处理闪屏的方式,加一个开屏加载页面。(但是需要制作开屏加载页面的设计稿)

在uniapp中新建一个页面,用于承载开屏加载内容。

使用uniapp的生命周期函数,控制开屏页面的显示与隐藏。

步骤:

1.在pages目录下新建一个开屏页面,例如pages/splash/splash.vue:

html 复制代码
<template>
  <view class="splash-container">
    <!-- 开屏加载页面的内容,如Logo、标题等 -->
  </view>
</template>
 
<script>
export default {
  // 这里可以添加一些逻辑处理,但基本不需要复杂的逻辑,因为只是简单的加载页。
}
</script>
 
<style>
.splash-container {
  /* 样式设计,根据实际需求来 */
}
</style>

2.在App.vue或对应的页面中控制开屏页面的显示与隐藏。例如,在App.vue的onLaunch或onShow生命周期函数中控制跳转:

javascript 复制代码
// App.vue
export default {
  onLaunch: function() {
   	 // 延迟显示开屏页面,例如延迟2秒后跳转至首页或其他页面。这里可以根据实际需求调整延迟时间。
	if(uni.getStorageSync('loginType') == 2){  //【企业端首页】
		setTimeout(() => {
			// 使用uni.redirectTo或uni.navigateTo跳转至首页或其他页面。
			uni.redirectTo({
				url: '/pages/company/uni_companyHome'
			}); 
		}, 1000); 
	}else{ //【学生端首页】
		setTimeout(() => {
			uni.redirectTo({
				url: '/pages/Tabblock/uni_studentHome'
			}); 
		}, 1000); 
	}
  }
}

完成~

相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode