一、跨平臺框架介紹

提到跨平臺，要先理解什麼是“平臺”，這裡的平臺，就是指應用程式的執行環境，例如作業系統，或者是Web瀏覽器，具體的像HarmonyOS、Android、iOS、或者瀏覽器，都可以叫做平臺。

跨平臺框架，就是一個應用的開發框架，開發者基於這個框架開發的應用，可以分別在不同的平臺上執行，業界比較知名的比如：React Native、Flutter或者各種小程式框架，都可以稱之為跨平臺框架。

跨平臺的優勢有以下三個方面：

1、可以減少開發者的學習成本；

2、增加程式碼複用，節省開發的成本；

3、減少對各個平臺差異的適配。

undefined

跨平臺框架

假設需求是要在三個平臺上開發同樣功能的應用，如果每個平臺都需要10個單位的工作量，那麼總共將花費30個單位的工作量。如果使用了跨平臺框架，透過程式碼複用，那麼可能只需要一半的工作量，甚至更少，這也是為什麼開發者都在探索不同的跨平臺方案。

二、ArkUI跨平臺能力介紹

為滿足HarmonyOS應用生態建設對於跨平臺開發的需求，我們正在和相關的合作伙伴定向開源構建ArkUI的跨平臺能力，目標先支援HarmonyOS、OpenHarmony、Android、iOS平臺，後續還將逐步增加對更多平臺的支援。這樣，開發者基於一套主程式碼，就可以構建可支援多平臺的精美的高效能應用。

ArkUI的定位包含以下幾個方面：

1、ArkUI作為HarmonyOS原生的應用框架，能力將預置在HarmonyOS中；

2、ArkUI作為所有原子化服務的基礎執行環境，如各類服務及萬能卡片；

3、ArkUI也將作為一個通用的跨平臺框架來開發多平臺的應用。

undefined

ArkUI跨平臺框架整體架構

在ArkUI的架構設計之初就把跨平臺作為一個重要的設計原則，從程式碼的架構上就對各個平臺的呼叫做了解耦，可以方便的移植到不同的平臺，同時使用的圖形引擎也是可以跨平臺的，所有基於它的元件都是自渲染的，所以有較好的效能和渲染一致性。同時使用了NAPI作為JS API的擴充套件機制，可以將相同定義的API擴充套件到不同平臺進行實現。

接下來將從元件支援度、應用工程跨平臺、API能力邊界等6個緯度詳細介紹ArkUI具備的跨平臺能力。

1、跨平臺能力——元件支援度：

ArkUI跨平臺目前具備的一些元件能力，主要為以下兩方面：

1）OpenHarmony支援的基礎元件，都會進行支援。

2）提供一些高階元件能力，比如XComponent和它的相關機制。

2、跨平臺能力——應用工程跨平臺：

對於一個完整的HarmonyOS應用，要做到跨平臺執行，還需要業務邏輯和它使用的API、資源都能跨平臺。

undefined

ArkUI支援跨平臺三個必要條件

對於業務邏輯，使用@ohos的標準API，跨平臺的目標是：使用這些API開發的邏輯儘可能的直接在不同平臺使用。

3、跨平臺能力——API能力邊界：

API大致分為以下幾類，支援策略也略有不同：

1）平臺無關的API，這部分是可以直接移植到不同平臺；

2）依賴平臺橋接的API，需要使用API擴充套件機制在不同平臺分別橋接；

3）不同平臺可能不是一一對應的API，通用的基本能力部分可以在不同平臺分別橋接；

4）平臺專有的API，依賴系統的特有能力，無法做到跨平臺。

undefined

平臺全域性API

4、跨平臺能力——API擴充套件機制：

ArkUI提供了一套API的擴充套件機制，可以方便的去實現相同定義的API在不同平臺上使用。

擴充套件機制整體是複用NAPI機制，也是HarmonyOS上預設擴充套件API的機制，同時提供了JS->C++->Java/ObjectC的程式碼互調的機制。這套機制也同樣適用於三方外掛擴充套件或者開發者自己業務的擴充套件。

undefined

API擴充套件機制

以下面程式碼為例，透過標準的NAPI進行介面的擴充套件，同時也支援註冊一個Java的類，在介面呼叫時會動態載入這個類，最終呼叫到Java的實現中。

// 註冊外掛，匯出JS方法
   static napi_value TestPluginExport(napi_env env, napi_value exports)
   {
       static napi_property_descriptor desc[] = 
   { DECLARE_NAPI_FUNCTION("hello", JSTestPluginHello), };
       NAPI_CALL(env, napi_define_properties(
   env, exports, sizeof(desc) / sizeof(desc[0]), desc));
       return exports;
   }
  
  static napi_value JSTestPluginHello(napi_env env, napi_callback_info info)
  {
      auto plugin = TestPlugin::Create();
      plugin->Hello();
      … 
  }
  
  static void TestPluginJniRegister()
  {
      const char className[] = "ohos.ace.plugin.testplugin.TestPlugin";
      OH_Plugin_RegisterPlugin(&TestPluginJni::Register, className);
  }
  
  extern "C" __attribute__((constructor)) void TestPluginRegister()
  {
      napi_module_register(&testPluginModule);
      OH_Plugin_RunTaskOnPlatform(&TestPluginJniRegister);
  }

// Java 業務邏輯
   package ohos.ace.plugin.testplugin;
  
   public class TestPlugin {
       public TestPlugin(Context context) {
           ...
       }
       
           public void hello() {
          Log.i(LOG_TAG, "hello from java");
      }
  }