【HarmoneyOS应用开发学习总结之二】DevEco Studio Previewer使用

原创

已于 2023-11-24 11:48:50 修改 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

于 2023-11-24 11:48:10 首次发布

在使用DevEco Studio进行HarmonyOS应用开发时，可以通过Previewer功能，可以方便查看UI运行效果，及时做出调整。下面简单介绍一下Previewer的几个操作应用。

一、 Previewer的正常打开

Previewer位于在DevEco Studio界面的右边，只有ets类型文件才可以使用Previewer功能进行预览。在IDE相关位置如下图，由于我安装了汉化包，后续截图以中文版哈。

英文版

中文版

二、代码开发预览效果

当页面UI设计好后，可点击Previewer【预览器】，将自动编译，如代码编写没有错误，则可在Previewer中看到页面的效果。

三、Previewer部分操作

下面将简单介绍下Previewer一些功能及操作。

a）inspector，可快速定位到组件代码段

点击这个大小“T”图标，会显示Component Tree窗口，里面会涵盖了当前页面所有组件。具体操作：

（1）选定代码块，在Previewer中找到相对应的UI组件；
（2）选定某个UI组件，在代码

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

rongdzh

关注关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

DevEco Studio高级技巧：利用Previewer窗口高效预览HarmonyOS UI

qq_44103359的博客

05-05

2073

在HarmonyOS 4.0的开发中，DevEco Studio提供了一个强大的工具——Previewer（预览器），它允许开发者在编写代码的同时实时预览UI界面的效果。这对于快速迭代和调试用户界面非常有用。本文将详细介绍如何在DevEco Studio中使用Previewer窗口预览器。DevEco Studio中的Previewer是一个强大的工具，它极大地提高了HarmonyOS应用开发的效率和便捷性。通过实时预览UI，开发者可以快速迭代和调试界面，确保应用在不同设备和状态下的表现符合预期。

鸿蒙4.0开发笔记之DevEco Studio如何使用低代码开发模板进行开发的详细流程（六）

Viewinfinitely的博客

11-25

6848

鸿蒙HarmonyOS低代码开发方式，具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。

1 条评论您还未登录，请先登录后发表或查看评论

【学习笔记】鸿蒙应用开发工具 HUAWEI DevEco Studio

程序员四海

12-18

1172

主要内容： 1、HUAWEI DevEco Studio 的常用设置和操作汇总 2、HUAWEI DevEco Studio 的常用插件汇总 3、HUAWEI DevEco Studio 的调试技巧汇总

DevEco Studio的这些预览能力你都知道吗？

OpenHarmony_dev的博客

06-08

1477

在万物互联的今天，开发者在应用/服务开发过程中，需要考虑应用/服务在不同设备上的运行效果。为满足这一需求，DevEco Studio 作为 HarmonyOS 和 OpenAtom OpenHarmony（简称“OpenHarmony”）应用及服务开发配套的集成开发环境（IDE），提供了强大的预览功能，让开发者能够预览应用/服务在不同终端设备上的 UI 显示效果，不仅支持边开发边预览，还支持在预览过程中进行界面交互。下面，就带大家一起来了解 DevEco Studio 的预览功能。...

鸿蒙4.0开发笔记之DevEco Studio如何使用Previewer窗口预览器（一）

Viewinfinitely的博客

11-17

2万+

当开启预览器时，系统默认设置是打开实时更新的，若要关闭，则可以点击红色箭头指向的图标，然后就会变成下面的状态，该状态下更改左侧代码不会实时更新Previewer中的UI界面。DevEco Studio预览器概况在HarmonyOS应用开发过程中，通过使用预览器，可以查看应用的UI效果，方便开发者实时查看应用的运行效果，随时调整代码。进入之后便可以看到折叠屏、手机、平板等设备，同时可以点击右上角的小开关，打开之后就可以把列表中的所有设备都呈现UI展示。（2）选定某个UI组件，在代码中寻找到相对应的代码块；

HarmonyOS应用开发：低代码开发Demo展示！

maniu110的博客

07-07

972

接下来为大家展示一个低代码开发的JS工程的Demo示例

鸿蒙NEXT开发【环境搭建】

CS9527DND的博客

10-15

1065

作为独立开发者，如果我们错过了传统移动 App，和后起小程序的红利，那万物互联 + AI 的应用开发就得抓住了。虽然个人上架应用平台难易都差不多，但是鸿蒙生态当前正需要广大开发者参与，一旦上架，相比其他平台，流量扶持力度更大，变现能力也更容易。

HarmonyOS

qq_45585640的博客

04-17

1126

介绍：HarmonyOS是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。时间事件2019HarmonyOS 1.0，华为在东莞举行华为开发者大会，正式发布操作系统鸿蒙 OS，主要用于物联网2020HarmonyOS 2.0，基于开源项目 OpenHarmony 开发的面向多种全场景智能设备的商用版本2021HarmonyOS 3.0，先后优化游戏流畅度、地图三维体验、系统安全，另外系统的稳定性也得到了增强。

Harmony面试题

weixin_37704103的博客

07-30

1133

Stage模型 : HarmonyOS 3.1推出也就是API9 , 是目前==主推==且会长期演进的模型由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型stage: 舞台 /steɪdʒ/FA模型: FA（Feature Ability）模型：HarmonyOS早期版本开始支持的模型，已经不再主推feature: 特点 /ˈfiːtʃə(r)/区别: Stage模型与FA模型最大的区别在于。

HarmonyOS初探07——使用DevEco Studio预览器

老卫的技术站

05-10

2031

在前面的教程中，我们已经认识到了如何来创建一个最为简单的HelloWorld应用，并且通过Car模拟器成功运行了应用。效果如下：但是使用模拟器运行了应用有一个缺点，那就是启动非常慢。如果我只是调试一个简单的界面，却要等待非常久的时间，那可能就消磨人的耐心了。此时，推荐的方式是使用预览器。如何安装预览器在使用预览器查看应用界面的UI效果前，需要确保HarmonyOS SDK > SDK Tools中，已下载Previewer资源。 ...

previewer:用于探索 FS、FTP 和 ZIP 并预览文本和图像的 Swing 应用程序

06-11

预览器 Swing 应用程序来浏览 FS、FTP 和 ZIP 并预览文本和图像文件。学分此应用程序中使用的图像取自以下来源：（许可）

DevEco Studio预览器的使用

舒小羽的博客

04-07

1万+

DevEco Studio预览器概况在HarmonyOS应用开发过程中，通过使用预览器，可以查看应用的UI效果，方便开发者实时查看应用的运行效果，随时调整代码。官方文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973 使用条件在使用Java预览器之前，需要以下条件： 1、安装了Node.js 2、settings中的HarmonyOS SDK > SDK Too

《第二章、DevEco Studio的使用》04 - 预览器使用介绍

carlo的博客

07-13

4811

如果您想观看完整的系列教程，不妨移步到我的《HarmonyOS Next 应用开发教程》专栏中，进行仔细查阅 :前面，我们已经学习了如何创建工程，并对工程有了一个基本了解。同时还学习了关于代码编辑的一些相关技巧和功能，帮助我们在使用 DevEco Studio 的时候，能更加高效的完成开发。那么这节课我们来了解预览器的使用。这节课，给大家介绍了预览器的使用，掌握预览器使用，主要也是为了后续提高开发效率。首先，介绍了如何查看工程的预览效果，包括实时预览和动态预览。然后，介绍了如何使用@Preview。

DevEco Studio Preview窗口预览失败

ChenXiangJian的博客

10-28

1200

第二天在尝试给笔记本连接外置显示器后发现显示器不亮，这时才发现Win11系统装好后，没有安装Intel显卡驱动，于是从笔记本官网下载了显卡驱动。驱动装上后，外接显示器立刻亮了。最近一次安装了Win11系统后，立刻把DevEcoStudio装上了，尝试建立了一个简单的HelloWorld工程，发现无法预览，Preview窗口显示failed，提示到Log窗口查看详细信息，但是Log窗口中却没有任何错误提示。先后查看了SDK，环境变量等配置，尝试修改了各种配置，都没有发现问题所在，于是暂时放下没继续调查。

在DevEco开发工具中，使用Previewer预览界面中的UI组件

jCuckoo的专栏

01-26

1097

在HarmonyOS的DevEco开发工具中，使用Previewer预览界面中的UI组件

鸿蒙4.0开发 - DevEco Studio如何使用Previewer窗口预览器报错

SSY_1992的博客

12-12

8602

应用开发过程中，通过使用预览器，可以查看应用的UI效果，方便开发者实时查看应用的运行效果，随时调整代码。布局文件才能打开Previewer，查看相应的UI界面。我的解决方法当然就是双击选中。编辑界面的右上角部分，竖排文字的第二个选项卡则是。文件，再点击Previewer，则成功加载。在鸿蒙4.0中，只有。原因是没有选中相应的。

鸿蒙系统开发工具DevEco Studio 2.2下载/安装教程

最新发布

08-22

在使用 **Deveco Studio** 时，如果遇到 **Previewer failed: not supported / compile error** 的问题，通常可能由以下几个原因导致：代码语法错误、环境配置不当、依赖项缺失或 IDE 本身的问题。 ### 问题分析与解决方法 #### 1. 检查代码语法与结构确保当前文件中没有语法错误或不支持的 API 调用。ArkTS（ArkUI 的开发语言）对语法要求较为严格，特别是在声明式 UI 构建过程中，任何不符合规范的结构都可能导致预览器无法渲染。 ```typescript // 示例：正确的组件结构 @Component struct HelloWorld { build() { Column() { Text('Hello, World!') .fontSize(30) } .width('100%') .height('100%') } } ``` 如果代码中存在未定义的变量、类型错误或不支持的组件组合，预览器将无法正常编译并显示错误。 #### 2. 更新 Deveco Studio 至最新版本确保使用的是最新版本的 **Deveco Studio**。HarmonyOS SDK 和 IDE 会定期更新以修复已知问题和增强预览器的兼容性。可通过以下路径检查更新： - **Help > Check for Updates** 更新后，重启 IDE 并重新加载项目。 #### 3. 清理缓存并重建项目有时旧缓存可能导致编译失败。可以通过以下步骤清理项目并重新构建： - 删除项目中的 `build` 文件夹 - 删除 `.preview` 文件夹（如果存在） - 执行菜单 **Build > Clean Project** - 然后重新执行 **Build > Rebuild Project** #### 4. 检查 SDK 与运行时依赖确保项目中使用的 SDK 版本与当前设备或模拟器支持的 API 级别一致。在 `build-profile.json5` 中检查 SDK 配置是否正确： ```json { "apiVersion": "10", "sdkPath": "D:\\HarmonyOS\\SDK\\default" } ``` 如果使用了特定设备功能（如相机、传感器等），而预览器无法模拟这些功能，则会提示 `not supported` 错误。 #### 5. 启用日志调试在 **Log** 窗口中查看预览器失败的具体日志信息。通常可以在以下路径找到日志： - **Help > Show Log in Explorer** 日志中会包含更详细的错误信息，有助于定位问题根源。 #### 6. 使用模拟器或真机调试替代预览器如果预览器持续失败，可尝试使用 **Emulator** 或连接 **真机设备** 进行调试。虽然不如预览器即时，但能验证代码是否能在真实环境中运行。 #### 7. 检查项目配置与依赖模块确保所有依赖模块（如 `@ohos.*`）已正确导入，并在 `oh-package.json5` 中配置正确。 ```json { "dependencies": { "@ohos/router": "^1.0.0" } } ``` #### 8. 参考官方文档与社区反馈查阅 [HarmonyOS 官方文档](https://developer.harmonyos.com/) 或社区论坛中关于预览器失败的常见问题解决方案。例如，某些特定 API（如 `@State`、`@Prop`）使用不当也可能导致预览器崩溃 [^1]。 ---