从零开始仿抖音做一个APP（启动页icon优化&沉浸式）

从零开始仿抖音做一个APP（启动页icon优化&沉浸式）

• 沉浸式效果

前面完成了欢迎页的简单UI和逻辑处理并实现了Har模块和Hap模块之间的依赖和关联。今天，对遗留问题做一些处理和优化。

沉浸式效果

典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条，其中状态栏和导航条，通常在沉浸式布局下称为避让区；避让区之外的区域称为安全区。开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。

我们前一篇文章带大家实现的欢迎页只填充了应用界面，状态栏和导航栏没有被填充，由于背景色差别较大，页面看起来很突兀，所有很有必要调整布局系统为全屏布局，界面元素延伸到状态栏和导航条区域实现沉浸式效果。实现方案（也可根据实际情况在具体页面进行全屏设置）：

export default class EntryAbility extends UIAbility {
	......
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
	//设置全屏
    windowStage.getMainWindow((err: BusinessError, data) => {
      let errCode: number = err.code;
      if (errCode) {
        hilog.error(0x0000, 'testTag', 'Failed to obtain the main window. Cause: ' + JSON.stringify(err));
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));

      data.setWindowLayoutFullScreen(true)
    });
    
    windowStage.loadContent('pages/Splash', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

	...... 
}

这样配置后再运行项目，就会发现欢迎页全屏显示，状态栏、导航栏背景不再是默认白色。但是会发现启动过程中，会有一个应用icon一闪而过，这个体验不是很好，有必要进一步优化，这就需要找到entry模块下的src -> main -> module.json5进行配置。

{
  "module": {
    "name": "entry",
  	...
    "abilities": [
      {
        "name": "EntryAbility",
        ...
        "icon": "$media:start_icon", // EntryAbility组件的图标
        "label": "$string:EntryAbility_label", // EntryAbility组件的标签
        "startWindowIcon": "$media:splash",  //启动页面图标资源
        "startWindowBackground": "$color:start_window_background",  // 启动页面背景颜色
      	...
      }
    ],
   ...
  }
}

• icon对应的是entry为主模块的启动图标，大家可以自行替换（很多渠道都可以获取，比如 iconfont）;
• label对应的是当前entry为主模块的应用名称，也可自行替换（可直接定位到zh_CN目录下的sstring.json进行修改）。
• startWindowIcon就是启动过程中一闪而过的那个图标，而这个属性无法删除，和很多其它开发者一样的方案，在这里可以设置一个纯色背景的icon，启动过程中该图标对用户无感知。也可以把启动icon设置为欢迎页，这样用户体验可能更好，但需要注意冷启动相关的性能问题。
• startWindowBackground默认为纯白色，开发者可根据需求自行设置。

注：startWindowIcon建议使用不超过256*256分辨率的图片作为启动页面图标，以减少图片解码带来的时延。

优化完成之后，效果如下：

至此，欢迎页基本完成，此处还有优化空间，但对当前项目非重点，后期在应用冷启动优化分析相关的文章中会继续讲解，关于沉浸式效果的处理，在接下来的项目开发中依然会涉及到，所以也会继续讲解。