一

跨平臺(tái)框架介紹

提到跨平臺(tái)，要先理解什么是“平臺(tái)”，這里的平臺(tái)，就是指應(yīng)用程序的運(yùn)行環(huán)境，例如操作系統(tǒng)，或者是Web瀏覽器，具體的像HarmonyOS、Android、iOS、或者瀏覽器，都可以叫做平臺(tái)。

跨平臺(tái)框架，就是一個(gè)應(yīng)用的開發(fā)框架，開發(fā)者基于這個(gè)框架開發(fā)的應(yīng)用，可以分別在不同的平臺(tái)上運(yùn)行，業(yè)界比較知名的比如：React Native、Flutter或者各種小程序框架，都可以稱之為跨平臺(tái)框架。

跨平臺(tái)的優(yōu)勢(shì)有以下三個(gè)方面：

1、可以減少開發(fā)者的學(xué)習(xí)成本；

2、增加代碼復(fù)用，節(jié)省開發(fā)的成本；

3、減少對(duì)各個(gè)平臺(tái)差異的適配。

跨平臺(tái)框架

假設(shè)需求是要在三個(gè)平臺(tái)上開發(fā)同樣功能的應(yīng)用，如果每個(gè)平臺(tái)都需要10個(gè)單位的工作量，那么總共將花費(fèi)30個(gè)單位的工作量。如果使用了跨平臺(tái)框架，通過(guò)代碼復(fù)用，那么可能只需要一半的工作量，甚至更少，這也是為什么開發(fā)者都在探索不同的跨平臺(tái)方案。

二

ArkUI跨平臺(tái)能力介紹

為滿足HarmonyOS應(yīng)用生態(tài)建設(shè)對(duì)于跨平臺(tái)開發(fā)的需求，我們正在和相關(guān)的合作伙伴定向開源構(gòu)建ArkUI的跨平臺(tái)能力，目標(biāo)先支持HarmonyOS、OpenHarmony、Android、iOS平臺(tái)，后續(xù)還將逐步增加對(duì)更多平臺(tái)的支持。這樣，開發(fā)者基于一套主代碼，就可以構(gòu)建可支持多平臺(tái)的精美的高性能應(yīng)用。

ArkUI的定位包含以下幾個(gè)方面：

1、ArkUI作為HarmonyOS原生的應(yīng)用框架，能力將預(yù)置在HarmonyOS中；

2、ArkUI作為所有原子化服務(wù)的基礎(chǔ)運(yùn)行環(huán)境，如各類服務(wù)及萬(wàn)能卡片；

3、ArkUI也將作為一個(gè)通用的跨平臺(tái)框架來(lái)開發(fā)多平臺(tái)的應(yīng)用。

ArkUI跨平臺(tái)框架整體架構(gòu)

在ArkUI的架構(gòu)設(shè)計(jì)之初就把跨平臺(tái)作為一個(gè)重要的設(shè)計(jì)原則，從代碼的架構(gòu)上就對(duì)各個(gè)平臺(tái)的調(diào)用做了解耦，可以方便的移植到不同的平臺(tái)，同時(shí)使用的圖形引擎也是可以跨平臺(tái)的，所有基于它的組件都是自渲染的，所以有較好的性能和渲染一致性。同時(shí)使用了NAPI作為JS API的擴(kuò)展機(jī)制，可以將相同定義的API擴(kuò)展到不同平臺(tái)進(jìn)行實(shí)現(xiàn)。

接下來(lái)將從組件支持度、應(yīng)用工程跨平臺(tái)、API能力邊界等6個(gè)緯度詳細(xì)介紹ArkUI具備的跨平臺(tái)能力。

1、跨平臺(tái)能力——組件支持度：

ArkUI跨平臺(tái)目前具備的一些組件能力，主要為以下兩方面：

1）OpenHarmony支持的基礎(chǔ)組件，都會(huì)進(jìn)行支持。

2）提供一些高級(jí)組件能力，比如XComponent和它的相關(guān)機(jī)制。

2、跨平臺(tái)能力——應(yīng)用工程跨平臺(tái)：

對(duì)于一個(gè)完整的HarmonyOS應(yīng)用，要做到跨平臺(tái)運(yùn)行，還需要業(yè)務(wù)邏輯和它使用的API、資源都能跨平臺(tái)。

ArkUI支持跨平臺(tái)三個(gè)必要條件

對(duì)于業(yè)務(wù)邏輯，使用@ohos的標(biāo)準(zhǔn)API，跨平臺(tái)的目標(biāo)是：使用這些API開發(fā)的邏輯盡可能的直接在不同平臺(tái)使用。

3、跨平臺(tái)能力——API能力邊界：

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

1）平臺(tái)無(wú)關(guān)的API，這部分是可以直接移植到不同平臺(tái)；

2）依賴平臺(tái)橋接的API，需要使用API擴(kuò)展機(jī)制在不同平臺(tái)分別橋接；

3）不同平臺(tái)可能不是一一對(duì)應(yīng)的API，通用的基本能力部分可以在不同平臺(tái)分別橋接；

4）平臺(tái)專有的API，依賴系統(tǒng)的特有能力，無(wú)法做到跨平臺(tái)。

平臺(tái)全局API

4、跨平臺(tái)能力——API擴(kuò)展機(jī)制：

ArkUI提供了一套API的擴(kuò)展機(jī)制，可以方便的去實(shí)現(xiàn)相同定義的API在不同平臺(tái)上使用。

擴(kuò)展機(jī)制整體是復(fù)用NAPI機(jī)制，也是HarmonyOS上默認(rèn)擴(kuò)展API的機(jī)制，同時(shí)提供了JS->C++->Java/ObjectC的代碼互調(diào)的機(jī)制。這套機(jī)制也同樣適用于三方插件擴(kuò)展或者開發(fā)者自己業(yè)務(wù)的擴(kuò)展。

API擴(kuò)展機(jī)制

以下面代碼為例，通過(guò)標(biāo)準(zhǔn)的NAPI進(jìn)行接口的擴(kuò)展，同時(shí)也支持注冊(cè)一個(gè)Java的類，在接口調(diào)用時(shí)會(huì)動(dòng)態(tài)加載這個(gè)類，最終調(diào)用到Java的實(shí)現(xiàn)中。

1//注冊(cè)插件，導(dǎo)出JS方法

2static napi_value TestPluginExport(napi_env env, napi_value exports)

3{

4static napi_property_descriptor desc[] =

5{ DECLARE_NAPI_FUNCTION("hello", JSTestPluginHello), };

6NAPI_CALL(env, napi_define_properties(

7env, exports, sizeof(desc) / sizeof(desc[0]), desc));

8return exports;

9}

10

11static napi_value JSTestPluginHello(napi_env env, napi_callback_info info)

12{

13auto plugin = TestPlugin::Create();

14plugin->Hello();

15…

16}

17

18static void TestPluginJniRegister()

19{

20const char className[] = "ohos.ace.plugin.testplugin.TestPlugin";

21OH_Plugin_RegisterPlugin(&TestPluginJni::Register, className);

22}

23

24extern "C" __attribute__((constructor)) void TestPluginRegister()

25{

26napi_module_register(&testPluginModule);

27OH_Plugin_RunTaskOnPlatform(&TestPluginJniRegister);

28}

（左右滑動(dòng)，查看更多）

1// Java業(yè)務(wù)邏輯

2package ohos.ace.plugin.testplugin;

3

4public class TestPlugin {

5public TestPlugin(Context context) {

6...

7}

8

9public void hello() {

10Log.i(LOG_TAG, "hello from java");

11}

12}

（左右滑動(dòng)，查看更多）

5、跨平臺(tái)能力——命令行工具

ArkUI還將提供一個(gè)命令行工具，可以支持Windows、Mac、Linux的開發(fā)環(huán)境，支持創(chuàng)建跨平臺(tái)工程，可以構(gòu)建出HarmonyOS、Android以及iOS的應(yīng)用程序，并可以生成目標(biāo)平臺(tái)的開發(fā)工程，如Android Studio/XCode。

一些常用的命令如下，涵蓋了從創(chuàng)建工程到運(yùn)行打包的常用功能：

命令行工具

6、跨平臺(tái)能力——DevEco Studio跨平臺(tái)支持：

后續(xù)還將在DevEco Studio上加入對(duì)跨平臺(tái)的支持，增加能力如下：

1）創(chuàng)建工程時(shí)可以通過(guò)跨平臺(tái)模板創(chuàng)建一個(gè)支持跨平臺(tái)的工程；

2）可以支持編譯出Android/ iOS上的安裝調(diào)試包；

3）支持發(fā)現(xiàn)和連接不同設(shè)備真機(jī)和模擬器；

4）支持應(yīng)用工程導(dǎo)出為Android應(yīng)用工程和iOS應(yīng)用工程，方便原生能力擴(kuò)充或混合開發(fā)。

三

如何使用ArkUI開發(fā)跨平臺(tái)應(yīng)用

了解了ArkUI的跨平臺(tái)能力之后，下面我們用“健康飲食”應(yīng)用開發(fā)具體案例介紹使用ArkUI開發(fā)跨HarmonyOS、Android及iOS三大平臺(tái)的完整流程。

健康飲食

1、應(yīng)用工程創(chuàng)建：

首先創(chuàng)建一個(gè)跨平臺(tái)工程，我們以使用命令行工具為例。

1）先使用npm install安裝相關(guān)的依賴包；

2）通過(guò)ace check檢查運(yùn)行環(huán)境，可以根據(jù)提示安裝相關(guān)依賴的軟件；

3）通過(guò)ace create創(chuàng)建跨平臺(tái)應(yīng)用的工程，可以支持類Web范式或聲明式范式。

創(chuàng)建好的工程的目錄結(jié)構(gòu)如下圖所示，可以看到不同平臺(tái)的工程文件，同時(shí)這里的source目錄下，存放的就是跨平臺(tái)通用的代碼結(jié)構(gòu)。

跨平臺(tái)工程目錄結(jié)構(gòu)

2、開發(fā)及調(diào)試：

開發(fā)應(yīng)用的過(guò)程就和開發(fā)一個(gè)普通的HarmonyOS應(yīng)用一樣，進(jìn)行UI界面與邏輯的設(shè)計(jì)，使用DevEco Studio進(jìn)行開發(fā)，然后實(shí)機(jī)運(yùn)行及調(diào)試。

“健康飲食”開發(fā)

3、構(gòu)建與發(fā)布：

有兩種方式進(jìn)行構(gòu)建，一是通過(guò)命令行“ace build”可以直接進(jìn)行構(gòu)建；二是通過(guò)目標(biāo)平臺(tái)的工程進(jìn)行構(gòu)建，如下圖所示，可以直接通過(guò)Android Studio或XCode構(gòu)建出對(duì)應(yīng)平臺(tái)的安裝包。

使用Android Studio構(gòu)建

使用XCode構(gòu)建

4、安裝與運(yùn)行：

構(gòu)建完成后，可以通過(guò)“ace install”命令進(jìn)行安裝運(yùn)行，下面就是“健康飲食”同一個(gè)應(yīng)用在HarmonyOS端、Android端和iOS端上的運(yùn)行效果。

四

總結(jié)與展望

上面提到的這些ArkUI跨平臺(tái)能力，將在近期進(jìn)行開源，感興趣的開發(fā)者可以持續(xù)關(guān)注。接下來(lái)ArkUI會(huì)圍繞各平臺(tái)的能力進(jìn)行構(gòu)建，進(jìn)一步豐富跨平臺(tái)的組件，并持續(xù)對(duì)性能、內(nèi)存、包大小等方向進(jìn)行優(yōu)化，不斷完善@ohos的API插件包，進(jìn)一步提升開發(fā)者對(duì)跨平臺(tái)的訴求和體驗(yàn)。

END

想了解更多HarmonyOS技術(shù)？

后臺(tái)留言給我們

立刻安排！