This page is translated by Google Cloud Translation API

Switch to Chinese

When the app starts, it takes a certain amount of time for the system to load the application and render the home page. In order to avoid the user's waiting, the mobile operating system provides a special startup interface design, allowing users to see a simple interface first, and then officially enter the application home page after the application is loaded.

This interface is called the startup interface, also known as splash or lauch screen.

启动界面选项

等待首页渲染完毕后再关闭Splash图

After entering the application, the startup interface will automatically close at the right time and display the application home page, which can be configured in the manifest.json file.

• 勾选“等待首页渲染完毕后再关闭Splash图”，表示需要等待首页渲染完成后再关闭启动界面
• If you don't check "Wait for the home page to be rendered before closing the Splash image", it means that the startup interface will be closed after the home page is loaded. At this time, the home page may not be rendered, and a white screen may flash on some devices, which is not recommended.

The source view supports the following configurations:

property	type	default value	description	minimum version
alwaysShowBeforeRender	Boolean	true	Whether to wait for the home page to render before closing the startup interface	1.6.0
autoclose	Boolean	true	Whether to automatically close the startup interface, it only takes effect when alwaysShowBeforeRender is set to false, if you need to [manually close](https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator .closeSplashscreen) to start the interface, both alwaysShowBeforeRender and autoclose should be set to false.
waiting	Boolean	true	Whether to display waiting snowflakes in the startup interface

alwaysShowBeforeRender和autoclose属性组合设置，可配置以下三种关闭启动界面（splash）策略：

• 首页渲染完毕后自动关闭启动界面 After the app starts, it automatically detects the rendering status of the home page, and automatically closes the startup interface when it detects that the rendering of the home page is complete.

"app-plus" : {
    "splashscreen" : {
        "alwaysShowBeforeRender" : true
    }
}

• 首页加载完成后自动关闭启动界面 After the app starts, the rendering state of the home page is not detected, and the startup interface is automatically closed after the home page is loaded.

"app-plus" : {
    "splashscreen" : {
        "alwaysShowBeforeRender" : false
    }
}

• 代码控制关闭启动界面 After the app starts, the startup interface will not be closed automatically. You need to call plus.navigator.closeSplashscreen in the code to close the startup interface .

"app-plus" : {
    "splashscreen" : {
        "alwaysShowBeforeRender" : false,
        "autoclose" : false,
    }
}

Startup interface settings

Startup interface was originally a static png image. With the diversification of mobile device screens, in order to make the interface not deformed when each screen starts, developers need to make different images for more and more screen sizes. This brings many problems, including complex production and increased size of the app package.

The following start interface methods are provided in HBuilderX:

Startup Screen	Platform Support	Features
通用启动界面	Android、iOS均支持。其中在iOS上通过storyboard实现	简单，自定义性弱、可适配不同屏幕
自定义启动图	Android支持，同时支持使用.9.png图片；iOS可以打包，但从2020年6月30日起，无法提交Appstore	为了适配不同屏幕尺寸，需要做大量图片
Custom storyboard startup interface	Only supported by iOS, HBuilderX2.8+ version	Can adapt to different screens

Tip: The startup interface settings need to be submitted to the cloud package to take effect

通用启动界面

Universal startup interface is a simple startup interface that can adapt to different screens. It uses the logo and name of the app as elements, and automatically generates a startup interface that adapts to different screen sizes and different OS requirements.

The universal startup interface has the lowest threshold, and only requires the developer to configure the logo and name for the app in the manifest. And it complies with the go-live specifications of any app store. It's implemented on iOS through storyboards.

提示通用启动界面是为了方便开发者而设计的，它不具有很强的灵活性，如果开发者有较强的自定义需求，Android平台请使用.9.png格式自定义启动图、iOS平台请使用自定义storyboard启动界面

Android platform universal startup interface

iOS platform universal launch interface

If the app is turned on to adapt to dark mode/night mode/dark mode, the background color of the startup interface will automatically use dark color, and the text color will automatically use white.

Custom launch image

Android platform custom launch map

Android平台使用.9.png启动图

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

1. 避免在非标准分辨率手机上缩放变形
2. 可以只配置1张或多张图片适配更多分辨率，减少apk的体积（推荐至少配置1080P高分屏启动图片）

.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 选项

详细制作步骤可参考链接：Android中.9图片的含义及制作教程 可以使用在线.9.png生成工具：http://inloop.github.io/shadow4android/

.9.png配置使用 打开项目的manifest.json文件，在“App启动界面配置”中的“Android启动界面设置”项下勾选“自定义启动图”，在各分辨率启动图设置框选择需要使用的.9.png图片（图片尺寸请按照提示尺寸对应上传），保存后提交云端打包即可。

不同尺寸的启动图是为了适配不同分辨率的手机，所以提交打包时请务必上传不同尺寸的启动图，切忌上传多张同尺寸启动图

You can refer to the .9 sample project done by the developer in Plugin Market

iOS platform custom launch map

Tip: From June 30, 2020, the Apple AppStore audit requires that the app cannot use the launch image when launching, and must instead use Storyboard to create the launch interface. If you need to submit the AppStore, please use the Common Launch Interface Or custom storyboard launch interface.

自定义storyboard启动界面

Storyboard is a simplified layout interface provided by Apple, which describes the interface through xml and cannot be programmed. Although it is impossible to make a very flexible interface, it is no problem to meet the startup interface, such as setting the background color and background image, setting the foreground text, and the position of the image. The advantage of storyboard is that it starts fast. Before the real home page of the app is rendered, a Storyboard-based splash screen can be quickly provided to the user.

Make storyboard file

storyboard有两种制作方式： 1. 直接使用模板文件(点击下载)中提供的相对常用的 storyboard 模板，可在这个文件的基础上进行自定义（不需要 Mac 及 XCode，详情请查看附件中的 readme 教程） This storyboard file is suitable for portrait and landscape screens on various iPhone and iPad devices, and supports custom interface elements including:

• Page background image or background color
• middle display picture
• Bottom display text and color Note: each item is optional (for example, only the background image is displayed, only the background image can be provided)

2. Make it by yourself using xcode. Xcode provides a visual way to make storyboards, but it depends on Mac computers. For the tutorial of making storyboard in xcode, please search the Internet by yourself, please pay attention to the following precautions.

Precautions

• Do not include directories in the zip archive, directly include .storyboard and .png files
• There is one and only one .storyboard file
• The .storyboard file can be generated by xcode, or you can use any text editor to modify its source code, such as right-clicking the .storyboard file and opening it with HBuilderX. It is essentially an xml file.
• The @2x and @3x in the png file name are pictures of different resolutions, and the system will automatically select them according to the dpi of the device. Please refer to here
• In order to avoid the png file name conflict with the file name built in the app, it is recommended to start with dc_launchscreen
• 制作 storyboard 时，请将图片资源直接拖到放工程中，不要放到 imageset 里面，并且图片命名要保证一定的唯一性可参考附件中的示例
• XCode中创建 storyboard 文件时，页面元素添加约束时一定要相对于 Superview，不然启动图到 loading页面过渡时页面会跳动或者变形
  

Using storyboard files