popacorn.pages.dev

鸿蒙 next flutter


HarmonyOS NEXT-Flutter混合开发之鸿蒙-代码实践

在 Flutter 三端分离模式下完成纯血鸿蒙混入的过程中，虽然官方文档提供了一定的指导，但实际操作中可能会遇到一些坑。以下是我在适配过程中的一些经验总结，供各位开发者参考 😄 如果有帮助点个赞。

在混入过程中是基于咸鱼团队 flutter_boost（这里不讨论和其他方案的差别） 和自定义 FlutterPlugin 实现的。

主要涉及内容：

环境搭建
Flutter module 创建
Futter 引入 flutter_boost
Harmony 引入 flutter_boost
Flutter 与鸿蒙侧通信
Flutter 调用鸿蒙原生
环境搭建
Fluter 环境
准备支持鸿蒙的 Flutter 开发环境，flutter_fluter 仓库基于 Flutter SDK 对于OpenHarmony平台的兼容拓展，可支持 IDE 或者终端使用 Flutter Tools 指令编译和构建 OpenHarmony 应用程序。

Harmonyos NEXT 环境
不再赘述，上链接。

Flutter module 创建
创建 Fluter 项目

flutter create -t module --org xyz.zhousg demo_fluter
打包 Fluter 项目

flutter build har --debug
Fluter 引入 flutter_boost
安装依赖
dependencies:
flutter:

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
fl_chart: ^0.62.0
flutter_boost:

// 1. 创建一个自定义的Binding，继承和with的关系如下，里面什么都不用写
class CustomFlutterBinding extends WidgetsFlutterBinding

void main() {
// 2. 这里的CustomFlutterBinding调用务必不可缺少，用于控制Boost状态的resume和pause
CustomFlutterBinding();
runApp(const MyApp());
}

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State<MyApp> createState

Flutter 3.22.0-ohos 0.1.0 Release 发布

本版本为 Flutter OpenHarmony 平台 0.1.0 版本（Beta），基于 Flutter 3.22.0 版本适配。本版本支持和完善 OpenHarmony 平台侧能力，提供平台化 Channel、外接纹理、云端 SDK 等特性，并优化性能。

发布范围

HarmonyOS NEXT, API13

基础特性

  • 支持 OpenHarmony 平台 Flutter Channel
  • 支持 OpenHarmony 平台 Flutter Engine
  • 支持 OpenHarmony 平台 Flutter 命令行工具
  • 支持外接纹理
  • 支持云端 SDK
  • 官方库&三方库 OpenHarmony 平台适配

新增特性

  • 支持 impeller 渲染引擎并默认使能
  • 支持引擎预加载预渲染
  • 支持自渲染内容导入 Flutter

版本发布时间

2024 年 12 月 31 日

版本配套

  • ROM: 5.0.0.115
  • IDE: DevEco Studio 5.0.5.310
  • SDK: HarmonyOS SDK 5.0.5.310，API13
  • Flutter SDK: 3.22.0-ohos-0.1.0（由于 flutter 版本解析规则，为了避免版本比较解析失败，将显示为 3.22.1-ohos-0.1.0）

三方库列表

3.22 版本与 3.7 版本共用同一套三方库代码仓，部分三方库依赖已更新 3.22 版本的，可以在代码仓中找到对应的新分支

  • 官方库/三方库： 官方库链接[1]
  • 三方库： 三方库名称仓库地址sqflitehttps://gitee.com/openharmony-sig/flutter_sqflitepermission_handlerhttps://gitee.com/openharmony-sig/flutter_permission_handlerfluttertoasthttps://gitee.com/openharmony-sig/flutter_fluttertoastconnectivity_plushttps://gitee.com/openharmony-sig/flutter_plus_pluginsdevice_info_plushttps://gitee.com/openharmony-sig/flutter_plus_pluginspackage_info_plushttps://gitee.com/openharmony-sig/flutter_plus_pluginsconnectivityhttps://gitee.com/openharmony-s

    纯血鸿蒙微信 App 正式上线！依然使用了 Flutter，依然没说清哪里用了Flutter

    作者｜冬梅 1 历时 295 天，纯血鸿蒙微信 App 登陆应用商店

    1 月 9 日晚，搭载纯血鸿蒙操作系统微信 App 正式登陆华为应用商城，版本号为 1.0.3.42。相比此前的测试版本，正式版微信功能更加齐全，基础通讯、社交、微信支付、公众号、小程序、视频号及直播等功能齐备，使用上已经与其他平台无异。但目前版本的部分功能仍在进一步迭代中，可能会受到限制或暂时不可用。

    当正式版本上线之际，，腾讯官方账号“鹅厂黑板报”发文，讲述了内部技术团队历时 295 天开发鸿蒙微信 App 的完整过程。此外，腾讯微信事业群（WXG）员工 @客村小蒋也在微博发布了一篇长文，从“局内人”的角度讲述了 App 开发背后的“笑与泪”。

    他表示：“原生鸿蒙（HarmonyOS NEXT）完全是一套新的技术框架，编程语言是独特的 ArkTS 语言，这意味着所有的 App 都要完全重写。”

    2 前端选择了 Flutter？！

    由于鸿蒙官宣不再兼容安卓应用，业内将其称之为“纯血鸿蒙”。“纯血”，也意味着一切都要重做。

    2024 年 3 月 21 日，开发团队收到了“简单又正式”的通知，由曾经负责开发塞班系统微信的技术负责人带头开搞鸿蒙微信。

    由于鸿蒙是一个全新的系统，所以技术团队要手搓 App 的同时，还要和鸿蒙团队不断沟通过程中遇到的问题。就这样这个庞大的工程项目迈出了第一步。

    2024 年 4 月，鸿蒙微信开搭基建。团队凭借 Alita 跨平台内核优势，全力投身鸿蒙系统的适配与基础库移植工作，与华为频繁沟通技术细节，反复测试验证。

    2024 年 5 月，技术团队启动了客户端架构设计，着手为鸿蒙系统适配微信。在这一阶段，团队面临的挑战不仅是满足业务需求，还需要确保微信客户端架构具备高度的解耦性和长期的高可扩展性。目标是使各个相互依赖的模块尽量减少技术上的耦合，避免单一模块故障对整个系统的影响，同时构建一个能够轻松扩展的框架。

    到了 2024 年 6 月，微信开始进入实际的开发阶段。团队借助 Flutter、liteapp 等工具，全力整合支付、VoIP 等功能。

    腾讯称：“Flutter（跨平台应用程序开发框架）、liteapp（专为移动端设计的跨平台开发框架）等，都是这个阶段的关键工作。”

    1 月 9 日，鸿蒙微信正式版本上线。用户除了能稳定下载和使用微信外，还可以用到 QQ、腾讯视频、腾讯新闻、QQ 音乐等 App。

    鹅厂黑板报中提到他们前端架构使用了 Flutter，然而，经过深入了解后我们发现，这一表述实际上存在细微的差别。据我们从业内专家处了解到，鹅厂所提及的 Flutter 应用并非在其主体产品中全面铺开，而是在其小程序渲染引擎的部分，这一发现与鹅

    flutter sdk 3.7 升级到3.22 build hap 失败，重新create一个项目去buildhap也报错

    flutter build hap

    Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!

    start hap build...

    > hvigor ERROR: Unsupported modelVersion of Hvigor 5.1.0.

             Detail: The supported Hvigor modelVersion is 5.0.2

    > hvigor ERROR: BUILD FAILED in 3 s 391 ms

    Running Hvigor task assembleHap...                                     ⣯

    Oops; flutter has exited unexpectedly: "ProcessException: The command failed with exit code 1

      Command: hvigorw assembleHap -p product=default -p buildMode=release --no-daemon -p FLUTTER_TARGET=lib\main.dart -p

      TARGET_PLATFORM=ohos-arm64 -p DART_OBFUSCATION=false -p TRACK_WIDGET_CREATION=true -p TREE_SHAKE_ICONS=true -p

      PACKAGE_CONFIG=D:\dev\work_path\hms1\.dart_tool\package_config.json".

    A crash report has been written to D:\dev\work_path\hms1\flutter_01.log

    This crash may already be reported. Check GitHub for similar crashes.

    https://github.com/flutter/flutter/issues?q=is%3Aissue+ProcessExceptio

    HarmonyOS NEXT-Flutter混合开发之鸿蒙-代码实践

    在 Flutter 三端分离模式下完成纯血鸿蒙混入的过程中，虽然官方文档提供了一定的指导，但实际操作中可能会遇到一些坑。以下是我在适配过程中的一些经验总结，供各位开发者参考 😄 如果有帮助点个赞。

    在混入过程中是基于咸鱼团队 flutter_boost（这里不讨论和其他方案的差别） 和自定义 FlutterPlugin 实现的。

    主要涉及内容：

    1. 环境搭建
    2. Flutter module 创建
    3. Futter 引入 flutter_boost
    4. Harmony 引入 flutter_boost
    5. Flutter 与鸿蒙侧通信
    6. Flutter 调用鸿蒙原生

    环境搭建

    准备支持鸿蒙的 Flutter 开发环境，flutter_fluter 仓库基于 Flutter SDK 对于OpenHarmony平台的兼容拓展，可支持 IDE 或者终端使用 Flutter Tools 指令编译和构建 OpenHarmony 应用程序。

    不再赘述，上链接。

    Flutter module 创建

    创建 Fluter 项目

    打包 Fluter 项目

    Fluter 引入 flutter_boost

    Harmony 引入 flutter_boost

    这里使用的是 router + FlutterPage 方式展示 Flutter 界面, Navigation 后续再说吧~

    a. 先打包 Fluter 项目，会生成三个产物

    b. 在鸿蒙项目中，引入依赖


    c. 初始化 flutter_boost


    这里部分代码省略了 ~ pushNativeRoute pushFlutterRoute popRoute 具体实现还是参考官方仓库

    d. Flutter容器与跳转



    Flutter 与鸿蒙侧通信


    Flutter 调用鸿蒙原生

    定义 Flutter 插件


    注册插件


    使用 flutter_boost 开发 Flutter混合项目，在鸿蒙这边和混合 Web 组件进行混合开发很相似，搞定Flutter页面栈+鸿蒙页面栈跳转，搞定数据通信和原生调用，基本可以满足一般的开发，以上这里仅供参考哈~



    鸿蒙 next flutter