目前，已经有按照方案完成整体改造的4个Sample作为完整案例。
| 应用描述 | 链接 |
|---|---|
| 鸿蒙世界 | HMOSWorld |
| 溪村小镇 | OxHornCampus |
| 音乐专辑 | MusicHome |
| 购物应用 | MultiShopping |
下面以实际改造过程中遇到的经典问题进行案例详解。
Products共性拆分Products共性拆分
在拆分原工程products模块为两个hap时，将可以复用的代码进行抽象，存于features层main，被hap依赖使用。
首先识别可以复用的代码逻辑部分，以溪村小镇为例，应用启动页会轮播三张图片，而图片源的数据结构作为可复用部分，将其存放于features层main中。
模块main 对外暴露 数据结构
// OxHornCampusfeaturesmainIndex.ets // 对外暴露数据源 export { splashImages } from './src/main/ets/viewmodel/SplashModel'; arkuix和harmonyos使用时添加对模块main的依赖，即可访问数据。
// OxHornCampusproductsphonearkuixoh-package.json5 // harmonyos同理 { "name": "arkuix", "version": "1.0.0", "description": "Please describe the basic information.", "main": "", "author": "", "license": "", "dependencies": { "@ohos/utils": "file:../../../commons/utils", "@ohos/map": "file:../../../features/map", "@ohos/zones": "file:../../../features/zones", "@ohos/train": "file:../../../features/train", //添加模块依赖 "@ohos/main": "file:../../../features/main", } } Products差异性性拆分
以鸿蒙世界为例，HarmonyOS Next设备上应用持有5个tab页，其中 tabs“溪村挑战赛” 使用了harmonyos的独有能力进行UI设计。由于无法通过Bridge实现跨平台改造，因此需要在Android/iOS平台部署时删除该tab页相关元素，同时相关数据结构等根据平台独立设计，分别存放于harmonyos.hap 和 arkuix.hap。
arkuix侧不存在“CHALLENGE”数据项。harmonyos侧存在“CHALLENGE”数据项。
最终实现效果
harmonyos包展示效果，存在tab页“溪村挑战赛”
arkuix包展示效果，没有tab页“溪村挑战赛”
使用支持跨平台的UI控件、属性、方法进行跨平台开发
在音乐专辑中，当音乐播放时，播放控制栏的音乐图标会执行旋转动画，实际上HarmonyOS Next与Android/iOS使用了两套逻辑实现。
在HarmonyOS Next上。使用@ohos.graphics.displaySync (可变帧率)实现动画效果。
// DisplaySyncLocal.ets import { displaySync } from '@kit.ArkGraphics2D'; import { DisplaySyncInterface } from '../Interface/DisplaySyncInterface'; export class DisplaySyncLocal implements DisplaySyncInterface { private static instance: DisplaySyncLocal; private backDisplaySyncSlow: displaySync.DisplaySync | undefined = undefined; public static getInstance(): DisplaySyncInterface { if (!DisplaySyncLocal.instance) { DisplaySyncLocal.instance = new DisplaySyncLocal(); } return DisplaySyncLocal.instance; } public createAnimate(range: ExpectedFrameRateRange, frame: () => void): void { this.backDisplaySyncSlow = undefined; this.backDisplaySyncSlow = displaySync.create(); this.backDisplaySyncSlow.setExpectedFrameRateRange(range); this.backDisplaySyncSlow.on('frame', frame); } public deleteAnimate(frame: () => void): void { if (this.backDisplaySyncSlow != undefined) { this.backDisplaySyncSlow?.off('frame', frame); this.backDisplaySyncSlow = undefined; } } public startAnimate(): void { if (this.backDisplaySyncSlow != undefined) { this.backDisplaySyncSlow?.start(); } } public stopAnimate(): void { if (this.backDisplaySyncSlow != undefined) { this.backDisplaySyncSlow?.stop(); } } } 由于当前ArkUI-X框架未适配这套方法，在arkui-x侧实际上使用了@ohos.animator (动画)实现动画效果。
// DisplaySyncArkUIX.ets import { Animator, AnimatorResult } from '@kit.ArkUI'; import { DisplaySyncInterface } from '../Interface/DisplaySyncInterface'; export class DisplaySyncArkUIX implements DisplaySyncInterface { private static instance: DisplaySyncArkUIX; private backAnimator: AnimatorResult | undefined = undefined; public static getInstance(): DisplaySyncInterface { if (!DisplaySyncArkUIX.instance) { DisplaySyncArkUIX.instance = new DisplaySyncArkUIX(); } return DisplaySyncArkUIX.instance; } public createAnimate(range: ExpectedFrameRateRange, frame: () => void): void { this.backAnimator = undefined; this.backAnimator = Animator.create({ duration: 5000, easing: "linear", delay: 0, fill: "forwards", direction: "normal", iterations: -1, begin: 0, end: 1 }) this.backAnimator.setExpectedFrameRateRange(range); this.backAnimator.onFrame = frame; } public deleteAnimate(frame: () => void): void { if (this.backAnimator != undefined) { this.backAnimator.cancel(); this.backAnimator = undefined; } } public startAnimate(): void { if (this.backAnimator != undefined) { this.backAnimator.play(); } } public stopAnimate(): void { if (this.backAnimator != undefined) { this.backAnimator.pause(); } } } 关于DevEco Studio编译时报错问题解决
问题现象：DevEco Studio编译hap时报错：“ xxx can't support crossplatform application. ”
问题解析：由于使用了跨平台工程模版，DevEco Studio在进行静态编译检查时会检查跨平台标签“@crossplatform”。而在工程中会使用一些当前不支持跨平台的HarmonyOS 接口导致静态编译检查失败。
解决方法：
1.找到 IDE 里配套 OH-SDK；如果是HarmonyOS Next开发，则是HarmonyOS 里带的oh-sdk。
简便方法：前提需保证工程使用SDK为正确的。使用DevEco Studio打卡任一工程，在工程中打开并查看任一d.ts文件，于文件名右键点击-->选择 打开范围-->选择 Explorer 点击，打开的文件窗口即为当前工程所使用的SDK路径，于文件窗口回到SDK根目录执行第2步。
2.找到文件：" api_check_util.js "。文件在SDK中的相对路径为：
sdkHarmonyOS-NEXT-DB1openharmonyetsbuild-toolsets-loaderlibfast_buildsystem_apiapi_check_utils.js 3.在文件" api_check_util.js "中搜索关键字：CROSSPLATFORM_TAG_CHECK_ERROER，将其后边的 DiagnosticCategory.Error 修改为 DiagnosticCategory.Warning。
4.回到DevEco Studio 如果当前工程已编译过，先执行clean操作；之后执行操作： 点击文件-->选择 清理缓存 点击--> 勾选选项 --> 点击清除并重新启动。
约束与建议
本方案是依据ArkUI-X框架来实现的，应首先符合ArkUI-X框架的规格要求.
在应用UI方面存在的差异，是无法借助Bridge能力来弥补的。在此建议使用ArkUI-X框架中已经适配完毕的组件，这些组件功能相对稳定且较为全面。
应用改造过程中可能涉及通过Bridge框架使用平台原生接口方法，使用时需满足相应的原生系统版本要求。
