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

简介: 本文介绍了ArkUI-X在华为运动健康应用中的实践,涵盖原生与ArkUI界面参数传递、跨平台bridge桥接通信、平台差异化动态编译处理及性能表现。通过intent与putExtra()实现页面参数传递,定义5类bridge(数据、设备、页面跳转、日志、用户账户)提升跨平台与原生交互能力。采用编译前动态修改import技术屏蔽多端差异,确保业务代码复用。ArkUI-X跨平台页面达到60fps滑动帧率,包体积增加19MB,内存表现与原生持平。目前心脏健康模块已在iOS商用,Android版处于Beta阶段,未来将迁移更多高频模块至ArkUI-X框架,进一步提升开发效率与用户体验。

原生和ArkUI界面参数传递

在原生页面拉起对应的跨平台的页面时,会将代表拉起哪个页面的参数通过intent的形式传递给跨平台的Entry模块,这里主要用到的是intent的putExtra()方法进行设置,Entry模块收到该参数之后,解析参数从而决定拉起的页面,一个简单的示意图如下所示:
原生页面和ArkUI跨平台界面参数传递示意图

ArkUI-X与原生之间的bridge桥接通信

ArkUI-X SDK 提供了一种bridge通信方案,用于跨平台层和宿主Native之间进行相互通信,使得跨平台层可以调用原生的能力。运动健康应用使用bridge的简单示意图如图所示:
bridge调用示意图

在运动健康内部,有5个bridge,用于跨平台层与native之间进行通信:

1.数据平台的bridge -- 负责跨平台业务层 和 数据平台之间交互的接口定义;
2.设备类的bridge -- 负责上层业务层 和 设备能力之间的交互(目前由于ArkUI-X SDK的蓝牙能力并非跨平台的,所以使用接口抽象不同平台的设备的交互);
3.页面跳转的bridge -- 负责从ArkUI的页面跳转到 H5的页面(在鸿蒙NEXT系统当中,运动健康跳转的是NEXT系统的H5页面,而在Android和iOS当中,运动健康跳转的是原生的H5页面);
4.日志类的bridge -- 负责将日志打印到对应的原生应用的日志文件当中;
5.用户账户信息的bridge --负责向上层业务层提供获取原生App账户信息的能力。

这些bridge的创建时机均为跨平台Entry模块初始化之时。为了使上层调用bridge方法的时候,像调用ts原生方法一样方便,在应用工程内部,我们在ArkUI-X SDK的基础上对bridge的调用进行了一层封装,方法的核心代码如下所示:

/**
  * 执行Native接口
  * @param moduleName native模块名
  * @param funcName native函数名
  * @param params 参数列表
  */
public execNativeAsync(moduleName: string, funName: string, ...params: any): Promise<any> {
   
    return this.wrapFunc(moduleName, funcName, ...params);
}

private wrapFunc(moduleName: string, funcName: string, ...params: any): Promise<void> {
   
    return new Promise((resolve, reject) => {
   
        const id = mgr.add({
   
            success: (data) => {
   
                resolve(this.parseResult(data));
            },
            fail: (errCode, errMsg) => {
   
                reject({
    errCode, errMsg });
            }
        });
        // 指定bridge类型和方法名即可进行调用对应的bridge方法
        console.log(`${
     TAG} call method: ${
     moduleName}/${
     funcName}`);
        if (params.length) {
   
            this.getModule(moduleName).callMethod(funcName, id, ...params);
        } else {
   
            this.getModule(moduleName).callMethod(funcName, id);
        }
    });
}

在本方法中,对调用层屏蔽了变量id,变量id由mgr来进行管理,调用方在调用bridge方法的时候,只需要指定bridge的类型和对应的bridge方法名,即可像调用原生ts方法一样调用bridge方法。

平台差异化处理—动态编译脚本

由于不同操作系统之间的数据平台差异等客观原因,需要做到一套业务代码在鸿蒙NEXT系统、Android 和 iOS上面同步运行,在尽可能不修改业务代码的前提下屏蔽三端数据平台的差异,结合运动健康NEXT系统当前的代码现状,运动健康使用了编译前动态修改import的技术方案:根据接口的形式抽象数据平台的功能,利用编译前动态import的方式来根据宿主形态来确定调用的具体方法。具体方案如下:

1.在鸿蒙Next系统上,我们的业务代码依赖了鸿蒙Next系统的原生能力,我们将该原生能力包称为A包;与此同时,我们开发跨平台场景包,为了描述方便,我们将这个包命名为B包,B包的接口形式与数据结构跟A包保持一致,但是B包的内部实现与A包的实现不同(B包主要是跨平台包,内部实现为跨平台桥接)。
2.将上层业务对A包的依赖导入收编到一个文件内(对A包的数据结构和接口进行import 和 export,通过该形式实现依赖中转),我们在这里将文件命名为import-sdk.ts,举个简单的示例:

import {
    xxx } from ‘a-sdk’ // A包是鸿蒙Next系统原生能力包

修改为:

import {
    xxx } fromimport-sdk’// import-sdk.ts 是包名统一收编包

其中,import-sdk.ts文件的简单示例如下所示:

import {
   
  HealthModel, // A包的数据结构
  healthInterface // A包的接口方法
} from 'a-sdk'; // A包

export {
   
  HealthModel, 
  healthInterface
};

与此同时,创建B包的收编导入文件,其内容与import-sdk.ts有差异,差异为引入包的路径,代码如下所示:

import {
   
  HealthModel, // B包的数据结构
  healthInterface // B包的接口方法
} from 'b-sdk'; // B包

export {
   
  HealthModel, 
  healthInterface
};

3.在编译前,按照编译目标替换收编导入文件,例如编译跨平台版本时,将import-sdk.ts替换为B包的收编导入文件。如果是编译鸿蒙Next系统的hap包,则不需要替换。由于之前对A包和B包的依赖统一收编到import-sdk.ts,所以只需要替换一个文件,即可以实现全局依赖替换。

性能指标

目前ArkUI-X跨平台页面整体静态指标为: • 滑动帧率为:60fps(达到满帧) • 包体积增加:二进制包增加19MB • 内存数据:内存与原生持平(或略高),具体表格数据如下所示:
内存对比

整体实现效果

目前心脏健康ArkUI-X跨平台实现已经在iOS上实现商用,Android版本正在Beta中

总结

通过引入ArkUI-X技术,使得华为运动健康应用三端平台复用健康模块代码,从而在三端交互一致的前提下提升开发效率以及代码复用率(目前代码复用率为74.3%,提升研发效率30%),并且用户体验追平原生native页面的体验效果。后续规划,运动健康应用内部更多高频使用的页面和模块(如单次运动模块、运动记录页面等)也会逐渐迁移到ArkUI-X跨平台框架上。

相关文章
|
26天前
|
API Android开发 开发者
ArkUI-X跨平台应用改造指南
随着HarmonyOS Next 5.0的发布,基于ArkTS开发的应用日益丰富,但也面临多平台适配的挑战。ArkUI-X框架提供“一次开发、三平台部署”解决方案,助力开发者高效实现跨平台应用。本文介绍如何通过ArkUI-X将HarmonyOS Next应用改造为支持Android与iOS的跨平台工程,涵盖产品定制层(products)、基础特性层(features)和公共能力层(commons)的设计与实现,优化代码复用与交互一致性。
135 52
|
6天前
|
安全 PHP
PHP 8 新特性实战:提升开发效率的利器
PHP 8 新特性实战:提升开发效率的利器
140 87
|
24天前
|
前端开发
React Hooks数据获取:避免内存泄漏的实战指南
React Hooks数据获取:避免内存泄漏的实战指南
|
16天前
|
存储 运维 JavaScript
《HarmonyOSNext应用崩溃自救指南:零数据丢失的故障恢复黑科技》
本文详解HarmonyOS Next应用崩溃时如何实现零数据丢失的故障恢复机制,涵盖API差异、核心接口与实战代码,助开发者提升App稳定性和用户体验。
128 65
|
16天前
|
监控 前端开发 JavaScript
HarmonyOSNext 崩溃急救指南:全局监听+同步退出 = 优雅保命!
本文介绍了HarmonyOS Next中Ark Ts的错误管理技巧,通过全局监听和同步退出机制实现应用崩溃保护。涵盖单线程、Promise及主线程卡死监控方案,并提供实战代码与避坑指南,帮助开发者优雅处理异常,保障用户体验。
126 65
|
27天前
|
开发框架 监控 .NET
【Azure Cloud Service】基于 Azure Cloud Services(外延支持)的应用迁移至 Azure Service Fabric 的过程中问题讨论
本文探讨了将基于 Azure Cloud Services 的应用迁移到 Azure Service Fabric 时的三个关键问题:代码层面的影响评估、HTTPS 终结点配置以及日志记录机制迁移。针对代码迁移,需调整配置方式、更新资源包依赖并优化代码结构以适应微服务架构;HTTPS 配置则涉及证书管理与端口绑定;日志记录建议采用 Application Insights 或自定义写入 Azure Storage 的方式。文章提供了详细步骤与官方文档参考,助力顺利迁移。
60 27
|
23天前
|
Java API 微服务
2025 年 Java 从入门到精通学习笔记全新版
《Java学习笔记:从入门到精通(2025更新版)》是一本全面覆盖Java开发核心技能的指南,适合零基础到高级开发者。内容包括Java基础(如开发环境配置、核心语法增强)、面向对象编程(密封类、接口增强)、进阶技术(虚拟线程、结构化并发、向量API)、实用类库与框架(HTTP客户端、Spring Boot)、微服务与云原生(容器化、Kubernetes)、响应式编程(Reactor、WebFlux)、函数式编程(Stream API)、测试技术(JUnit 5、Mockito)、数据持久化(JPA、R2DBC)以及实战项目(Todo应用)。
82 5
|
24天前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
15天前
|
Java 应用服务中间件 Linux
在Java 12环境中配置和部署Apache Tomcat的步骤。
这段部署Tomcat的冒险旅程充满技术挑战,但同时也像游戏一样充满乐趣。它需要你提前准备,仔细执行,并随时准备解决意外情况。成功后,你就可以在这匹强壮的网络野马上,带着你的Java应用,冲向Web开发的璀璨星空。
90 56
|
16天前
|
人工智能 数据可视化 云计算
刚刚!我用AiPy分析300页的阿里财务报表!
阿里发布2025财年财报并调整合作人队伍,AI助手AiPy结合Doubao模型对其深度分析,生成可视化HTML报告。内容涵盖收入结构、业务板块、资本管理、战略方向及个体发展机遇,如AI应用、跨境电商、本地生活创业等,形式新颖、洞察精准。