46.细解鸿蒙之元服务UX上架标准-沉浸式设计

细解鸿蒙之元服务UX上架标准-沉浸式设计

是否必须遵守：必须

标准项描述：

元服务头部标题栏满足沉浸一体式设计：

1）避免标题栏底部背景色与服务内底部背景色（包含图片/视频）差异过大，确保自然过渡。

2）融合背景的同时，需要确保标题栏信息清晰可阅读。满足字体和背景的对比度 3:1。

测试方法：启动元服务时，检查标题栏背景色沉浸式效果。

判定标准：元服务所有头部标题栏满足沉浸一体式设计。

沉浸式设计是一种具有深远意义和广泛应用前景的设计理念，它通过创造身临其境的体验，为用户带来更加丰富、深刻的感受和价值。在未来的发展中，随着技术的不断进步和人们对体验需求的不断提高，沉浸式设计将在各个领域发挥更加重要的作用。 --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Home', (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.');
    });


    let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
    // 1. 设置窗口全屏
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)
      .then(() => {
        console.info('Succeeded in setting the window layout to full-screen mode.');
      })
      .catch((err: BusinessError) => {
        console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
      });

    // 2. 获取布局避让遮挡的区域
    let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
    let avoidArea = windowClass.getWindowAvoidArea(type);
    let topRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度
    AppStorage.setOrCreate('topRectHeight', topRectHeight);
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~