美文网首页
ArkUI-X跨平台技术落地-华为运动健康(一)

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

作者: 龙儿筝 | 来源:发表于2025-06-17 22:16 被阅读0次

现状与诉求

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

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

跨平台方案选型

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

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

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

综上所述,页面采用的技术方案如下图所示:
[图片上传失败...(image-397ffa-1750256193542)]

运动健康基于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系统上的运动健康整体架构图如下所示:
[图片上传失败...(image-69eb4a-1750256193542)]

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 {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // 设置规则:bundleName:moduleName:abilityName:
        super.setInstanceName("com.example.myapplication:entry:MainAbility:");
        super.onCreate(savedInstanceState);
    }
}

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

4.底层能力的差异(如蓝牙设备连接、页面跳转、数据平台等),通过bridge的形式,桥接到不同的平台,根据平台来调用对应的方法。
[图片上传失败...(image-710506-1750256193542)]

相关文章

  • 移动简报022—小米推全新品牌“MIJIA”;WiFi万能钥匙全

    【移动营销】 AdMaster国内率先落地跨终端识别技术 AdMaster通过构建跨多平台真实数据集群,破解国外跨...

  • Flutter学习笔记01

    Flutter学习笔记01 [TOC] 1. 跨平台技术的发展历史 1.1 跨平台技术 跨平台技术是软件工程发展到...

  • Cordova 初试

    整体内容介绍: 跨平台技术的由来 跨平台技术简介 cordova 简介 cordova 结构(重点) cordov...

  • Web技术学习方向-小记

    Web框架 6大主流Web框架优缺点对比 跨平台技术 跨平台技术分类 1.使用所有平台支持的Web技术的。 这些解...

  • 跨平台技术

    1.基于原生开发 RN (react native) 编程思想:Learn once ,write anywher...

  • 跨平台技术

    发展 第一阶段是Native阶段,只能在iOS平台和安卓平台上进行开发,没有一些跨平台技术出现。 第二阶段是H5阶...

  • React-Native端跨平台开发技术分析

    一、跨平台开发技术介绍 入门路线2015年Facebook 推出了React Native让跨平台开发技术火了一把...

  • 前端跨平台技术理解(FLutter、React Native、H

    本文主要介绍集中跨平台技术解决方案、结合本人在实际开发过程中的各种体验,对这几种跨平台技术进行一个点评。 跨平台技...

  • Web service 的认知

    一,解释:WebService是一种跨编程语言和跨操作系统平台的远程调用技术。 所谓跨编程语言和跨操作平台,就是说...

  • 主要区块链公司应用落地进度

    在区块链底层技术平台这一赛道上,众多布局企业应用落地的方向正走向分化。在今年以前,无论是BAT、华为、平安集团等大...

网友评论

      本文标题:ArkUI-X跨平台技术落地-华为运动健康(一)

      本文链接:https://www.haomeiwen.com/subject/cdicgjtx.html