HarmonyOS is a brand new distributed operating system for the Internet of Everything era. On the basis of traditional single-device system capabilities, HarmonyOS proposes a distributed concept based on the same set of system capabilities and adapting to multiple terminal forms, which can support multiple terminal devices such as mobile phones, tablets, smart wearables, smart screens, and cars. Provide full-scenario (mobile office, sports and health, social communication, media entertainment, etc.) business capabilities.
ArkTS is a development language developed by Huawei. Based on TypeScript (TS for short), it matches the ArkUI framework and expands corresponding capabilities such as declarative UI and state management, allowing developers to develop cross-terminal applications in a more concise and natural way. About ArkTS, you can refer to: ArkTS Basics
ArkUI-X further extends ArkUI to multiple OS platforms: currently supports OpenHarmony, HarmonyOS, Android, iOS, and more platform support will be gradually added in the future. At that time, developers will be able to build applications that support multiple platforms based on a set of main code. The following is a schematic diagram of the overall architecture of the ArkUI cross-platform framework.
1. Environment construction
1.1 Download IDE
DevEco Studio
First of all, you need to download the Huawei development tool DevEco that supports the ArkUI-X suite. The version is 4.0 or higher. Currently, you can only download the preview version for experience. download link:
| software | Version | Remark |
|---|---|---|
| OpenHarmony | 4.0 Beta2 | THAT |
| Public SDK | Ohos_sdk_public 4.0.9.6 (API Version 10 Beta2) | It is provided for application developers and does not contain system interfaces that require system permissions. The default SDK obtained through DevEco Studio is Public SDK. |
| HUAWEI DevEco Studio (optional) | 4.0 Beta2 | Recommended for OpenHarmony application development. Obtaining method: Windows(64-bit) SHA256 check code: ae9b228fb1f79e99441e10bdcf347ebfc42266be8b170bbce3c9764ba32d82a4 Mac(X86) SHA256 check code: 5c9afc5b1262868b58376155f1e857 6d33c1ade8b01091edc4d7d397cd34026c Mac(ARM) SHA256 check code: ea6c98cafd5036e4a6fd46b0b1cde3a306953b1eef423d5940f1af7c632205d6 |
| HUAWEI DevEco Device Tool (optional) | 4.0 Beta1 | The OpenHarmony smart device integrated development environment is recommended. Obtaining method: Click to jump to the download page |
After the download is complete, you can install it. This thing is based on IDEA, which is similar to the experience of Android Studio.
Android Studio
Since ArkUI-X can compile the ArkTS project into an Android project, it needs to use Android Studio for packaging. The installation method of Android Studio will not be described in detail. download link:
Download Android Studio & App Tools - Android Developers (google.cn)
Similarly, we may need to build the native environment of iOS, download Xcode, etc., without too many instructions.
1.2 Install the OpenHarmony SDK
After installation, when we start the DevEco Studio tool, the system prompts us to install Node. This is because HarmonyOS applications also support JS development. We only need to follow the prompts to install, as shown in the figure below.
The relevant dependencies are downloaded. After entering the IDE homepage, don’t rush to create a project. You need to install the OpenHarmony SDK first, which is similar to the Android SDK.
Then, open the Preferences panel and select OpenHarmony, as shown below.
After selecting, you need to specify the path, and then it will download some dependencies, and wait for it to download. After the download is complete, check the options related to API Version 10, click OK and wait for the download to complete.
1.3 Install ArkUI-X SDK
After the OpenHarmony SDK is installed, the ArkUI-X SDK needs to be installed next. Similarly, select ArkUI-X in the settings, specify the path, and wait for the download to complete.
1.4 Environment variables
ArkUI-X needs to set the corresponding environment variables in order to use it correctly. If the relevant environment variables are missing, there will be a pop-up prompt. So after installing Android Studio, you need to add the Android SDK to the environment variable (if you added it before, don't worry about it):
Windows
In [Computer] > [Properties] > [Advanced System Settings] > [Advanced] > [Environment Variables], create a new system variable. The variable name is ANDROID_HOME, and the variable value is the Android SDK installation directory.
macOS
Open the terminal tool, execute the following command, open the .bash_profile file, and then configure the Android SDK installation directory, the command is as follows:
vi ~/.bash_profile
export ANDROID_HOME=/Users/xxx/Library/Android/sdk
source ~/.bash_profile
After the environment variables are configured, close and restart DevEco Studio.
2. Get started quickly
2.1 Create a project
First, we create a common Harmony OS project, as shown below.
Then, follow the prompts to fill in the project name, package name, compilation environment, etc.
After creating a Harmon OS project, we enter the actual interface of the IDE, where we can find the option to create an OpenHarmony project. Why OpenHarmony? The first thing to realize is the difference between HarmonOS and OpenHarmony.
You can compare this specific difference with the project structure by yourself. It may be used as a trigger to cause some people to be dissatisfied. Of course, we can understand it as a reference. Here we only explain that ArkUI-X is based on OpenHarmony technology.
We select [File] -> [New] -> [Import - Import Sample] in the menu bar above, as shown below.
Then, the system will let us choose the imported Sample, here we choose OpenHarmony and HelloWorld under ArkUI-X.
Then, the system will download the corresponding dependencies. However, when I performed the import, I encountered a network timeout problem, so I directly downloaded the source code and then imported it locally.
The download link of the source code is as follows: https://gitee.com/arkui-x/samples
After the dependency installation is complete, select Previewer in the upper right corner and click the [Run] button to preview through the OpenHarmony preview interface.
2.2 Move in code
Go back to the previously created Harmony OS project, and move the UI code inside to the OpenHarmony project. First, enter the entry - src - main directory of the Harmony OS project, and copy the ets, resources and module.json5 files inside. Then replace the corresponding three files in the OpenHarmony project, or directly overwrite them.
Then, preview and run the OpenHarmony project again, and you can see that the interface created through the Harmony OS project template is displayed on the OpenHarmony preview interface, as shown in the figure below.
2.3 Compile OpenHarmony project
Open the OpenHarmony project, select Build App on the DevEco menu bar, and when compiling to OpenHarmony App, Android and IOS projects will also be generated.
After compiling, you can see the generated Android project, as shown in the figure below.
2.4 Run in Android environment
Since the native files compiled by ArkUI-X can only run on the ARM environment, if the emulator provided by Android Studio is of x64 architecture, the program cannot be previewed.
Next, open the above-generated Android project with Android Studio, wait for the Gradle initialization to complete, and compile, as shown in the figure below.
Then, we can use Android Studio to run the project, or use Android Studio to package the apk.
Similarly, we can also use Xcode to open the source code of iOS, run and package it.
3. Application engineering structure
3.1 Project directory structure
Cross-platform application engineering directory structure, including a set of application engineering templates for ArkUI developers, providing the ability to build OpenHarmony applications, HarmonyOS applications, Android applications, and iOS applications. The project structure directory is as follows:
ArkUI-X应用工程目录结构
├── .arkui-x
│ ├── android // Android平台相关代码
│ └── ios // iOS平台相关代码
├── .hvigor
├── .idea
├── AppScope
├── entry
├── hvigor
├── oh_modules
├── build-profile.json5
├── hvigorfile.ts
├── local.properties
└── oh-package.json5
The idea of this application directory structure design is from the perspective of OpenHarmony application engineering’s native support for cross-platforms. Android and iOS application projects are superimposed on OpenHarmony application engineering. ArkTS code and resources resources are compiled on the OpenHarmony side, and Native codes are still in the respective platform application projects. Compilation is completed in .
3.2 Compile and build
To understand the compilation and construction of OpenHarmony application engineering, you need to understand several concepts:
- ArkTS source code : ArkTS source code generates abc (Ark Byte Code) through the OpenHarmony SDK tool chain, and copies them to Android and iOS application projects respectively, and manages them as platform application resources.
- ArkUI application resources : ArkUI Resources resources are also compiled through the OpenHarmony SDK tool chain, and the compiled ArkUI resources are copied to Android and iOS application projects respectively, and managed as platform application resources.
- ArkUI framework resources : ArkUI framework resources are released with the ArkUI-X SDK, and will be automatically packaged into the ArkUI-X application when the application is built, which can ensure the UX rendering consistency of the ArkUI-X application on each platform.
To sum up, ArkTS compilation products, ArkUI application resources and ArkUI framework resources are managed through assets on the Android platform, and ArkTS compilation products, ArkUI application resources and ArkUI framework resources are managed through Bundle Resources on the iOS platform.
Let's talk about the native application engineering structure:
Android application engineering structure
ArkUI-X Android应用工程
├── app
│ ├── libs
│ │ ├── arkui_android_adapter.jar // ArkUI-X跨平台适配层，在SDK中发布
│ │ └── arm64-v8a
│ │ └── libarkui_android.so // ArkUI-X跨平台引擎库，在SDK中发布
│ ├── src
│ │ ├── androidTest
│ │ ├── main
│ │ │ ├── assets
│ │ │ │ └── arkui-x // ArkUI应用编译后的字节码文件和Resources，作为资源文件存放在assets/arkui-x中
│ │ │ │ ├── entry // ArkUI单个模块的编译结果
│ │ │ │ │ ├── ets // ArkUI单个模块代码的编译结果：包括字节码文件以及sourceMap文件
│ │ │ │ │ │ ├── sourceMaps.map
│ │ │ │ │ │ └── modules.abc
│ │ │ │ │ ├── resources.index // ArkUI单个模块资源的编译结果：resources资源的编译结果
│ │ │ │ │ ├── resources // resources资源中的rawfile资源，不会进行编译。
│ │ │ │ │ └── module.json
│ │ │ │ ├── entry_test // ohosTest，仅仅Debug模式构建包含。
│ │ │ │ └── systemres // ArkUI框架自带的系统资源
│ │ │ ├── java/com/example/mayapp
│ │ │ │ ├── MyApplication.java // 基于StageApplication扩展MyApplication
│ │ │ │ └── EntryEntryAbilityActivity.java // 基于StageActivity扩展EntryEntryAbilityActivity
│ │ │ ├── res
│ │ │ └── AndroidManifest.xml
│ │ └── test
│ ├── build.gradle
│ └── proguard-rules.pro
├── gradle/wrapper
├── build.gradle
├── gradle.properties
├── gradlew
├── gradlew.bat
└── settings.gradle
iOS application engineering structure
ArkUI-X iOS应用工程
├── app.xcodeproj
│ ├── project.xcworkspace
│ └── project.pbxproj
├── app
│ ├── Assets.xcassets
│ ├── Base.Iproj
│ ├── AppDelegate.h
│ ├── AppDelegate.m // 应用入口, 驱动StageApplication的生命周期
│ ├── EntryEntryAbilityViewController.m // 基于StageViewController扩展EntryEntryViewController
│ ├── Info.plist
│ └── main.m
├── arkui-x // ArkUI应用编译后的字节码文件和Resources，作为资源文件存放在assets/arkui-x中
│ ├── entry // ArkUI单个模块的编译结果
│ │ ├── ets // ArkUI单个模块代码的编译结果：包括字节码文件以及sourceMap文件
│ │ │ ├── sourceMaps.map
│ │ │ └── modules.abc
│ │ ├── resources.index // ArkUI单个模块资源的编译结果：resources资源的编译结果
│ │ ├── resources // resources资源中的rawfile资源，不会进行编译。
│ │ └── module.json
│ ├── entry_test // ohosTest，仅仅Debug模式构建包含。
│ └── systemres // ArkUI框架自带的系统资源
└── frameworks // ArkUI跨平台Framework动态库：包含ArkUI-X的框架以及插件
The basic knowledge about the Huawei ArkTS + ArkUI-X cross-platform development framework is introduced here. From it, I can see the shadows of React Native and flutter. In fact, I can also see their shadows from the official architecture diagram. After all, the website Only by standing on the shoulders of giants can we see farther. I believe that with the rise of Hongmeng and the arrival of ArkTS + ArkUI-X technology, domestic self-developed technology will no longer be PPT, no longer a "case".
The code links involved in this article are as follows: https://gitee.com/arkui-x/samples
Reference link:
https://gitee.com/arkui-x
https://juejin.cn/post/7253240772840701989
