uniapp 电商app从0到1实战（二）——自定义启动页与引导页

淡淡的烟草味﹌ 2021-07-25 21:49 1258阅读 0赞

# 启动页与引导页 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
uniapp中是有启动界面配置一项内容的。  
如果想要使用Uniapp中自带的启动界面，则需要注意几点内容：

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

但是如果UI给的启动图是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
则在真机运行时，启动图出现变形的情况。  
针对这种情况，uniapp官方给出了解决办法就是：上传.9.png格式的启动图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]  
关于.9.png图片的介绍：  
[https://ask.dcloud.net.cn/article/35527][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_ https_www.25xt.com_allcode_6976.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]  
在上面的网址中上传图片后，会出现上图这样的情况，会有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 () { 
    				} 
    			}); 
    		}
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/d025899755e8486fbe7deb35b8c254eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/3961cfce5bb641379aa437704c1b7d24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/586f0ce45ddb4cf7808058c6c23e91f7.png
[https_ask.dcloud.net.cn_article_35527]: https://ask.dcloud.net.cn/article/35527
[.9.png_ https_www.25xt.com_allcode_6976.html]: https://www.25xt.com/allcode/6976.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/3d817f5613fb4a6290bf9ba267b393e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/414a610fb0c747579f7d2db3a37d8b71.png