鸿蒙应用开发预览界面

八青妹
953 阅读4分钟

1. 前言

从华为官网的学习课程中，了解到ArkUI预览支持页面预览与组件预览。这个非常重要，因为使用真机调试的成本实在太大了，所以用好预览器就显得格外重要了，也是做界面开发的第一步。

2. 预览界面

2.1 使用预览器方式

以ArkTS为例，使用预览器的方法如下：

  1. 创建或打开一个ArkTS应用/服务工程。本示例以打开一个本地ArkTS Demo工程为例。

  2. 在工程目录下，打开任意一个.ets文件（JS工程请打开.hml/.css/.js页面）。

  3. 可以通过如下任意一种方式打开预览器开关，显示效果如下图所示：

    • 通过菜单栏，单击View>Tool Windows>Previewer打开预览器。
    • 在编辑窗口右上角的侧边工具栏，单击Previewer，打开预览器。

2.2 如何在开发中预览当前页面？

官网上是这样写的：

ArkTS应用/服务支持页面预览。页面预览通过在工程的ets文件头部添加@Entry实现。

也就是当我们需要调试当前的页面时，将当前的页面临时作为入口文件先展示。可在文件头部加上@Entry，然后就可以预览展示。

例如这里有一个弹窗组件，需要对这个组件进行调试，我们在这个组件的顶部加上@Entry,然后在编辑器的右侧栏找到Preview这个入口，打开。

image.png

不是点击上面的Preview右侧类似播放键的按钮哈,那个执行的是整个项目的入口文件，并不是临时的。所以当调试结束后，就把调试文件顶部的@Entry去掉。养成好习惯。

2.2 如何更改首页入口？

如果要更改整个项目的入口文件，该怎么改呢？实际情况可能是，Splash页面，也就是首屏页面切换到新的页面，不用默认的page > Index.ets，换成同级目录的其他文件（Welcome.ets），需要改动哪些点呢？

第一步：找到文件 entry > src > main > ets > entryAblility.ets

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

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/Index', (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.');
    });
  }

  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');
  }
}

默认如上述代码所示，看到这里windowStage.loadContent('pages/Index', (err) => {})，默认展示的资源文件是pages/Index,将这里改为pages/Welcome。

第二步：找到文件 entry > src > main > resources > base > profile > main_page.json

{
  "src": [
    "pages/Index"
  ]
}

将首页路径从pages/Index,将这里改为pages/Welcome。 然后点击入口文件的执行按钮。入口文件切换到Welcome.ets。

image.png

2.3 如何预览当前组件？

在当前需要预览的组件文件的头部加上@Preview,打开预览器，即可进行预览。在开发界面UI代码过程中，如果添加或删除了UI组件，只需Ctrl+S进行保存，然后预览器就会立即刷新预览结果。

组件预览支持实时预览，不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用10个@Preview装饰自定义组件。可以通过设置@Preview的参数，指定预览设备的相关属性，若不设置@Preview的参数，默认的设备属性如下所示：

@Preview({
  title: 'Component1',  //预览组件的名称
  deviceType: 'phone',  //指定当前组件预览渲染的设备类型，默认为Phone
  width: 1080,  //预览设备的宽度，单位：px
  height: 2340,  //预览设备的长度，单位：px
  colorMode: 'light',  //显示的亮/暗模式，取值为light或dark
  dpi: 480,  //预览设备的屏幕DPI值
  locale: 'zh_CN',  //预览设备的语言，如zh_CN、en_US等
  orientation: 'portrait',  //预览设备的横竖屏状态，取值为portrait或landscape
  roundScreen: false  //设备的屏幕形状是否为圆形
})

3. 总结

知道如何使用预览器非常重要，预览器中还有个功能叫Inspector双向预览,开启双向预览功能后，支持代码编辑器、UI界面和Component Tree 三者之间的联动。做样式精修的时候会用上吧。从我们正常入门来说，需要熟练掌握页面和组件的预览，提高开发效率。

avatar
文章
阅读
粉丝