uniapp Android平台启动页可以用视频 uniapp设置启动页

启动页与引导页

uniapp中是有启动界面配置一项内容的。

如果想要使用Uniapp中自带的启动界面，则需要注意几点内容：

1. 去掉勾选 “启动界面显示等待雪花”
2. 选择自定义启动图一项，然后上传三种特定尺寸的启动图
3. ios的如果使用自定义启动图，无法通过appstore审核

但是如果UI给的启动图是这样的：

则在真机运行时，启动图出现变形的情况。

针对这种情况，uniapp官方给出了解决办法就是：上传.9.png格式的启动图。

关于.9.png图片的介绍：

https://ask.dcloud.net.cn/article/35527

制作.9.png的三种方式

1. 通过java编程软件制作
2. 通过PS制作
3. 使用.9.png制作工具

下载介绍一下第三种方式

.9.png制作工具 https://www.25xt.com/allcode/6976.html

.9.png制作工具的使用方法

在上面的网址中上传图片后，会出现上图这样的情况，会有4条线出现，这4条线的意义在于，需要把可以拉伸的区域表示出来。

针对很简单元素很少的启动图是可以实现的，但是针对上图所以的图片而言，有点麻烦，因为图片中间有内容，可以拉伸的区域只是四周。这样制作的后果就是，在某些宽屏的手机上（这里的宽屏是dpi的值大，而非物理意义上的屏宽）会显示成中间的内容会偏左或者偏右的情况。这样的情况是不允许的。

因此采用自定义启动图的办法。

启动图与引导页的区别

启动图是app启动的时候出现的，引导页是app刚开始安装的时候显示的，而且，app刚开始安装的时候，启动图就不要展示了，只有app安装完成后再次打开的时候才会展示。因此，有引导页就不会有启动图，有启动图就不会有引导页。
所以可以将启动图和引导页写在一个页面中。
启动图是写的一张图，引导页是借用的uniapp插件市场的插件codeElfGuide，此插件的原理是swiper组件的使用。
启动图展示的时间是1秒钟，1秒钟后自动进入首页。

import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue'
var timer = null;
export default {
	components:{
	   codeElfGuide
	},
	data() {
		return {
			showFlag:false
		}
	},
	onShow() {
		this.showFlag = uni.getStorageSync('launchFlag');
		if(this.showFlag){
			clearTimeout(timer);
			timer = setTimeout(res=>{
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},1000)
		}else{
			this.showFlag = false;
			uni.setStorage({
				key: 'launchFlag', 
				data: true, 
				success: function () {
				} 
			}); 
		}
	}
}