如何用一套代码运行跨多操作系统应用
一、跨平台框架介绍
提到跨平台,要先理解什么是“平台”,这里的平台,就是指应用程序的运行环境,例如操作系统,或者是 Web 浏览器,具体的像 HarmonyOS、Android、iOS、或者浏览器,都可以叫做平台。
跨平台框架,就是一个应用的开发框架,开发者基于这个框架开发的应用,可以分别在不同的平台上运行,业界比较知名的比如:React Native、Flutter 或者各种小程序框架,都可以称之为跨平台框架。
跨平台的优势有以下三个方面:
1、可以减少开发者的学习成本;
2、增加代码复用,节省开发的成本;
3、减少对各个平台差异的适配。
![](https://static001.geekbang.org/infoq/2d/2d1dfee98f52554009ecf9908734f75d.png)
跨平台框架
假设需求是要在三个平台上开发同样功能的应用,如果每个平台都需要 10 个单位的工作量,那么总共将花费 30 个单位的工作量。如果使用了跨平台框架,通过代码复用,那么可能只需要一半的工作量,甚至更少,这也是为什么开发者都在探索不同的跨平台方案。
二、ArkUI 跨平台能力介绍
为满足 HarmonyOS 应用生态建设对于跨平台开发的需求,我们正在和相关的合作伙伴定向开源构建 ArkUI 的跨平台能力,目标先支持 HarmonyOS、OpenHarmony、Android、iOS 平台,后续还将逐步增加对更多平台的支持。这样,开发者基于一套主代码,就可以构建可支持多平台的精美的高性能应用。
ArkUI 的定位包含以下几个方面:
1、ArkUI 作为 HarmonyOS 原生的应用框架,能力将预置在 HarmonyOS 中;
2、ArkUI 作为所有原子化服务的基础运行环境,如各类服务及万能卡片;
3、ArkUI 也将作为一个通用的跨平台框架来开发多平台的应用。
![](https://static001.geekbang.org/infoq/b5/b55a86b8938157412e62d866d3af027f.png)
ArkUI 跨平台框架整体架构
在 ArkUI 的架构设计之初就把跨平台作为一个重要的设计原则,从代码的架构上就对各个平台的调用做了解耦,可以方便的移植到不同的平台,同时使用的图形引擎也是可以跨平台的,所有基于它的组件都是自渲染的,所以有较好的性能和渲染一致性。同时使用了 NAPI 作为 JS API 的扩展机制,可以将相同定义的 API 扩展到不同平台进行实现。
接下来将从组件支持度、应用工程跨平台、API 能力边界等 6 个纬度详细介绍 ArkUI 具备的跨平台能力。
1、跨平台能力——组件支持度:
ArkUI 跨平台目前具备的一些组件能力,主要为以下两方面:
1)OpenHarmony 支持的基础组件,都会进行支持。
2)提供一些高级组件能力,比如 XComponent 和它的相关机制。
2、跨平台能力——应用工程跨平台:
对于一个完整的 HarmonyOS 应用,要做到跨平台运行,还需要业务逻辑和它使用的 API、资源都能跨平台。
![](https://static001.geekbang.org/infoq/ee/eea8ae03ddfb73668f52cb5afa882543.png)
ArkUI 支持跨平台三个必要条件
对于业务逻辑,使用 @ohos 的标准 API,跨平台的目标是:使用这些 API 开发的逻辑尽可能的直接在不同平台使用。
3、跨平台能力——API 能力边界:
API 大致分为以下几类,支持策略也略有不同:
1)平台无关的 API,这部分是可以直接移植到不同平台;
2)依赖平台桥接的 API,需要使用 API 扩展机制在不同平台分别桥接;
3)不同平台可能不是一一对应的 API,通用的基本能力部分可以在不同平台分别桥接;
4)平台专有的 API,依赖系统的特有能力,无法做到跨平台。
![](https://static001.geekbang.org/infoq/7d/7df84386e3be8694250d928947aace1b.png)
平台全局 API
4、跨平台能力——API 扩展机制:
ArkUI 提供了一套 API 的扩展机制,可以方便的去实现相同定义的 API 在不同平台上使用。扩展机制整体是复用 NAPI 机制,也是 HarmonyOS 上默认扩展 API 的机制,同时提供了 JS->C++->Java/ObjectC 的代码互调的机制。这套机制也同样适用于三方插件扩展或者开发者自己业务的扩展。
![](https://static001.geekbang.org/infoq/31/319eea1f1c47481ca708b822c32ad3ce.png)
API 扩展机制
以下面代码为例,通过标准的 NAPI 进行接口的扩展,同时也支持注册一个 Java 的类,在接口调用时会动态加载这个类,最终调用到 Java 的实现中。
5、跨平台能力——命令行工具
ArkUI 还将提供一个命令行工具,可以支持 Windows、Mac、Linux 的开发环境,支持创建跨平台工程,可以构建出 HarmonyOS、Android 以及 iOS 的应用程序,并可以生成目标平台的开发工程,如 Android Studio/XCode。
一些常用的命令如下,涵盖了从创建工程到运行打包的常用功能:
![](https://static001.geekbang.org/infoq/b8/b8d89aad190ead1f2b1a85abf7c6a3d3.png)
命令行工具
6、跨平台能力——DevEco Studio 跨平台支持:
后续还将在 DevEco Studio 上加入对跨平台的支持,增加能力如下:
1)创建工程时可以通过跨平台模板创建一个支持跨平台的工程;
2)可以支持编译出 Android/ iOS 上的安装调试包;
3)支持发现和连接不同设备真机和模拟器;
4)支持应用工程导出为 Android 应用工程和 iOS 应用工程,方便原生能力扩充或混合开发。
三、如何使用 ArkUI 开发跨平台应用
了解了 ArkUI 的跨平台能力之后,下面我们用“健康饮食”应用开发具体案例介绍使用 ArkUI 开发跨 HarmonyOS、Android 及 iOS 三大平台的完整流程。
![](https://static001.geekbang.org/infoq/92/92279709872e13f1f3efd636f268a8e8.png)
健康饮食
1、应用工程创建:
首先创建一个跨平台工程,我们以使用命令行工具为例。
1)先使用 npm install 安装相关的依赖包;
2)通过 ace check 检查运行环境,可以根据提示安装相关依赖的软件;
3)通过 ace create 创建跨平台应用的工程,可以支持类 Web 范式或声明式范式。创建好的工程的目录结构如下图所示,可以看到不同平台的工程文件,同时这里的 source 目录下,存放的就是跨平台通用的代码结构。
![](https://static001.geekbang.org/infoq/10/105ef4a3a9a52c53f58e9ee009ad24a8.png)
跨平台工程目录结构
2、开发及调试:开发应用的过程就和开发一个普通的 HarmonyOS 应用一样,进行 UI 界面与逻辑的设计,使用 DevEco Studio 进行开发,然后实机运行及调试。
![](https://static001.geekbang.org/infoq/64/643bd7565fe441814786d086b1550f7c.png)
“健康饮食”开发
3、构建与发布:有两种方式进行构建,一是通过命令行“ace build”可以直接进行构建;二是通过目标平台的工程进行构建,如下图所示,可以直接通过 Android Studio 或 XCode 构建出对应平台的安装包。
![](https://static001.geekbang.org/infoq/70/702241d7beb85825a215d1a3b527fbfd.png)
使用 Android Studio 构建
![](https://static001.geekbang.org/infoq/f2/f2e9e0d7eb012834fe7aa76d52b3c17b.png)
使用 XCode 构建
4、安装与运行:构建完成后,可以通过“ace install”命令进行安装运行,下面就是“健康饮食”同一个应用在 HarmonyOS 端、Android 端和 iOS 端上的运行效果。
![](https://static001.geekbang.org/infoq/16/1676cb34a0fb6011aeebd452808441a4.png)
HarmonyOS 端运行效果
![](https://static001.geekbang.org/infoq/5a/5a21004c1d21abf5b974552bb3469f9d.png)
Android 端运行效果 iOS 端运行效果
四、总结与展望
上面提到的这些 ArkUI 跨平台能力,将在近期进行开源,感兴趣的开发者可以持续关注。接下来 ArkUI 会围绕各平台的能力进行构建,进一步丰富跨平台的组件,并持续对性能、内存、包大小等方向进行优化,不断完善 @ohos 的 API 插件包,进一步提升开发者对跨平台的诉求和体验。
![](https://static001.geekbang.org/infoq/ba/bafc3a1a0a9f37eca110d660f5573dd6.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
评论