manifest-splashscreen.md 6.5 KB
Newer Older
W
x  
wanganxp 已提交
1
## splash启动封面图
W
wanganxp 已提交
2 3 4

> HBuilderX 3.99+

D
DCloud_LXH 已提交
5 6 7 8
App启动时,系统加载应用渲染首页需要一定的时间,为了避免用户等待,手机操作系统提供了特殊的启动界面设计,让用户先看到一个简单的界面,等应用加载完成后正式进入应用首页。

这个界面,即被称为启动界面,也成称为 splash 或 lauch screen。

W
x  
wanganxp 已提交
9 10 11 12 13 14
当然并非所有App都需要splash,很多系统应用比如计算器、日历都没有splash。

uni-app x中,如不配置splash,则与计算器等应用一致,启动时有轻微闪白,但可以让用户更快的使用首页。

如需配置splash,注意避免splash图与首页风格差异太大。因为uni-app x启动速度非常快,splash只是一闪而过,如果颜色差异太大,会让用户视觉不舒服。

D
DCloud_LXH 已提交
15 16 17 18
### Android平台启动界面配置

打开项目的manifest.json文件,在“App启动界面配置”中的“Android启动界面设置”项下配置各设备分辨率启动图:

shutao-dc's avatar
shutao-dc 已提交
19 20 21 22
![](../static/splash_screen_android_1.png)

#### Android 12 应用启动界面适配

shutao-dc's avatar
shutao-dc 已提交
23
Android 12(API 31)开始强制开启 [SplashScreen](https://developer.android.google.cn/guide/topics/ui/splash-screen?hl=zh-cn) 启动界面,启动界面支持自定义,可自定义背景颜色、logo图标、品牌图标,不配置自定义启动界面,在Android 12及以上系统版本默认只会显示白色背景+应用图标,不会显示配置的splash启动图。
shutao-dc's avatar
shutao-dc 已提交
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

![](../static/splash_screen_android_example.png)

打开项目的manifest.json文件,在“App启动界面配置”中的“Android12启动界面设置”项下配置背景颜色及各设备分辨率的居中logo图标、底部品牌图标。

##### 配置启动界面背景颜色:

可选配置,默认白色

![](../static/splash_screen_android_2.png)

##### 配置启动界面中部logo图标:

可选配置,默认应用启动图标

![](../static/splash_screen_android_3.png)

##### 配置启动界面底部品牌图标:

可选配置,默认底部不显示品牌图标

![](../static/splash_screen_android_4.png)

**Tips**

+ Android启动图设置需提交云端打包后才能生效
+ 配置Android 12应用启动界面后仅影响Android 12及以上版本应用启动界面,Android 12以下版本依然使用启动图展示splash
+ Android 12启动界面中部logo图标在部分系统设备会被裁剪成圆形,部分设备不会裁剪,需要注意圆形logo适配
+ 部分国内 Android 12及以上版本设备不会强制开启 SplashScreen 启动界面,仅配置splash启动图也可展示,但考虑兼容性建议配置Android 12启动界面设置
D
DCloud_LXH 已提交
53 54 55 56 57 58 59 60 61 62 63 64

#### Android平台splash关闭时机

splash关闭时机可控制,打开项目的manifest.json文件,选择源码视图,在app->splashScreen节点下设置autoClose值域,控制splash关闭时机,默认onShow

**autoClose取值范围:**

|值域|说明|
|--|--|
|onShow|首页页面生命周期触发onShow时关闭splash|
|onReady|首页页面生命周期触发onReady时关闭splash|

W
x  
wanganxp 已提交
65 66
暂不支持其他方式关闭splash。

D
DCloud_LXH 已提交
67 68
配置示例:

W
wanganxp 已提交
69
```json
D
DCloud_LXH 已提交
70 71 72 73 74 75 76 77 78 79 80 81
"app" : {
    "splashScreen" : {
        "autoClose" : "onReady"
    }
}
```

#### Android平台splash注意事项

1. splash关闭时机中描述的`首页`,指的是第一个真正显示的页面,如项目中pages.json第一个页面A在onLoad生命周期被关闭重新跳转了一个新页面B并显示,则B页面就是`首页`,原因是显示的是页面B,A页面并未显示,
如果是在页面A的onShow或更晚的生命周期关闭在跳转或直接跳转,则页面A是`首页`,因为页面A已经显示符合第一个真正显示的页面。

shutao-dc's avatar
shutao-dc 已提交
82
2. 应用冷启动与温启动的splash展示时间是有区别的。应用冷启动指首次启动或被kill掉进程后的启动,冷启动时初始化环境,数据加载等会占用一些启动时间,所以splash展示时间长一些。温启动指应用已启动后未kill进程再次的启动,由于不会再初始化环境,加载数据等操作,所以相对启动时间较少,splash展示时间也会缩短。如果希望避免出现温启动出现短暂展示splash的情况,可以将退出应用调整为将应用切换到后台,详情参考[切换应用到后台](../api/exit.md#back)
D
DCloud_LXH 已提交
83 84 85

#### Android平台使用.9.png启动图@9png  
目前HBuilderX中仅定义几种标准分辨率的启动图配置,而实际上存在很多不同分辨率的手机,导致启动图在一些不常见的设备会进行拉伸或压缩引起变形,Android平台为了解决此问题就出现了可以适配各种尺寸的一种图片格式“.9.png”。这是一种特殊的图片格式,它可以指定特定的区域进行拉伸而不失真。
W
wanganxp 已提交
86

D
DCloud_LXH 已提交
87 88 89 90 91 92 93 94 95
**使用.9.png的优点**  
1. 避免在非标准分辨率手机上缩放变形  
2. 可以只配置1张或多张图片适配更多分辨率,减少apk的体积(推荐至少配置1080P高分屏启动图片)  

**.9.png图片和普通png图片的差异**  
1. .9.png图片和一般图片的区别在于.9.png图片有四条黑边,而一般的图片没有,这四条黑边就是用来拉伸和指定显示位置的  
2. 使用.9.png图片后,整个图片应该是包裹着你想要显示的内容的,而没有使用的话整个图片将会被拉伸  

**制作.9.png图片**  
W
wanganxp 已提交
96
1. 在Android sdk目录下的tools目录下,有一个叫做draw9patch.bat的文件,双击打开就可以使用(最新android SDK该文件已经不存在,若电脑没有安装android studio,可下载附件工具编辑.9.png图片)  
D
DCloud_LXH 已提交
97 98 99 100 101 102 103 104 105 106
2. 使用android studio,因为android studio已经集成.9.png制作工具,只需选中需要生成的png文件,然后右键,点击create 9-patch file 选项  

详细制作步骤可参考链接:[Android中.9图片的含义及制作教程](https://www.jianshu.com/p/3fd048644e3f?tdsourcetag=s_pctim_aiomsg)  
可以使用在线.9.png生成工具:[http://inloop.github.io/shadow4android/](http://inloop.github.io/shadow4android/)  

**.9.png配置使用**  
打开项目的manifest.json文件,在“App启动界面配置”中的“Android启动界面设置”项下,在各分辨率启动图设置框选择需要使用的.9.png图片(图片尺寸请按照提示尺寸对应上传),保存后提交云端打包即可。
> 不同尺寸的启动图是为了适配不同分辨率的手机,所以提交打包时请务必上传不同尺寸的启动图,切忌上传多张同尺寸启动图  

可以参考开发者在[插件市场](https://ext.dcloud.net.cn/search?q=.9)做好的.9样例工程