uniapp启动图和引导页的处理逻辑

uniapp启动图和引导页的处理逻辑_第1张图片

pages.js
pages节点的第一项为应用入口页(即首页,这里作为启动页来使用)

如图所示,添加两个vue页面作为启动页,和引导页

home页面(启动页),这里只记录页面逻辑,样式代码请自行设置

onLoad() {
	//APP端
	//#ifdef APP-PLUS
	if (uni.getStorageSync('first_falg')) { // first_falg用来判断是否是第一次启动APP。
		
		if (uni.getStorageSync('token')){ // 有token直接进入首页
			setTimeout(function() {
				uni.switchTab({
					url: '/pages/index/index',
					animationType: 'pop-in',
					animationDuration: 300
				});
			}, 3000)
		}else{
			// 没有token进入登录页,
			// uni.reLaunch:关闭所有页面,打开到应用内的某个页面。
			// 在APP端,如果不使用这个API跳转,安卓点击物理返回时会回到启动页,影响用户使用。
			// 当有退出登录按钮时,也应该使用uni.reLaunch去跳转,这样安卓物理按键返回时就会正常提示再按一次退出登录。
			setTimeout(function() { 
				uni.reLaunch({
					url: '/pages/login/login',
					animationType: 'pop-in',
					animationDuration: 300
				});
			}, 3000)
		}
	} else { // 是第一次进入APP,跳转到引导页
		setTimeout(function() {
			uni.navigateTo({
				url: '/pages/home/home2',
				animationType: 'pop-in',
				animationDuration: 300
			});
		}, 3000)
	}
	//#endif
	
	// H5端
	//#ifdef H5
	if (uni.getStorageSync('token')) { // 有token,直接进入首页
		uni.switchTab({
			url: '/pages/index/index',
			animationType: 'pop-in',
			animationDuration: 300
		});
	} else {
		uni.navigateTo({ // 没有token去登录
			url: '/pages/login/login',
			animationType: 'pop-in',
			animationDuration: 300
		});
	}
	//#endif
},

home2引导页,只记录页面逻辑部分

//轮播图滑动到最后一张,当点击开始使用
goBack(name) {
	if (uni.getStorageSync('token')) { // 有token进首页
		uni.switchTab({
		url: '/pages/index/index',
			animationType: 'pop-in',
			animationDuration: 300
		});
	} else {
		uni.reLaunch({ // 没有token进登录,这里页需要uni.reLaunch跳转,防止安卓物理返回时重新进入到引导页
		url: '/pages/login/login',
			animationType: 'pop-in',
			animationDuration: 300
		});
	}
},

登录页面和首页,需要把first_falg存起来,下次不用再进入引导页

uni.setStorageSync('first_falg', true);//是否第一次进入APP,true不是,跳过引导页

你可能感兴趣的:(uniapp,uniapp)