[HarmonyOS development] ArkUI-X cross-platform framework (using ArkTs to develop Android & IOS)

The ArkUI-X cross-platform framework further extends the ArkUI development framework to multiple OS platforms. It currently supports OpenHarmony, HarmonyOS, Android, and iOS, and more platform support will be gradually added in the future. Based on one master code, developers can build beautiful, high-performance applications that support multiple platforms.

1. What are the cross-platform frameworks?

1、React Native

React Native is an open source framework based on JavaScript and React, developed and maintained by Facebook.
It uses a syntax called JSX to describe the structure and behavior of components as declarative code.
React Native provides the ability to access native features of the device, and by using built-in native components and modules, developers can create applications with a native user experience.
Because React Native code can be shared and reused across multiple platforms, it makes developing and maintaining cross-platform applications more efficient.

2、Flutter

Flutter is an open source framework developed by Google for building high-performance, cross-platform mobile applications.
Flutter uses the Dart language, which has modern syntax and features, including strong typing, asynchronous programming, and hot reloading.
Flutter provides its own rendering engine to implement high-performance user interfaces and can run on iOS, Android and Web platforms.
By using Flutter, developers can create beautiful, responsive, and native-like applications from a single code base.

3、Xamarin

Xamarin is a cross-platform mobile application development framework launched by Microsoft.
It uses the C# language and .NET platform, and developers can use a shared code base to build native applications, including iOS, Android and Windows.
Xamarin provides access to device functions and native APIs. Developers can use Xamarin.Essentials to access commonly used device functions, such as cameras, sensors, etc.
Xamarin also provides a rich library of tools and components to increase development productivity and simplify the creation of cross-platform applications.

4、Ionic

Ionic is an open source framework based on web technology for building cross-platform mobile applications.
It uses HTML, CSS, and JavaScript to build applications and run them on different platforms by using WebView.
Ionic combines the Angular framework and Cordova plug-ins to provide rich UI components and access to native functions.
With Ionic, developers can use a single code base to create mobile applications and deploy them on iOS, Android and web platforms.

5、NativeScript

NativeScript is an open source, cross-platform mobile application framework that allows developers to build native applications using JavaScript, TypeScript, or Angular.
It converts JavaScript code into native code by using native components and APIs, as well as the built-in JavaScript runtime.
NativeScript provides access to device capabilities, and developers can use plug-ins to extend the functionality of their applications.
NativeScript also supports Angular, Vue.js and React frameworks to meet the different needs of developers.

6、sleep app

UniApp uses Vue.js as the main development framework and provides a set of components and APIs based on Vue.js, allowing developers to build cross-platform applications using familiar development methods. Developers can write code once and then go through the compilation and conversion process to generate corresponding native applications on different platforms.
UniApp provides the ability to access device functions and native APIs. Developers can use plug-ins or built-in APIs to interact with the device, such as accessing cameras, geolocation, sensors, etc. In addition, UniApp also provides some platform-specific extension capabilities and optimization options to provide better user experience and performance.

2. OpenHarmony’s cross-platform ArkUI-X

1. Use C++ to write the overall back-end engine code to maintain portability across multiple platforms, minimize platform dependence, and reduce platform porting costs.

2. The overall drawing adopts a self-rendering mechanism to reduce platform dependence and further improve the consistency of the drawing effect.

3. Abstract the platform adaptation layer and platform bridging layer to facilitate the adaptation of different platforms.

1. Download DevEco Studo 4.0 beta2+

IDE download address width=device-width,initial-scale=1.0 https://docs.openharmony.cn/pages/v4.0/zh-cn/release-notes/OpenHarmony-v4.0-release.md/#% E9%85%8D%E5%A5%97%E5%85%B3%E7%B3%BB

2. Install the ArkUI-X SDK

2.1 Install OpenHarmony API10

2.1 Install ArkUI-X SDK

3. Create ArkUI-X project

3.1 New => Import => Import sample project

3.2 Develop ArkUI-X based on the sample Hello World project

Change Harmony to OpenHarmony , and then select the sample project under ArkUI-X

3.3 After creation, automatically check the system environment and install dependencies

4. Catalog description

After the compilation is completed, directly import the Android / IOS in .arkui-x into the corresponding platform.

ArkUI-X application project 
  ├── .arkui-x 
  │ ├── android // Android platform related code 
  │ └── ios // iOS platform related code 
  ├── .hvigor 
  ├── .idea 
  ├── AppScope 
  ├─ ─ entry 
  ├── hvigor 
  ├── oh_modules 
  ├── build-profile.json5 
  ├── hvigorfile.ts 
  ├── local.properties 
  └── oh-package.json5

Looking forward to being compatible with more platforms, eg: Linux, Windows, etc...

3. Extension: XComponent (dynamic loading/ EGL/OpenGLES rendering )

I came across an interesting component and used it when developing the scan function. Record it.

As a drawing component, the XComponent component is usually used to meet developers' more complex custom drawing needs, such as the display of camera preview streams and the drawing of game screens.

It can implement different functions by specifying its type field. There are mainly two "surface" and "component" fields to choose from.

For the "surface" type, developers can pass relevant data into the "surface" owned separately by XComponent to render the screen.

The "component" type is mainly used to dynamically load and display content.

name	describe
SURFACE	Used for EGL/OpenGLES and media data writing, the drawing content customized by the developer is displayed individually on the screen.
COMPONENT	XComponent will become a container component and can perform non-UI logic in it to dynamically load display content.
TEXTURE	Used for EGL/OpenGLES and media data writing, the developer's customized drawing content will be synthesized with the content of the XComponent component and displayed on the screen.

illustrate:

When type is COMPONENT ("component"), XComponent serves as a container, and subcomponents are laid out in the vertical direction:

Align format vertically: FlexAlign.Start

Horizontally aligned format: FlexAlign.Center

@Builder
function addText(label: string): void {
  Text(label)
    .fontSize(40)
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello XComponent'
  @State messageCommon: string = 'Hello World'
  build() {
    Row() {
      Column() {
        XComponent({ id: 'xcomponentId-container', type: 'component' }) {
          addText(this.message)
          Divider()
            .margin(4)
            .strokeWidth(2)
            .color('#F1F3F5')
            .width("80%")
          Column() {
            Text(this.messageCommon)
              .fontSize(30)
          }
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

Dynamically load @Builder 's addText function