闲鱼应用基于 Kun Flutter 在鸿蒙 OS 上的移植实践

1. 闲鱼鸿蒙原生应用移植实践阿里巴巴高级无线开发专家 / 邬吉风

2.

3. 个人介绍邬吉风，阿里巴巴高级无线开发专家，毕业于浙江大学。开源项目fish-redux，flutter_boost作者，闲鱼终端基础架构负责人。

4. 分享纲要 • • • • • • 鸿蒙原生开发的必要性如何有效评估复杂度闲鱼的移植方案实操的技术方案详解目前的进展和问题小结和展望

5. 为什么要鸿蒙原生开发可以预见，当HarmonyOS Next开始发布/升级，将对业务产生巨大影响。 • 华为现网手机设备总量月5.2亿，如果2024年底（新发+升级）HarmonyOS Next设备达到1亿，大约影响华为渠道19%的用户。 •

6. 还在犹豫要不要干的时候？

7. 如何有效评估复杂度工作主要包括六大部分 1.原生业务-Java/OC代码用ArkTS完成重写。 2.原生框架-Java/OC代码用ArkTS/C++完成重写。 3.跨端业务不用改，平移后，回归验证或简单适配性修改。 4.跨端容器（Kun/Flutter/Web）Java/OC代码用ArkTS完成重写，C++库重编译。 5.二三方SDK接入，部分涉及Java/OC代码用ArkTS重写。 6.鸿蒙环境/编译/构建/灰度等工作流的支持改造。核心围绕语言差异，选择以重写为主，还是移植为主，会极大影响项目复杂度

8. 闲鱼选择以移植为主的方案 10% 10% 40% 40% Kun 闲鱼重度使用跨端UI框架 Flutter Web 90%的业务以跨端UI框架来承接 Native

9. 先从 Web For OHOS 移植说起基础可用 1 UA 兼容 2 API 扩展 3 同层渲染 4 容器定制 Chromium99 整体原则：尽可能的减少对业务层的适配成本

10. Flutter For OHOS 1 Flutter是什么？ Flutter是Google推出的开源UI工具包。它具有高性能、跨平台、良好的开发者体验、和完善的社区生态等特点 2 为什么要单独做鸿蒙上的适配？ Flutter不是天然跨平台的么？官方支持六个平台：iOS、Android、Web、Windows、macOS、Linux。其他系统，如HarmonyOS，需自定义将Flutter嵌入为使之成为平台的UI工具包选择。

11. 移植Flutter能否像移植网页一样简单？

12. 结论：像Web一样移植Flutter代码，但不简单 Flutter Web 100% 接近100% ReactNative Native 0% 代码复用率对比在鸿蒙系统上，我们能几乎复用100%的Flutter(Dart)代码，可以类比是一次对不同浏览器版本的兼容

13. 如何移植Flutter代码到OHOS 几大关键问题亟待解决 1 如何在鸿蒙系统上运行Flutter（Dart）代码，比如一个“Hello World？” 2 如何以混合的方式运行Flutter、原生鸿蒙、Web页面？ 3 如何解决自身和三方的Flutter Plugins代码的移植？ 4 音视频场景能力-外接纹理方案 5 如何构建独立的编译流水线？

14. Flutter For OHOS 如何在鸿蒙系统上运行Flutter（Dart）代码，比如一个“Hello World？” Flutter架构图 diff 20230907/gitee.com/mirrors/engine/3.7.12 ~ dev 3.1 复 1 2 涉及shell目录下代码 - 渲染和Surface - 事件 - 线程 - 插件机制 3.2 3 运行时工具链涉及attachment/tools目录下代码核心适配代码 - gn 编译脚本、交叉编译工具链 - 命令行，flutter devices & flutter precache等 Android, iOS… OHOS git@gitee.com:openharmony-sig/flutter_flutter.git 由华为官方，闲鱼提交了30多个PR

15. FlutterBoost For OHOS 如何以混合的方式运行Flutter、鸿蒙原生、Web页面？ FlutterBoost是一种非常特殊的Flutter Plugin，它和Embedder有很高的耦合关系。很长一段时间，Embedder层的API概念尽可能的去对齐Android。从最初的FlutterAbility粒度，到对齐到FlutterView粒度。 1 能力上支持了ArkUI、Flutter、Web等多混合技术栈 2 支持多FlutterView单FlutterEngine（单引擎的混合架构） 3 对齐鸿蒙OS的Componet级别生命周期支持 4 对齐鸿蒙OS的UIAbility级别生命周期支持目前在 Flutter For OHOS的基础上，混合栈 FlutterBoost的鸿蒙版适配工作已经初步完。如果有依赖FlutterBoost的团队可以使用， https://github.com/alibaba/flutter_boost/issues/1957

16. Plugins For OHOS 1 阶段一：如何最快的将完整的闲鱼复刻到鸿蒙系统？发现和验证更多问题如何让各个模块的工作完全独立解耦，并行开发 3 阶段二：线性接入重要SDK，取代代理层 4 SDK 移植的两个阶段

17. Plugins远程调用 Client 通过自定义FlutterBinaryMessenger替换系统默认实现，起到了插件远程调用的能力 Server

18. 外接纹理 For OHOS 1 基础场景-API平移概念和接口设计上基本对齐Android 2 复杂场景-重构代码 ETS语言受限 ETS无法直接使用OpenGL ES ETS多线程能力受限制需要引入C++重构拍摄、相册、视频等场景播放器示例代码

19. 工程化 For OHOS 1 Flutter引擎构建和发布 2 Flutter产物构建和发布 3 鸿蒙应用HAP整包构建和发布 4 多Flutter SDK无感切换 5 Flutter主工程在Android/iOS/OHOS同等开发调试

20. 会遇到哪些典型问题 • Embedder部分能力未对齐 • 系统API能力部分待完善 • 三方Package部分需要适配

21. 业务层是否要感知到？抹平差异 Flutter 业务层 Polyfill 3.7 Flutter Framework 3.3 Flutter Framework Flutter Engine Flutter Engine OHOS Android/iOS 类似于为了抹平不同浏览器版本差异而引入的Polyfill 差异处理 Platform.isOHOS

22. Kun For OHOS 1 Kun是什么？ Kun是一个闲鱼自研的，使用 Javascript/HTML/CSS 进行开发，使用Flutter进行增强的跨端开发框架。 2 Kun的特点高性能高一致性开放性兼具Web、Flutter生态 3 使用范围目前Kun支持了闲鱼约40%的重点产品链路。 Web API和W3C子集

23. Kun For OHOS 架构图 Kun 100% 位于 Flutter 之上，所以在 Flutter For OHOS 的基础上，只需要极小的适配成本。

24. Kun 如何移植 • • SO动态库编译（Kun/yoga/quickjs） • POSIX接口或系统特有的接口 • 切成鸿蒙的SDK CAPI工具链重新编译同时支持多Flutter版本

25. 到这一阶段，我们基本完成了跨端UI框架的移植

26. 技术小结通过基于Kun/Flutter/Web移植，项目的复杂度得到了量级的降低 • Web For OHOS • Flutter For OHOS • Kun For OHOS

27. 目前的进展经过几个月的相关工作，可以不修改业务代码情况下，在HarmonyNext上运行闲鱼的大部分基础产品链路。

28. 尽管看上去顺利极了，但其实是踩过了无数的坑。。。

29. 话题一：性能 PK 目前由于一些基础中间件的不完善，现阶段还有一些卡顿。通过在Embedder层、系统层、组件层进行优化，鸿蒙上表现更好。

30. 话题二：Flutter 鸿蒙生态 1 Flutter For OHOS的长期维护机制 2 三方Packages的常态化支持

31. 小结和展望 • • • • • • 鸿蒙原生开发的必要性如何有效评估复杂度闲鱼的移植方案实操的技术方案详解目前的进展和问题终端技术和组织的新变化需求1 Android 团队客户端架构团队需求2 iOS 团队客户端工程团队 Harmony 团队 Web架构团队需求1 需求3 Web 团队 Web工程团队需求2 终端团队A 需求3 终端团队B 终端基础设施团队

32.

33.