From 687212af8ae06085da6823cc6259b61caef70db5 Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Tue, 21 May 2024 11:08:11 +0800 Subject: [PATCH] chore: manifest-splashscreen.md --- docs/collocation/manifest-splashscreen.md | 81 ++++++++++++----------- 1 file changed, 41 insertions(+), 40 deletions(-) diff --git a/docs/collocation/manifest-splashscreen.md b/docs/collocation/manifest-splashscreen.md index 1154b45c..86656c90 100644 --- a/docs/collocation/manifest-splashscreen.md +++ b/docs/collocation/manifest-splashscreen.md @@ -11,7 +11,7 @@ uni-app x中，如不配置splash，则与计算器等应用一致，启动时 如需配置splash，注意避免splash图与首页风格差异太大。因为uni-app x启动速度非常快，splash只是一闪而过，如果颜色差异太大，会让用户视觉不舒服。 -## Android平台splash@android +## Android平台splash@android > HBuilderX 3.99+ 版本支持配置启动界面 @@ -25,35 +25,35 @@ uni-app x 的 app-android 平台，启动界面有以下策略： 项目的manifest.json文件中，在“App启动界面配置”中的“Android启动界面设置”项下配置各设备分辨率启动图： -![](../static/splash_screen_android_1.png) +![](../static/splash_screen_android_1.png)#{width="800px"} -推荐使用.9.png来适配不同分辨率。 +推荐使用`.9.png`来适配不同分辨率。 -#### .9.png图@9png +#### .9.png图@9png manifest虽然可以定义3种标准分辨率的启动图配置，而实际上存在很多不同分辨率的手机，导致启动图在一些不常见的设备会进行拉伸或压缩引起变形。 为了解决此问题，Google推出了可以适配各种尺寸的一种图片格式“.9.png”。它可以指定特定的区域进行拉伸而不失真。 -**使用.9.png的优点** -1. 避免在非标准分辨率手机上缩放变形 -2. 可以只配置1张或多张图片适配更多分辨率，减少apk的体积（推荐至少配置1080P高分屏启动图片） +**使用.9.png的优点** +1. 避免在非标准分辨率手机上缩放变形 +2. 可以只配置1张或多张图片适配更多分辨率，减少apk的体积（推荐至少配置1080P高分屏启动图片） -**.9.png图片和普通png图片的差异** -1. .9.png图片和一般图片的区别在于.9.png图片有四条黑边，而一般的图片没有，这四条黑边就是用来拉伸和指定显示位置的 -2. 使用.9.png图片后，整个图片应该是包裹着你想要显示的内容的，而没有使用的话整个图片将会被拉伸 +**.9.png图片和普通png图片的差异** +1. .9.png图片和一般图片的区别在于.9.png图片有四条黑边，而一般的图片没有，这四条黑边就是用来拉伸和指定显示位置的 +2. 使用.9.png图片后，整个图片应该是包裹着你想要显示的内容的，而没有使用的话整个图片将会被拉伸 -**制作.9.png图片** -1. 在Android sdk目录下的tools目录下，有一个叫做draw9patch.bat的文件，双击打开就可以使用（最新android SDK该文件已经不存在，若电脑没有安装android studio，可下载附件工具编辑.9.png图片） -2. 使用android studio，因为android studio已经集成.9.png制作工具，只需选中需要生成的png文件，然后右键，点击create 9-patch file 选项 +**制作.9.png图片** +1. 在Android sdk目录下的tools目录下，有一个叫做draw9patch.bat的文件，双击打开就可以使用（最新android SDK该文件已经不存在，若电脑没有安装android studio，可下载附件工具编辑.9.png图片） +2. 使用android studio，因为android studio已经集成.9.png制作工具，只需选中需要生成的png文件，然后右键，点击create 9-patch file 选项 -详细制作步骤可参考链接：[Android中.9图片的含义及制作教程](https://www.jianshu.com/p/3fd048644e3f?tdsourcetag=s_pctim_aiomsg) +详细制作步骤可参考链接：[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生成工具：[http://inloop.github.io/shadow4android/](http://inloop.github.io/shadow4android/) -**.9.png配置使用** +**.9.png配置使用** 打开项目的manifest.json文件，在“App启动界面配置”中的“Android启动界面设置”项下，在各分辨率启动图设置框选择需要使用的.9.png图片（图片尺寸请按照提示尺寸对应上传），保存后提交云端打包即可。 -> 不同尺寸的启动图是为了适配不同分辨率的手机，所以提交打包时请务必上传不同尺寸的启动图，切忌上传多张同尺寸启动图 +> 不同尺寸的启动图是为了适配不同分辨率的手机，所以提交打包时请务必上传不同尺寸的启动图，切忌上传多张同尺寸启动图 可以参考开发者在[插件市场](https://ext.dcloud.net.cn/search?q=.9)做好的.9样例工程 @@ -106,16 +106,13 @@ Splash是因为主界面渲染慢，给用户一个等待过渡。但注意复 1. 如不需要splash -不配置启动图，在SplashScreen中配置一个小的白色Logo图。 - -这样在所有Rom中启动都不会有splash效果。 - +不配置启动图，在SplashScreen中配置一个小的白色Logo图。\ +这样在所有Rom中启动都不会有splash效果。\ 如果不在SplashScreen配置白色小图，那么在支持SplashScreen的Rom上，启动会在中间渲染App的icon图标。当然这样一个小图也不会占用太多渲染资源。 2. 如需要splash -那么首先需要配置启动图，确保不支持SplashScreen的手机上显示这个启动图。 - +那么首先需要配置启动图，确保不支持SplashScreen的手机上显示这个启动图。\ 然后Google SplashScreen配置中配置背景色、居中图标和底图，在支持SplashScreen的手机上，启动封面会变成这个效果。 3. 如只配启动图会怎么样？ @@ -148,30 +145,31 @@ onReady触发时机要比onShow晚一些。 配置示例： ```json -"app" : { - "splashScreen" : { - "autoClose" : "onReady" +{ + "app" : { + "splashScreen" : { + "autoClose" : "onReady" + } } } ``` -**注意** - +::: warning 注意 - splash关闭时机中描述的`首页`，指的是第一个真正显示的页面，如项目中pages.json第一个页面A在onLoad生命周期被关闭重新跳转了一个新页面B并显示，则B页面就是`首页`，原因是显示的是页面B，A页面并未显示， 如果是在页面A的onShow或更晚的生命周期关闭在跳转或直接跳转，则页面A是`首页`，因为页面A已经显示符合第一个真正显示的页面。 - splash关闭后才显示开屏广告 - +::: ### 不同启动方式对splash的影响@starttype 应用的启动有冷启动、温启动、切换到前台，这三种方式splash展示时间是有区别的。 -1. 应用冷启动 +1. 应用冷启动\ 指首次启动或被kill掉进程后的启动，冷启动时初始化环境，数据加载等会占用一些启动时间，所以splash展示时间长一些。 -2. 切换至前台 +2. 切换至前台\ 应用未被关闭，再次启动只是激活到前台，此时不显示splash。 -3. 温启动 +3. 温启动\ 指应用的activity退出但进程仍未被手机系统回收。此时启动，由于不会再初始化环境，加载数据等操作，所以相对启动时间较少，splash展示时间也会缩短。 由于uni-app x默认在app.uvue里使用了uni.exit，这种退出方式只关闭了activity，没有关闭应用进程。如果rom没有回收掉App进程时再启动该App，就会触发温启动。此时splash会一闪而过。 @@ -179,20 +177,22 @@ onReady触发时机要比onShow晚一些。 当然App如何退出是开发者自己定义的。很多Android App直接单击back隐藏在后台，不弹toast询问用户是否退出。此时也可以避免温启动的splash快闪。这种方式的开发详见[切换应用到后台](../api/exit.md#back)。 -## iOS平台splash@ios +## iOS平台splash@ios -> HBuilderX4.18+ 版本支持配置启动界面 +> HBuilderX4.18+ 版本支持配置启动界面 uni-app x 的 app-ios 平台，启动界面有以下策略： -- 不配置 -- 自定义storyboard启动界面 +- 不配置 +- 自定义storyboard启动界面 Storyboard是Apple提供的一种简化的布局界面，通过xml描述界面，不能编程。 虽然无法制作非常灵活的界面，但满足启动界面是没问题的，比如设定背景色背景图、设定前景文字、图片的位置。 storyboard的优势是启动速度快。在App的真实首页被渲染完成前，可以快速给用户提供一个基于Storyboard的启动屏。 -### 制作storyboard文件 +### 制作storyboard文件 + storyboard有两种制作方式： + **1.** **直接使用[模板文件(点击下载)](https://native-res.dcloud.net.cn/uni-app/file/CustomStoryboard.zip)中提供的相对常用的 storyboard 模板，可在这个文件的基础上进行自定义（不需要 Mac 及 XCode，详情请查看附件中的 readme 教程）** 此 storyboard 文件适用于各种 iPhone 及 iPad 设备的横竖屏，支持自定义界面元素包括 @@ -204,9 +204,10 @@ storyboard有两种制作方式： **2.** 使用xcode自行制作。xcode提供了可视化的制作storyboard的方式，但依赖于mac电脑。在xcode中制作storyboard的教程请自行网络搜索，请注意下面的注意事项。 HBuilderX需要的自定义storyboard文件格式为zip压缩包，里面要求包含XCode使用的.storyboard文件，以及.stroybard文件中使用的png图，如下图所示： + ![](https://img.cdn.aliyun.dcloud.net.cn/client/ask/pkg/splash/storyboard.png) -**注意事项** +::: warning 注意事项 - zip压缩包中不要包含目录，直接包含.storyboard和.png文件 - 有且只有一个.storyboard文件 - .storyboard文件可以通过xcode生成，也可以使用任何文本编辑器修改其源码，比如对.storyboard文件点右键，使用HBuilderX打开。它本质是一个xml文件。 @@ -215,10 +216,10 @@ HBuilderX需要的自定义storyboard文件格式为zip压缩包，里面要求 - 制作 storyboard 时，**请将图片资源直接拖到放工程中，不要放到 imageset 里面，并且图片命名要保证一定的唯一性可参考附件中的示例** - XCode中创建 storyboard 文件时，**页面元素添加约束时一定要相对于** `Superview`，不然启动图到 loading页面过渡时页面会跳动或者变形 ![](https://img.cdn.aliyun.dcloud.net.cn/client/ask/pkg/splash/xcode.png) - +::: ### 使用storyboard文件 -打开项目的manifest.json文件，在“App启动界面配置”中的“iOS启动图设置”项下选择自己制作的storyboard文件： +打开项目的manifest.json文件，在“App启动界面配置”中的“iOS启动图设置”项下选择自己制作的storyboard文件： ![](../static/splash_screen_ios_storyboard.png) -- GitLab