[HarmonyOS 開発] ArkUI-X クロスプラットフォームフレームワーク (ArkTs を使用した Android および IOS の開発)

ArkUI-X クロスプラットフォームフレームワークは、ArkUI 開発フレームワークを複数の OS プラットフォームにさらに拡張し、現在 OpenHarmony、HarmonyOS、Android、iOS をサポートしていますが、将来的にはさらに多くのプラットフォームのサポートが追加される予定です。開発者は 1 つのマスターコードに基づいて、複数のプラットフォームをサポートする美しく高性能なアプリケーションを構築できます。

1. クロスプラットフォームフレームワークとは何ですか?

1、リアクトネイティブ

React Native は、JavaScript と React をベースにしたオープンソースフレームワークで、Facebook によって開発および保守されています。
JSX と呼ばれる構文を使用して、コンポーネントの構造と動作を宣言コードとして記述します。
React Native は、デバイスのネイティブ機能にアクセスする機能を提供し、組み込みのネイティブコンポーネントとモジュールを使用することで、開発者はネイティブのユーザーエクスペリエンスを備えたアプリケーションを作成できます。
React Native コードは複数のプラットフォーム間で共有および再利用できるため、クロスプラットフォームアプリケーションの開発と保守がより効率的になります。

2、フラッター

Flutter は、高性能のクロスプラットフォームモバイルアプリケーションを構築するために Google によって開発されたオープンソースフレームワークです。
Flutter は、強力な型指定、非同期プログラミング、ホットリロードなどの最新の構文と機能を備えた Dart 言語を使用します。
Flutter は、高パフォーマンスのユーザーインターフェイスを実装するための独自のレンダリングエンジンを提供し、iOS、Android、および Web プラットフォームで実行できます。
Flutter を使用すると、開発者は単一のコードベースから、美しく応答性の高いネイティブのようなアプリケーションを作成できます。

3、Xamarin

Xamarin は、Microsoft によって開始されたクロスプラットフォームのモバイルアプリケーション開発フレームワークです。
C# 言語と .NET プラットフォームを使用しており、開発者は共有コードベースを使用して、iOS、Android、Windows などのネイティブアプリケーションを構築できます。
Xamarin は、デバイス関数とネイティブ API へのアクセスを提供します。開発者は、Xamarin.Essentials を使用して、カメラやセンサーなどの一般的に使用されるデバイス関数にアクセスできます。
Xamarin は、開発の生産性を向上させ、クロスプラットフォームアプリケーションの作成を簡素化するためのツールとコンポーネントの豊富なライブラリも提供します。

4、イオン性

Ionic は、クロスプラットフォームのモバイルアプリケーションを構築するための Web テクノロジーに基づくオープンソースフレームワークです。
HTML、CSS、JavaScript を使用してアプリケーションを構築し、WebView を使用してさまざまなプラットフォームで実行します。
Ionic は、Angular フレームワークと Cordova プラグインを組み合わせて、豊富な UI コンポーネントとネイティブ機能へのアクセスを提供します。
Ionic を使用すると、開発者は単一のコードベースを使用してモバイルアプリケーションを作成し、iOS、Android、および Web プラットフォームに展開できます。

5、ネイティブスクリプト

NativeScript は、開発者が JavaScript、TypeScript、または Angular を使用してネイティブアプリケーションを構築できるようにする、オープンソースのクロスプラットフォームモバイルアプリケーションフレームワークです。
ネイティブコンポーネントと API、および組み込みの JavaScript ランタイムを使用して、JavaScript コードをネイティブコードに変換します。
NativeScript はデバイス機能へのアクセスを提供し、開発者はプラグインを使用してアプリケーションの機能を拡張できます。
NativeScript は、開発者のさまざまなニーズを満たすために、Angular、Vue.js、および React フレームワークもサポートしています。

6、睡眠アプリ

UniApp は、Vue.js を主要な開発フレームワークとして使用し、Vue.js に基づいた一連のコンポーネントと API を提供するため、開発者は使い慣れた開発方法を使用してクロスプラットフォームアプリケーションを構築できます。開発者はコードを一度記述するだけで、コンパイルと変換のプロセスを経て、さまざまなプラットフォーム上で対応するネイティブアプリケーションを生成できます。
UniApp は、デバイス機能とネイティブ API にアクセスする機能を提供します。開発者は、プラグインまたは組み込み API を使用して、カメラ、位置情報、センサーなどへのアクセスなど、デバイスと対話できます。さらに、UniApp は、より優れたユーザーエクスペリエンスとパフォーマンスを提供するために、いくつかのプラットフォーム固有の拡張機能と最適化オプションも提供します。

2. OpenHarmony のクロスプラットフォーム ArkUI-X

1. C++ を使用してバックエンドエンジンコード全体を記述し、複数のプラットフォーム間での移植性を維持し、プラットフォームへの依存を最小限に抑え、プラットフォームの移植コストを削減します。

2. 全体的な描画には、プラットフォームへの依存を軽減し、描画効果の一貫性をさらに向上させるための自己レンダリングメカニズムが採用されています。

3. 異なるプラットフォームの適応を容易にするために、プラットフォームアダプテーション層とプラットフォームブリッジング層を抽象化します。

1. DevEco Studo 4.0 beta2+ をダウンロード

IDE ダウンロードアドレス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.ArkUI-X SDKをインストールする

2.1 OpenHarmony API10のインストール

2.1 ArkUI-X SDKのインストール

3.ArkUI-Xプロジェクトを作成する

3.1 新規 => インポート => サンプルプロジェクトをインポート

3.2 サンプル Hello World プロジェクトに基づいて ArkUI-X を開発する

Harmony をOpenHarmonyに変更し、ArkUI-Xの下のサンプルプロジェクトを選択します。

3.3 作成後、システム環境を自動的にチェックし、依存関係をインストールします

4. カタログの説明

コンパイルが完了したら、.arkui-x内のAndroid / IOSを対応するプラットフォームに直接インポートします。

ArkUI-X アプリケーション プロジェクト
  ∴── .arkui-x 
  │ §── android // Android プラットフォーム関連コード
  │ └── ios // iOS プラットフォーム関連コード
  §── .hvigor 
  §── .idea 
  §── AppScope 
  §── ─ エントリ
  §── hvigor 
  ├── oh_modules 
  §── build-profile.json5 
  §── hvigorfile.ts 
  §── local.properties 
  └── oh-package.json5

Linux、Windows など、より多くのプラットフォームとの互換性を期待しています。

3.拡張機能: XComponent (動的ロード/ EGL/OpenGLES レンダリング)

スキャン機能の開発時に面白いコンポーネントを見つけたので使用したので記録します。

描画コンポーネントとして、 XComponentコンポーネントは通常、カメラプレビューストリームの表示やゲーム画面の描画など、開発者のより複雑なカスタム描画ニーズを満たすために使用されます。

type フィールドを指定することでさまざまな機能を実装することができ、主に「surface」フィールドと「component」フィールドの 2 つから選択できます。

「サーフェス」タイプの場合、開発者は、XComponent が別途所有する「サーフェス」に関連データを渡して画面をレンダリングできます。

「コンポーネント」タイプは、主にコンテンツを動的にロードして表示するために使用されます。

名前	説明する
表面	EGL/OpenGLESやメディアデータの書き込みに使用され、開発者がカスタマイズした描画内容を個別に画面上に表示します。
成分	XComponent はコンテナコンポーネントになり、その中で非 UI ロジックを実行して表示コンテンツを動的にロードできます。
テクスチャ	EGL/OpenGLES およびメディアデータの書き込みに使用され、開発者がカスタマイズした描画コンテンツが XComponent コンポーネントのコンテンツと合成され、画面に表示されます。

例証します:

type が COMPONENT (「コンポーネント」) の場合、XComponent はコンテナーとして機能し、サブコンポーネントは垂直方向にレイアウトされます。

フォーマットを垂直方向に整列: FlexAlign.Start

水平方向に整列された形式: 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%')
  }
}

@BuilderのaddText関数を動的にロードする

[HarmonyOS 開発] ArkUI-X クロスプラットフォーム フレームワーク (ArkTs を使用した Android および IOS の開発)

1. クロスプラットフォーム フレームワークとは何ですか?