全面支持 JS/eTS 应用开发，DevEco Studio 3.0 Beta4 新版本发布

2022 年 7 月 11 日
本文字数：2398 字
阅读完需：约 8 分钟

HUAWEI DevEco Studio（后文简称 DevEco Studio）作为 HarmonyOS 应用及服务开发的 IDE，最近升级了新版本——DevEco Studio 3.0 Beta 4。本次新版本主要支持在 HarmonyOS 3.0 Beta 版上开发 JS/eTS 应用及服务，同时还增强了低代码开发、预览器和编辑器的能力，优化了信息中心体验。

升级方式：

建议您从官网下载安装包进行全量升级：https://developer.harmonyos.com/cn/develop/deveco-studio

一、支持 JS/eTS 应用及服务开发

基于 HarmonyOS 3.0 Beta 版开发 JS/eTS 应用和服务时，需要同时下载 OpenHarmony SDK（API Version 8）以及 HarmonyOS SDK 下的 Previewer 和 Toolchains（API Version 8）。

图 1 OpenHarmony SDK 下载

图 2 HarmonyOS SDK 下载

完成以上操作，就可以开始你的 HarmonyOS 3.0 Beta 版的 JS/eTS 应用开发之旅了。

二、支持低代码开发

低代码开发功能，是 DevEco Studio 为开发者提供的可视化界面开发方式，具有丰富的 UI 界面编辑功能。开发者可自由拖拽组件，快速预览界面效果，所见即所得，有效降低时间成本，提升 UI 界面的构建效率。

此次新版本新增 eTS 低代码开发功能，支持组件自由拖拽排版以及数据绑定。创建工程时选择开启 Super Visual，打开使用低代码开发功能。在工程目录结构下打开“.visual”文件，即可进行 UI 界面的可视化布局设计与开发。

图 3 eTS 低代码开发

此外，服务卡片与低代码开发的功能特性非常契合，通过使用低代码开发完全可以做到服务卡片零码化开发。将所需资源放到对应的文件夹后，在 index.visual 界面通过拖拽组件排版以及属性设置编辑界面框架，在 json 面板中定义变量，然后在属性样式栏进行数据绑定，就可完成服务卡片开发。

图 4 低代码开发服务卡片

三、支持 ArkUI 声明式范式组件的极速预览

DevEco Studio 现已提供多种预览功能，包括多端设备预览、双向预览、实时预览、动态预览等，让开发者可以在 UI 界面开发时快速查看 UI 代码运行的效果。此次新版本的实时预览功能新增支持 ArkUI 声明式范式组件的极速预览。

我们之前提供的实时预览功能，需要在添加或删除 UI 组件后使用快捷键 Ctrl+S 进行保存，预览器才会刷新预览结果。此次新版本中，如果修改了 ArkUI 声明式范式组件的属性和属性值，在该组件没有绑定变量的情况下，无需操作保存，预览器就会亚秒级同步刷新预览结果，让开发者更加快速地看到预览界面的变化效果。

图 5 ArkUI 声明式范式组件的极速预览

四、编辑器能力增强

此次 DevEco Studio 新版本新增了以下三项编辑器能力，让应用开发更加简单高效！

1. ArkUI 代码格式化

实际应用开发中，为了精准地表达业务逻辑，提高代码可读性，往往会对代码的格式有要求。为解决你在编辑代码时的格式问题，DevEco Studio 提供了 ArkUI 代码格式化功能。

在“Setting > Editor > Code Style”下选择对应的语言，且开启代码格式化功能后，即可进行缩进（Tabs and Indents）、空格（Spaces）、换行（Wrapping and Braces）、空行（Blank Lines）和代码排序（Arrangement）的格式化操作。本次新增 eTS、JavaScript 和 TypeScript 三种语言的 Arrangement 功能，支持相应语言的代码排序排列功能的设置，更便于你编辑代码。

图 6 ArkUI 代码格式化

2. ArkUI 自定义代码折叠

实际应用开发中，如果要实现复杂的功能，代码也会比较复杂。为解决代码太长不便于查看代码逻辑的问题，DevEco Studio 提供 ArkUI 自定义代码折叠功能。

当你选中想要折叠的代码后，选择菜单栏的 Code，打开 surround with 或者使用快捷键 Ctrl+Alt+T 来进行代码的自定义折叠设置。通过自定义折叠设置可自动生成具有环绕性质的代码，如 if..else、try..catch、for、synchronized 等，还包括 2 种不同风格的自定义折叠样式选项，包括<editor-fold...>Comments 和 region...endregion Comments。

图 7 ArkUI 自定义代码折叠

3. 字符串可视化编辑

有的 APP 需要面对多个国家的受众，因此开发时需要将字符串资源翻译成多种语言。在进行多种语言翻译时，就可以用到 DevEco Studio 提供的字符串可视化编辑功能。

如图 8 所示，在编辑字符串资源文件 string.json 时，你可以打开字符串资源编辑器，采用表格可视化的方式来编辑。在字符串资源编辑器中可以展示所有 string.json 文件中设置的字符串，并且支持添加、修改、删除字符串，且支持直接同步到原 string.json 文件中。

图 8 字符串可视化编辑

五、信息中心体验优化

在开发过程中可能会遇到问题，需要查阅文档或者资料，为此 DevEco Studio 基于开发旅程提供了一站式信息获取平台——信息中心（InfoCenter），遇到问题时可以直接在信息中心查阅文档、资料。

● 1. 资源快捷入口

信息中心提供了 HarmonyOS 和 OpenHarmony 的快速入门、示例教程、开发指南、API 参考、版本变更、常见问题等内容，且与 DevEco Studio 的功能深度融合，在信息阅读过程中可一键直达相应功能，实现信息阅读与操作的快速切换。

图 9 信息中心（InfoCenter）

● 2. 资源实时更新

新版本的信息中心，支持根据开发的应用/服务类型进行手动自助切换资源类型，还集成了更多的开发资源，如开发指南、API 参考这些常用文档资源。当资源内容动态更新后，底部栏会有提示告知，第一时间通知您。本次升级，信息中心支持 Banner 页资源推荐，整合开发者重点关注的资源（如文档上新、重点手册优化、意见答复等），方便您在 DevEco Studio 中体验沉浸式资源阅读，更快速找到想要查阅的资源。

● 3. 问题求助及意见反馈

与此同时，信息中心也提供了问题求助入口，您可以查阅常见问题，也支持在线提单或通过快捷入口前往开发者论坛发帖求助。欢迎您通过意见反馈界面，反馈 DevEco Studio 工具/开发者文档的错误、Bug、改进意见等，您的宝贵意见是我们改进的重要参考。