启动页与引导页
uniapp中是有启动界面配置一项内容的。
如果想要使用Uniapp中自带的启动界面,则需要注意几点内容:
- 去掉勾选 “启动界面显示等待雪花”
- 选择自定义启动图一项,然后上传三种特定尺寸的启动图
- ios的如果使用自定义启动图,无法通过appstore审核
但是如果UI给的启动图是这样的:
则在真机运行时,启动图出现变形的情况。
针对这种情况,uniapp官方给出了解决办法就是:上传.9.png格式的启动图。
关于.9.png图片的介绍:
https://ask.dcloud.net.cn/article/35527
制作.9.png的三种方式
- 通过java编程软件制作
- 通过PS制作
- 使用.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 () {
}
});
}
}
}