uniapp开发App引导页

本文介绍了如何在App中实现引导页,通过设置本地标志控制只显示一次,并讨论了uniapp开发中避免闪屏现象的方法,包括在onLaunch中检测flag、使用延迟关闭启动图等。同时提出了一种处理手机卡顿时引导页可能提前显示的问题,即默认将引导页设为主页。此外,还提及了其他实现引导页的策略,如后端控制和动态变化。
摘要由CSDN通过智能技术生成

App的引导页是当用户第一次打开一款App时所展示的3-5精美的图片,用于告知用户产品的功能及特点。好的引导页会促使用户对产品增加更多的兴趣,当然这是UI设计的能力体现了,尽管很多人都会快速的滑过。对于开发人员怎么去添加这几张图片只有在用户第一次打开app时展示呢。

其实原理很简单,在本地设置标识flag,默认为false,从而进入引导页,进入之后,flag设置为true,下次进入自然不会展示的;当然这个引导页可以设置为一个页面,用轮播图放置几张引导页;只要不清除本地的flag缓存,则引导页只会出现一次;

以uniapp开发的项目为例:在onLaunch函数中,检查flag是否为false,如果为false,则跳转到引导页面,在引导页中可设置跳转到首页。注意,最好用reLaunch,避免,用户物理按键返回;为true,则存储flag到本地。原理既是如此;但是实际开发时,会发现,存在闪屏现象,这样用户的体验就不太好,所以比较关键的地方就在于这块,还是以uniapp为例,需要在uniapp的源码视图下将splashscreen的设置进行修改,将autoclose改为false,在onLaunch中通过设置延迟时间调用plus.navigator.closeSplashscreen方法来关闭启动图。delay设置为0。这样启动图的设置就ok了。
以下封装了检查是否进入引导页的方法,仅供参考下:

guidePage(){
	try {
		 // 获取本地存储中launchFlag标识
		 console.log(uni.getStorageSync('first_flag'))
		 if(!uni.getStorageSync('first_flag')){//第一次进入app,为false
			// 进入引导页
			uni.reLaunch({
				url:'/pages/GuidePage/GuidePage',
			})
		}
	} catch(e) { //error
		// 设置为true
		uni.setStorageSync('first_flag', true);
	}
}

Tip:在多次的应用中发现,如果在手机本身比较卡的情况下,用户在第一次开启app时,还是会存在首页在引导页之前出现,这种情况的处理方式是将引导页默认设置为主页,即在路由管理中,将引导页写在第一个,然后通过flag去判断是否跳转到首页;
以上的引导页开发只是提供一种思路,还有很多其他的方式,比如后端去控制是否展示引导页,引导页的动态变化。当然问题本身不难实现,关键在于实际应用时所存在的问题。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值