ArkUI-X跨平台技术落地-华为运动健康(一)

现状与诉求

目前，华为运动健康App在Android 和 iOS均有独立的客户端工程，在原生页面部分，两个客户端独立开发，代码各自维护和演进，会带来各自独立的开发工作量，并且两个端之间的交互体验也无法做到一致。

为了解决开发工作量翻倍和交互体验不一致的问题，华为运动健康利用H5技术来进行跨平台，就是业界常说的hybrid-app，但是H5技术天生就有性能缺陷，无法带来极致流畅的用户体验和“秒开”的加载速度，所以目前H5跨平台技术只在运动健康应用某些低频和容易变化的页面上使用，在一二级页面仍使用原生native开发。

跨平台方案选型

随着运动健康鸿蒙NEXT版本开发，三个平台同时开发的成本及体验一致性问题凸显，例如占比90%的健康详情界面使用原生实现，多平台&多端，开发维护成本高。

有鉴于此，引入一种跨平台开发技术做到"一次开发、三端部署"来降低开发工作量以及保证体验一致性，对于运动健康App而言，显得尤为重要。作为鸿蒙NEXT系统生态中的重要一员，ArkUI-X框架是我们跨平台技术方案的首选。结合当前运动健康三端现状，具体采取如下跨平台技术的设计策略：

1.运动健康首页历史逻辑复杂，涉及的模块多并且改造包袱重，仍使用原生页面native开发技术。
2.在运动健康内部的二级页面（如心脏健康、睡眠等页面）使用ArkUI-X技术，实现页面级别的复用，实现“一次开发，三端部署”。
3.在三级页面和低频页面上，仍使用H5技术。H5技术在三端上目前均已成熟，可以做到在三端无缝切换。

综上所述，页面采用的技术方案如下图所示：

运动健康基于ArkUI-X跨平台框架适配

鸿蒙Next平台运动健康架构设计

如上所述，运动健康在鸿蒙NEXT系统上健康二级页面（如心脏健康、睡眠）采用ArkUI-X 跨平台技术进行开发，并且将对应的健康二级页面在Android 和 iOS上面进行复用，实现“一套代码，三端运行”。

在健康二级页面上，数据来自于运动健康内部的“数据平台”，但是目前运动健康在三端上的“数据平台”有各自单独的实现（运动健康“数据平台”可以理解成为一个独立的内部数据存储模块，具备增、删、改、查健康数据以及实现端云数据同步的功能）。但是由于历史原因，当前三端的数据平台无法做到代码复用，有各自的接口和逻辑实现，所以如何去除健康二级页面（如睡眠、心脏健康）与 数据平台的耦合关系，通过接口的形式隔离三端（iOS 和 Android和鸿蒙NEXT系统）的数据平台的实现差异，成为一个重要的问题。所以当前架构设计面临如下三个诉求：

1.上层健康二级页面代码复用，抽象数据平台层接口实现，不修改上层业务代码的情况下兼容不同数据平台的差异。
2.健康模块代码能够作为运动健康Next版本的一部分，可以在运动健康Next版本里面编译，同时能够单独编译，生成编译产物hap包，供Android和iOS编译，实现“一套代码，三端运行”。
3.其他底层能力差异（如蓝牙设备连接，页面跳转等），通过bridge形式实现，最大限度复用上层代码。

根据上述诉求，鸿蒙NEXT系统上运动健康的架构设计如下：

1.新建独立跨平台的Entry模块，该跨平台Entry模块用于编译跨平台hap包，供Android和iOS编译，跨平台的Entry模块本身不包含业务逻辑代码，仅仅用于编译出包。
2.将健康二级页面代码单独抽离成独立module:健康Module，让鸿蒙NEXT的Entry模块和跨平台工程的Entry模块可以依赖健康Module。
3.抽象数据平台的接口，让健康Module调用数据平台的抽象接口，而非依赖具体的数据平台实现，后续使用动态编译脚本，根据宿主平台来修改数据平台的实现。
4.其他底层能力的差异（如蓝牙设备连接、页面跳转等），通过bridge的形式，桥接到不同的平台，根据平台来调用对应的方法。

鸿蒙Next系统上的运动健康整体架构图如下所示：

Android、iOS平台运动健康架构设计（以Android为例）

1.如前所述，鸿蒙Next系统的跨平台工程编译出来的hap包，添加到运动健康Android版本的工程下Asset目录下参与编译，最后生成Android版本的apk包。通过这种形式，ArkUI-X跨平台页面代码就可以预置到Android版本的运动健康中。
2.跨平台代码预置后，Android侧通过ArkUI-X SDK提供的setInstanceName接口可以拉起对应的跨平台页面，并且通过该接口，可以将json格式的参数传递到跨平台的Entry模块。

package com.example.myapplication;
import ohos.stage.ability.adapter.StageActivity;public class EntryMainAbilityActivity extends StageActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {// 设置规则：bundleName:moduleName:abilityName:super.setInstanceName("com.example.myapplication:entry:MainAbility:");super.onCreate(savedInstanceState);}
}

3.Entry模块收到json数据，解析对应的数据，从而拉起对应的跨平台页面。

4.底层能力的差异（如蓝牙设备连接、页面跳转、数据平台等），通过bridge的形式，桥接到不同的平台，根据平台来调用对应的方法。