HarmonyOS Next 应用UI生成工具介绍

embedded/2025/1/24 17:32:38/

背景

HarmonyOS Next适配开发过程中难买难要参考之前逻辑,但是可能时间较长文档不全,只能参考Android或iOS代码,有些逻辑较重的场景还可以通过AI工具将Android 的Java代码逻辑转成TS完成部分复用。对于一些UI场景只能手动去写,虽然ArkUI写页面效率比较高,但是如果页面比较多,工作量也不小,官方提供了Android APK转ArkTS页面的工具,本文带大家一起体验尝试一波。

工具介绍

UI Generator用于快速生成可编译、可运行的HarmonyOS UI工程,支持基于已有UI布局文件(XML),快速生成对应的HarmonyOS UI代码,其中包含HarmonyOS基础工程、页面布局、组件及属性和资源文件等。

需要使用使用DevEco Studio 5.0.3.700及以上版本。

工具配置

在DevEco-Studio中,打开设置页面,点击插件,找到已安装的UI Generator插件后选择开启:
在这里插入图片描述

应用、确认后,在工具栏工具中点击“Generate Project from …":

在这里插入图片描述

第一次进入需要同意用户协议:

在这里插入图片描述

接下来选择Android的安装包apk路径和Android SDK路径:
在这里插入图片描述

接着选择要转换的xml布局:

在这里插入图片描述

选择下一步:
在这里插入图片描述

这里面Destination Path为生成HarmonyOS Next公测的路径和名称,点击确认后开始转换,转换日志如下:

2025-01-22 12:08:02,885   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug
2025-01-22 12:08:02,960   sdkdir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk
2025-01-22 12:08:02,960   apkpath: /Users/shen/Downloads/app-debug.apk
2025-01-22 12:08:02,960   androidsdk: /Users/shen/Library/Android/sdk
2025-01-22 12:08:02,960   aapt: /Users/shen/Library/Android/sdk/build-tools/34.0.0/aapt2
2025-01-22 12:08:02,962   bash dumpres.sh /Users/shen/Downloads/app-debug.apk /Users/shen/Library/Android/sdk/build-tools/34.0.0/aapt2
2025-01-22 12:08:05,916   run dump apk resources finished.
2025-01-22 12:08:05,917   =================================================
2025-01-22 12:08:05,917   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/maple-decompile.sh exec success
2025-01-22 12:08:05,917   =================================================
2025-01-22 12:08:05,920   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/runs
2025-01-22 12:08:05,939   dexdir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/unzip
2025-01-22 12:08:05,939   androiddir: /Users/shen/Library/Android/sdk
2025-01-22 12:08:05,939   componentspath: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/runs/components.txt
2025-01-22 12:08:05,950   bash /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/bin/component_analyze.sh --dexdump-dir=/Users/shen/Library/Android/sdk/build-tools/34.0.0/dexdump --dex-dir=/Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/unzip --mplsdk-dir=/Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk --component-include=false /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/runs/components.txt
2025-01-22 12:08:05,965   dexdump-dir: /Users/shen/Library/Android/sdk/build-tools/34.0.0/dexdump
2025-01-22 12:08:05,965   dex-dir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/unzip
2025-01-22 12:08:05,966   analysis start!
2025-01-22 12:08:05,967   Darwin
2025-01-22 12:08:05,967   xml analysis start
2025-01-22 12:08:05,975   =================================================
2025-01-22 12:08:05,975   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/runs/maple-files-dex.sh exec success
2025-01-22 12:08:05,975   =================================================
2025-01-22 12:08:44,098   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk
2025-01-22 12:08:44,105   Darwin
2025-01-22 12:08:44,129   target is xml file, no need to analyze dex dependency, exit dex-crop.sh
2025-01-22 12:08:44,130   =================================================
2025-01-22 12:08:44,130   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/bin/dex_crop.sh exec success
2025-01-22 12:08:44,130   =================================================
2025-01-22 12:08:44,143   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components
2025-01-22 12:08:44,173   cp: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/maple_deps/host_maple/bin_darwin/dex2mpl is a directory (not copied).
2025-01-22 12:08:44,180   cp: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/autodeps/bin_darwin/dex2deps is a directory (not copied).
2025-01-22 12:08:44,181   cp: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/autodeps/bin_darwin/gendeps is a directory (not copied).
2025-01-22 12:08:44,183   chmod: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/autodeps/bin/*: No such file or directory
2025-01-22 12:08:44,185   maplebinary: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/maple_deps/host_maple/bin/maple
2025-01-22 12:08:44,185   xmldir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/decompile
2025-01-22 12:08:44,185   component: layout/activity_preview.xml
2025-01-22 12:08:44,185   sdkdir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk
2025-01-22 12:08:44,185   apkname: app-debug
2025-01-22 12:08:44,185   sourcedir:
2025-01-22 12:08:44,185   mplfile: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components/test.mpl
2025-01-22 12:08:44,185   dexdump:
2025-01-22 12:08:44,187   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/maple_deps/host_maple/bin/maple --infile /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components/test.mpl --me-opt="--O2 --quiet --no-nativeopt --meverify --threads=4 --no-ignoreipa --enable-ea" --mpl2mpl-opt="--O2 --quiet --regnativefunc --deferred-visit --no-nativeopt --maplelinker --emitVtableImpl --maplelinker-nolocal --sva --android-xml=/Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/decompile --xml-to-analyze=layout/activity_preview.xml --class-to-analyze=activity_preview --config-path=/Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/config_files" --save-temps
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,763   android activities cnt : 10
2025-01-22 12:08:46,763   => Log File: android-ui-ir-activity_preview.log
2025-01-22 12:08:46,763   ==========> Save UI Generate Report to activity_preview_generation_report.json <==========
2025-01-22 12:08:46,769   =================================================
2025-01-22 12:08:46,769   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components/maple.sh exec success
2025-01-22 12:08:46,769   =================================================
2025-01-22 12:08:46,784   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components
2025-01-22 12:08:46,787   Darwin
2025-01-22 12:08:46,793   dexdump-dir: /Users/shen/Library/Android/sdk
2025-01-22 12:08:46,793   dex-dir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/unzip
2025-01-22 12:08:46,793   cropping analysis start!
2025-01-22 12:08:46,793   searching for all dexdump
2025-01-22 12:08:48,812   searching for all dexdump
2025-01-22 12:08:48,812   /Users/shen/Library/Android/sdk/build-tools/30.0.2/dexdump
2025-01-22 12:08:48,812   searching for all dex file
2025-01-22 12:08:48,815    1 dexdump location founded.
2025-01-22 12:08:49,409   =================================================
2025-01-22 12:08:49,409   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/bin/get_base_class.sh exec success
2025-01-22 12:08:49,409   =================================================
2025-01-22 12:08:49,458   Generation IR Time Elapsed: 5.368000 s
2025-01-22 12:09:06,886   Generation Success, Generated Project Location: 2025-01-22 12:09:06,886   /Users/shen/UIGenerationProjects/UIGeneration_app-debug_activity_preview
2025-01-22 12:09:06,886   Generation Project Time Elapsed: 0.129000 s

打开新工程,生成的页面位于entry > src > main > ets > pages目录下,可以在Previewer中查看页面预览效果。生成的新工程内的entry > src > main > resources目录包含文本、图像、颜色资源。

这里以一个简单示例为例,Android xml:

<?xml version="1.0" encoding="utf-8"?>  
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical">  <LinearLayout        android:id="@+id/container"  android:layout_width="213dp"  android:layout_height="wrap_content"  android:orientation="vertical">  </LinearLayout></ScrollView>

生成ArkTS代码:

@Entry  
@Component  
export struct activity_preview {  build() {  /*  * FIXME: Unhandled property 'android:orientation'  */    Scroll() {  Column()  .id('container')  .width('213vp')  .alignItems(HorizontalAlign.Start)  }  .align(Alignment.TopStart)  .width('100%')  .height('100%')  }  
}

不支持生成的组件、属性会以注释的形式给出,方便后续定位修改。

总结

虽然有些自定义组件或者属性无法直接转换,但是对于复杂页面,帮助我们生成大的框架和大部分代码也可以极大的提升我们开发效率,推荐大家尝试。


http://www.ppmy.cn/embedded/156622.html

相关文章

Excel-XLOOKUP-返回指定范围的数据

XLOOKUP(lookup_value, lookup_array, return_array, [if_not_found], [match_mode], [search_mode]) 第一参数lookup_value是必需参数&#xff0c;指定需要查询的值&#xff1b; 第二参数lookup_array是必需参数&#xff0c;指定查询的单元格区域或数组&#xff1b; 第三参数…

ChromeOS 132 版本更新

ChromeOS 132 版本更新 1. 企业定制化 Chrome Web Store 管理员现在可以使用新设置定制 Chrome Web Store 以适应他们管理的用户&#xff0c;包括以下功能&#xff1a; 添加公司标志添加首页横幅和自定义公告策划扩展集合实施基于类别的控制 这些设置可以通过管理员控制台进…

每日一题 414. 第三大的数

414. 第三大的数 简单 class Solution { public:int thirdMax(vector<int>& nums) {int n nums.size();long first , second,third;first second third LONG_MIN ;bool find false;for(auto num : nums){if(num > first){ third second;second first…

docker启动服务占用172.18网段怎么改成其他网段?和网桥有关吗?或者怎么改docker-compose启动用的yml文件

要修改 Docker 服务使用的网段(如从 172.18 改为其他网段),可以通过以下步骤实现: 1. 修改 Docker 默认网桥的网段 Docker 默认使用 docker0 网桥,其网段通常为 172.17.0.0/16。你可以通过修改 Docker 的配置文件来更改默认网段。 修改 Docker 配置文件 编辑 Docker 的…

【spring】集成JWT实现登录验证

在 Spring 应用中&#xff0c;使用 JSON Web Token (JWT) 是一种常见的认证和授权机制。JWT 是一种基于 JSON 的开放标准 (RFC 7519)&#xff0c;用来在各方之间传递安全、可信的数据。以下是如何在 Spring 框架中集成和使用 JWT 的完整指南。 核心概念 JWT 结构&#xff1a; H…

计算机视觉中的目标检测技术

1. 引言 目标检测是计算机视觉中的重要任务&#xff0c;涉及识别图像或视频中的多个对象并定位它们的位置。与图像分类不同&#xff0c;目标检测不仅需要识别类别&#xff0c;还要在图像中绘制出对象的边界框(Bounding Box)。本文将探讨目标检测的核心技术和应用&#xff0c;并…

c#配置config文件

1&#xff0c;引用命名空间 Configuration 及配置信息

嵌入式知识点总结 ARM体系与架构 专题提升(四)-编程

针对于嵌入式软件杂乱的知识点总结起来&#xff0c;提供给读者学习复习对下述内容的强化。 目录 1.嵌人式编程中&#xff0c;什么是大端?什么是小端 ? 2.如何判断计算机处理器是大端&#xff0c;还是小端 ? 3.如何进行大小端的转换 ? 4.如何对绝对地址0x100000赋值? 1…