跨平台开发鸿蒙原生应用

跨平台开发鸿蒙原生应用

uniapp for HarmonyOS

uni-app

uni-app 是一个使用 Vue.js[1] 开发所有前端应用的框架，开发者编写一套代码，可发布到 HarmonyOS、iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等 8 大关键指标上拥有更强的优势。

功能框架图

uni-app 鸿蒙化版本信息

• HBuilderX 版本需 ≥ 4.24
• HBuilderX 4.24+ 要求 DevEco-Studio 5.0.3.400+，HBuilderX 4.31+ 要求 DevEco-Studio 5.0.3.800+。
• 鸿蒙系统版本 API 12 以上 （DevEco-Studio 有内置鸿蒙模拟器）
• 鸿蒙开发只支持 Vue3，不支持 Vue2、不支持 plus、但支持 nvue

Flutter for OpenHarmony

Flutter 介绍

Flutter 是谷歌的高性能、跨端 UI 框架，可以通过一套代码，支持 iOS、Android、Windows/MAC/Linux 等多个平台，且能达到原生性能。 Flutter 也可以与平台原生代码进行混合开发。在全世界，Flutter 正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

Flutter 架构

Architectural diagram

Flutter 鸿蒙化版本信息

目前基于 Flutter 官方社区 3.22.0 版本构建

• sdk 基础版本链接[2]
• engine 基础版本链接[3]

参考

1. 框架介绍[4]
2. 架构介绍[5]
3. 环境搭建[6]
4. 功能开发[7]
5. 性能调优[8]
6. 调试调测[9]
7. 三方库接入[10]
8. FAQ[11]
9. 规格说明[12]
10. 附录[13]

React Native for OpenHarmony

React Native 介绍

React Native 是一个基于 JavaScript 和 React 框架的开源框架，用于构建原生移动应用程序。它允许开发者使用 React 的组件模型和声明式编程风格来构建跨平台的移动应用。

主要特点和详细介绍：

• 跨平台性：开发者只需要编写一次代码，就可以在 iOS、Android、React Native DOM 等不同平台上运行应用程序，从而提高了开发效率和代码复用率。
• 基于 React：React Native 基于 React 框架，采用了 React 的组件模型和虚拟 DOM 技术。
• 原生性能：React Native 应用程序的业务逻辑是使用 JavaScript 编写的，但它可以调用原生平台提供的 API 和使用原生 UI 组件。这使得 React Native 应用程序可以实现接近原生应用的性能和用户体验，包括流畅的滚动、快速的响应时间。
• 热更新：React Native 支持热更新，整个应用程序可以不经过重新编译直接将更新后的 JavaScript 代码推送到设备上。
• 灵活性和可扩展性：具有很高的灵活性和可扩展性，开发者可以根据自己的需求选择合适的第三方库和工具，来扩展和增强应用程序的功能。

RNOH 架构

ArkTS架构图

如图，React Native for OpenHarmony 在 React Native 的新架构（0.68 以及之后的版本）的基础上，进行了鸿蒙化的适配。按照功能可以进行如下的划分：

• RN 应用代码：开发者实现的业务代码。
• RN 库代码：在 React Native 供开发者使用的组件和 API 的封装与声明。
• JSI（JavaScript Interface）：JavaScript 与 CPP 之间进行通信的 API。
• React Common：所有平台通用的 CPP 代码，用于对 RN 侧传过来的数据进行预处理。
• OpenHarmony 适配代码：接收并处理 React Common 传过来的数据，对接原生的代码，调用 ArkUI 的原生组件与 API。主要包括了两个部分：分别是 TurboModule 与 Fabric。
• OS 代码：对接系统底层功能，根据适配层代码传过来的数据进行渲染，或完成对应的功能。

React Native 鸿蒙化版本信息

当前 React Native 鸿蒙版本基于社区 RN 0.72.5 进行适配，发布版本信息如下：

配套 IDE、SDK 版本和手机 ROM：

参考

• 框架介绍[14]
• 架构介绍[15]
• 版本说明[16]
• 环境搭建[17]
• 功能开发[18]
• 性能调优[19]
• 调试调测[20]
• 三方库接入[21]
• 常见开发场景[22]
• FAQ[23]
• 附录[24]

Taro for OpenHarmony

Taro 介绍

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信[25] / 百度[26] / 支付宝[27] / 字节跳动[28] / QQ[29] / 飞书[30] / 快手[31] 小程序 / H5 / RN 等应用。

Taro 鸿蒙化版本信息

• Taro v4.0.0-beta.0
• OpenHarmony ApI10 支持

ArkUI-X

ArkUI-X 介绍

ArkUI 是一套构建分布式应用的声明式 UI 开发框架。它具备简洁自然的 UI 信息语法、丰富的 UI 组件、多维的状态管理，以及实时界面预览等相关能力，帮助您提升应用开发效率，并能在多种设备上实现生动而流畅的用户体验。详情可参考ArkUI 框架介绍[32]

ArkUI-X 进一步将 ArkUI 扩展到了多个 OS 平台：目前支持 OpenHarmony、HarmonyOS、Android、 iOS，后续会逐步增加更多平台支持。开发者基于一套主代码，就可以构建支持多平台的精美、高性能应用

技术架构

ArkUI 跨平台框架整体架构如下图所示，详细设计请参考ArkUI 跨平台设计总体说明[33]。

ArkUI跨平台架构图

快速入门

• 应用开发快速入门[34]
• 框架开发快速入门[35]
• ArkUI-X 开发者文档[36]
• 示例代码[37]

作者：坚果

官网：https://www.nutpi.net/

来源：坚果派

著作权归作者所有，禁止任何未经授权的个人或组织以任何形式将本案例集及其附属资料、创新、创意、架构设计、算法、衍生作品等用于任何商业目的、盈利活动、各类竞赛(比赛)、直播教学、录播教学、线下课程、书籍编写、教材编写、会议、培训、公益活动、项目课题、毕业设计、毕业论文、学术论文等。商业转载请联系作者获得授权，非商业转载请注明出处。否则追究相关责任。

参考资料

[1]

Vue.js: https://vuejs.org/

[2]

sdk 基础版本链接: https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter%2Fcommit%2F5dcb86f68f239346676ceb1ed1ea385bd215fba1

[3]

engine 基础版本链接: https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fflutter%2Fengine%2Fcommit%2Ff6344b75dcf861d8bf1f1322780b8811f982e31a

[4]

框架介绍: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/01_framework/README.md

[5]

架构介绍: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/02_architecture/README.md

[6]

环境搭建: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/03_environment/README.md

[7]

功能开发: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/04_development/README.md

[8]

性能调优: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/05_performance/README.md

[9]

调试调测: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/06_debug/README.md

[10]

三方库接入: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/07_plugin/README.md

[11]

FAQ: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/08_FAQ/README.md

[12]

规格说明: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/09_specifications/README.md

[13]

附录: https://gitee.com/openharmony-sig/flutter_samples/blob/master/ohos/docs/10_appendix/README.md

[14]

框架介绍: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/框架介绍.md

[15]

架构介绍: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/架构介绍.md

[16]

版本说明: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/版本说明.md

[17]

环境搭建: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/环境搭建.md

[18]

功能开发: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/功能开发.md

[19]

性能调优: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/性能调优.md

[20]

调试调测: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/调试调测.md

[21]

三方库接入: https://gitee.com/react-native-oh-library/usage-docs#rnoh-三方库总览

[22]

常见开发场景: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/常见开发场景.md

[23]

FAQ: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/FAQ.md

[24]

附录: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/附录.md

[25]

微信: https://mp.weixin.qq.com/

[26]

百度: https://smartprogram.baidu.com/

[27]

支付宝: https://mini.open.alipay.com/

[28]

字节跳动: https://developer.open-douyin.com/

[29]

QQ: https://q.qq.com/

[30]

飞书: https://open.feishu.cn/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN

[31]

快手: https://mp.kuaishou.com/

[32]

ArkUI 框架介绍: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/arkui-overview.md

[33]

ArkUI 跨平台设计总体说明: https://gitee.com/arkui-x/docs/blob/master/zh-cn/framework-dev/design/design-overview.md

[34]

应用开发快速入门: https://gitee.com/arkui-x/docs/blob/master/zh-cn/application-dev/quick-start/start-overview.md

[35]

框架开发快速入门: https://gitee.com/arkui-x/docs/blob/master/zh-cn/framework-dev/quick-start/start-overview.md

[36]

ArkUI-X 开发者文档: https://gitee.com/arkui-x/docs/blob/master/zh-cn/README.md

[37]

示例代码: https://gitee.com/arkui-x/samples