【鸿蒙实战开发】跨平台框架ArkUI-X详解

前言

ArkUI-X是一个声明式UI开发框架，可以让我们使用ArkTS写跨端UI，目前支持OpenHarmony、HarmonyOS、Android、iOS四个平台

设计总体说明

gitee.com/arkui-x/doc…

总体视图

设计思路如下：

1.采用 C++ 编写整体后端引擎代码，保持在多平台的可移植性，最小化平台依赖，降低平台移植成本。
2.整体绘制采用自渲染机制，降低平台依赖，同时进一步提升绘制效果的一致性。
3.抽象出平台适配层以及平台桥接层，以便不同平台的适配。

跨平台技术

1.研发模型，兼容OpenHarmony应用的Stage开发模型，支持基于ArkTS的声明式开发范式，可跨平台。
2.声明式UI后端引擎，包括布局，渲染，C++ UI组件，事件机制等，可跨平台。
3.API扩展机制，基于NAPI机制，可跨平台。 不同平台需要各自扩展具体的API实现。
4.工具链/SDK, 工具链可跨平台，SDK需基于不同平台构建
5.ArkUI依赖的ArkTS引擎以及图形引擎，也可跨平台

构建系统

ArkUI-X编译构建提供了一套基于GN和Ninja的编译构建框架

1.基础构建基于OpenHarmony的build仓
2.在OpenHarmony构建基础上新增Android和iOS编译工具链，以支持ArkUI跨平台SDK编译输出

SDK结构设计

ArkUI-X SDK目录结构介绍 gitee.com/arkui-x/doc…

启动入口

开发框架对应平台语言实现的Entrance，提供不同平台的基础入口环境

以Android为例

Stage模型下，Ability生命周期的入口为StageAbility，生命周期一直会通知到JsAbility，执行用户的生命周期回调方法，UI的页面是在onWindowStageCreated的生命周期中，调用Window的loadContent接口进行加载，创建ArkUI的实例并初始化渲染管线，将页面进行渲染显示

API扩展机制

JS API扩展机制，用于Native接口能力暴露到JS层，该机制直接复用OpenHarmony上的统一封装机制，扩展API （C++实现），并实现部分内置API
JS API需要遵循OpenHarmony的API定义，在不同平台上通过API扩展机制进行扩展。

环境配置

配置开发环境 gitee.com/arkui-x/doc…
下载DevEco Studio
developer.huawei.com/consumer/cn…

配置OpenHarmonySDK

gitee.com/arkui-x/doc…
点击Edit指定下载目录，等待下载完成

配置Android SDK安装目录环境变量

gitee.com/arkui-x/doc…
配置环境变量ANDROID_HOME，设置Android SDK安装目录
export ANDROID_HOME=$HOME/Library/Android/sdk

配置 ArkUIX SDK

gitee.com/arkui-x/doc…
点击Edit指定下载目录，等待下载完成

配置ACE Tools(非必选)

gitee.com/arkui-x/doc…
如果你需要使用命令行打包和编译，可以配置ACE Tool。主要是配置OHPM和ARKUIX_SDK_HOME
环境变量

配置环境变量

export ARKUIX_SDK_HOME=/path-to-arkui-x-sdk
export PATH=${ARKUIX_SDK_HOME}/版本/arkui-x/toolchains/bin:$PATH

我这里是配置到了~/Documents/huawei/arkuix_sdk

# Android sdk
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/emulator
# 华为
export DecEcoIDE_SDK_Home=/Applications/DevEco-Studio.app/Contents
## 这里DEVECO_SDK_HOME名字不能改，ace需要使用到
export DEVECO_SDK_HOME=$DecEcoIDE_SDK_Home/sdk
# HDC_SERVER_PORT和HDC_SDK_PATH 是hdc需要配置的环境变量
export HDC_SERVER_PORT=7035
export HDC_SDK_PATH=$DEVECO_SDK_HOME/HarmonyOS-NEXT-DB1/openharmony/toolchains
export PATH=$HDC_SDK_PATH:$PATH
export PATH=$DecEcoIDE_SDK_Home/tools/hvigor/bin:$PATH
export PATH=$DecEcoIDE_SDK_Home/tools/ohpm/bin:$PATH

# 引入@arkui-x.bridge的时候需要用到
## 这里ARKUIX_SDK_HOME名字不能改，ace需要使用到
export ARKUIX_SDK_HOME=${HOME}/Documents/huawei/arkuix_sdk
export PATH=$ARKUIX_SDK_HOME/12/arkui-x/toolchains/bin:$PATH

# 仓颉
export CANGJIE_HOME=${HOME}/Documents/cangjie/cangjie
export PATH=${CANGJIE_HOME}/bin:${CANGJIE_HOME}/tools/bin:$PATH
hw_arch="aarch64"
export DYLD_LIBRARY_PATH=${CANGJIE_HOME}/runtime/lib/darwin_${hw_arch}_llvm:${DYLD_LIBRARY_PATH}

应用开发

应用开发指导 gitee.com/arkui-x/doc…

第一个例子

gitee.com/arkui-x/doc…
gitee.com/arkui-x/doc…
使用DevEco Studio创建一个空的ArkUI-X工程

进行编译输出

编译后的ArkTS代码、资源和平台胶水代码已生成到Android和iOS应用工程中

应用包结构

ArkUI-X应用目录结构设计思想

1.从OpenHarmony应用工程原生支持跨平台角度出发，在OpenHarmony应用工程之上叠加Android和iOS应用工程
2.ArkTS代码和resources资源编辑仍在OpenHarmony侧完成
3.Native代码在各自平台应用工程中完成

ArkUI-X应用工程结构说明 gitee.com/arkui-x/doc…

编译构建说明

ArkTS源码

ArkTS源码通过OpenHarmony SDK工具链生成abc（Ark Byte Code） ，并分别拷贝到Android和iOS应用工程，作为平台应用资源进行管理。

ArkUI应用资源

ArkUI Resources资源也通过OpenHarmony SDK工具链进行编译，编译后的ArkUI资源分别拷贝到Android和iOS应用工程，作为平台应用资源进行管理。

ArkUI框架资源

ArkUI框架资源随ArkUI-X SDK进行发布，应用构建时会自动打包到ArkUI-X应用中，可保证ArkUI-X应用在各平台上UX渲染一致性。
综上所述，Android平台上通过assets管理ArkTS编译产物、ArkUI应用资源和ArkUI框架资源，iOS平台上通过Bundle Resources管理ArkTS编译产物、ArkUI应用资源和ArkUI框架资源

注意点
Ability开发说明 https://gitee.com/arkui-x/docs/blob/master/zh-cn/application-dev/quick-start/start-with-ability-on-ios.md

StageViewController是Stage模型iOS端视图控制器基类，若要实现跨平台基础能力及触发对应ability生命周期，所有iOS端应用级别的视图控制器均要继承于StageViewController

StageApplication本质上是一个调度类，主要用于触发内部相关类实现路径解析与配置、注册应用相关的configuration信息、触发ability部分生命周期事件等
通过Stage模型开发iOS端应用指南 https://gitee.com/arkui-x/docs/blob/master/zh-cn/application-dev/quick-start/start-with-ability-on-ios.md

iOS端应用info配置里的bundleName需要与Ability的bundleName一致。

iOS端应用内的viewController的viewControllerName组成规则：Ability的moduleName + Ability的abilityName + “viewController”。
虽然这样说，但并不一定这样

桥接插件开发

开发者文档 https://gitee.com/arkui-x/docs/blob/master/zh-cn/application-dev/README.md
平台桥接(@arkui-x.bridge) gitee.com/arkui-x/doc…
iOS 平台桥接开发指南 https://gitee.com/arkui-x/docs/blob/master/zh-cn/application-dev/tutorial/how-to-use-bridge-on-ios.md
iOS ArkUI-X插件开发指南 gitee.com/arkui-x/doc…
Android 平台桥接开发指南 gitee.com/arkui-x/doc…
Android ArkUI-X插件开发指南 gitee.com/arkui-x/doc…

插件的通信机制和RN很类似

1.在原生端，通过调用addPlugin添加插件，在插件里通过名称注册对应的BridgePlugin
2.在ArkTS端通过 @arkui-x.bridge的API使用名称调用createBridge创建一个插件
3.然后原生和ArkTS调用相应的API进行通信

支持动态化

动态化介绍 gitee.com/arkui-x/doc…
总体分成两类

1.框架动态化：指ArkUI跨平台开发框架本身可以做到动态下发，即应用发布时可以不带框架基础库，降低应用原始发布包体积，在需要时才从云端动态下发和执行加载；
2.特性动态化：指用ArkTS语言开发的特性可以做到动态化，和宿主应用解耦，独立发布、升级版本；

框架动态化是指依赖的动态库可以动态下载，只有Android支持，iOS不支持
特性动态化是指作为资源的abc文件和对应的文件资源，module等

不完全的API支持

支持的组件范式

除鸿蒙特有的组件外，基本所有组件都能支持。支持占比90%左右
ArkUIX 支持API developer.huawei.com/consumer/cn…
鸿蒙原生API gitee.com/arkui-x/doc…

支持的接口

ArkUIX支持的接口大概占鸿蒙的70%左右，其中的剩余部分主要是ArkUI以及鸿蒙的独有能力

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档