鸿蒙 Flutter 实战：现有 Flutter 项目支持鸿蒙 II

鸿蒙 Flutter 实战：现有 Flutter 项目支持鸿蒙 II

    引言

    在之前的文章 鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙中，先容了如何改造项目，适配鸿蒙平台。
    文中讲述了整体的理念和思路，本文更进一步，联合可实操的项目代码，具体说明如何实行。
    通过模块化、鸿蒙壳工程，联合 FVM 管理多版本 Flutter SDK，最终，保持原 Flutter 代码纯净，最小化修改，完成了鸿蒙化的适配示例。
    本项目代码地址:  https://gitee.com/zacks/flutter-ohos-demo
    准备工作

    1.安装 FVM

                      登录后复制                  

1. dart pub global activate melos

复制代码

     

• 1.
  

             2.使用 FVM 安装 Flutter SDK

    分别安装官方的3.22版本，以及鸿蒙社区的 3.22.0 版本
    3.搭建 Flutter鸿蒙开辟环境

    参考文章《鸿蒙Flutter实战：01-搭建开辟环境》
    搭建项目架构

    创建目次

                      登录后复制                  

1. # 创建项目目录
2. mkdir flutter-ohos-demo

复制代码

     

• 1.
  
• 2.
  

                  设置使用的 Flutter SDK 版本
保举在 VsCode 的命令行中实行以下命令，这将创建 .fvm 目次, .vscode/setting.json 文件, 和.fvmrc 文件
                          登录后复制                  

1. fvm use3.22.0

复制代码

     

• 1.
  

             初始化工作区间

    创建目次，项目结构如下所示：
                      登录后复制                  

1. .
2. ├──  packages
3. │   ├── apps  #该目录用于存放各端应用壳工程
4. │   ├── common #该目录用于存放公共库，均为纯 dart 代码，不依赖于 ios/android 等原生实现
5. │   │   ├── domains #领域对象，存放各类实体文件，如枚举/模型/vo/事件等
6. │   │   ├── extensions #存放扩展类文件，对于类的扩展方法/属性
7. │   │   ├── services #服务类：如请求服务/授权服务/缓存服务/平台调用服务/路由服务/工具类等
8. │   │   └── widgets #通用小型 widgets, 纯dart编写的 Flutter UI 组件
9. │   ├── components #封装组件库，可以依赖于第三方库/第三方插件，或依赖于 plugins中的插件
10. │   │   ├── image_uploader
11. │   │   └── player
12. │   ├── modules
13. │   │   ├── address
14. │   │   ├── home
15. │   │   ├── me
16. │   │   ├── message
17. │   │   ├── order
18. │   │   ├── shop
19. │   │   └── support
20. │   └── plugins #插件库，自行封装的插件库，依赖于原生平台(ios/android)的代码
21. │       └── printer
22. ├── README.md
23. ├── melos.yaml
24. └── pubspec.yaml

复制代码

     

• 1.
  
• 2.
  
• 3.
  
• 4.
  
• 5.
  
• 6.
  
• 7.
  
• 8.
  
• 9.
  
• 10.
  
• 11.
  
• 12.
  
• 13.
  
• 14.
  
• 15.
  
• 16.
  
• 17.
  
• 18.
  
• 19.
  
• 20.
  
• 21.
  
• 22.
  
• 23.
  
• 24.
  

             运行 melos bootstrap

                      登录后复制                  

1. melos bootstrap

复制代码

     

• 1.
  

             开始编写代码

    在各个 package 初始化代码，如在 packages/common/domains 目次运行
                      登录后复制                  

1. fvm flutter create--template package .

复制代码

     

• 1.
  

             创建壳工程

    新建两个壳工程，一个为 app，另外一个为 ohos_app
    App 壳工程

    进入 package/apps/app 目次, 创建 app 项目，该项目为一个 App 项目，用于各平台(ios/android/mac 等， 不包罗鸿蒙)打包
                      登录后复制                  

1. fvm flutter create--template app --org com.moguyun.flutter app

复制代码

     

• 1.
  

             增长依赖项

    修改 pubspec.yaml，添加以下内容
                      登录后复制                  

1. services:
2.    path: '../../common/services'
3. domains:
4.    path:  '../../common/domains'
5. widgets:
6.    path: '../../common/widgets'
8. home:
9.    path: '../../modules/home'
10. me:
11.    path: '../../modules/me'
12. support:
13.    path: '../../modules/support'

复制代码

     

• 1.
  
• 2.
  
• 3.
  
• 4.
  
• 5.
  
• 6.
  
• 7.
  
• 8.
  
• 9.
  
• 10.
  
• 11.
  
• 12.
  
• 13.
  

             安装依赖

    运行以下命令，安装依赖
                      登录后复制                  

1. fvm flutter pub get

复制代码

     

• 1.
  

             鸿蒙壳工程

    切换鸿蒙 Flutter SDK

    首先在 flutter-ohos-demo 项目根目次，将 Flutter 版本切换到鸿蒙化的版本
                      登录后复制                  

1. fvm use custom_3.22.0

复制代码

     

• 1.
  

                  SDK 变动以后，需要重启 IDE (或者 Dart：Restart Analysis Server)，以便让 Flutter 插件重启
        创建 ohos_app 项目

    进入 packages/apps 目次，创建 ohos_app 项目
                      登录后复制                  

1. fvm flutter create--template app --platforms ohos --org com.moguyun.flutter ohos_app

复制代码

     

• 1.
  

             增长依赖项

    进入 packages/apps/ohos_app 目次中的 pubspec.yaml, 同样增长依赖项
                      登录后复制                  

1. services:
2.    path: '../../common/services'
3. domains:
4.    path:  '../../common/domains'
5. widgets:
6.    path: '../../common/widgets'
8. home:
9.    path: '../../modules/home'
10. me:
11.    path: '../../modules/me'
12. support:
13.    path: '../../modules/support'

复制代码

     

• 1.
  
• 2.
  
• 3.
  
• 4.
  
• 5.
  
• 6.
  
• 7.
  
• 8.
  
• 9.
  
• 10.
  
• 11.
  
• 12.
  
• 13.
  

             三方库鸿蒙化适配

    编辑 pubspec.yaml文件，增长以下配置，通过 dependency_overrides 来更换鸿蒙化的三方库，注意鸿蒙化的库与原库，保持版本同一
                      登录后复制                  

1. # 鸿蒙适配
2. dependency_overrides:
3.   flutter_inappwebview:
4.     git:
5.       url: https://gitee.com/openharmony-sig/flutter_inappwebview.git
6.       path: "flutter_inappwebview"

复制代码

     

• 1.
  
• 2.
  
• 3.
  
• 4.
  
• 5.
  
• 6.
  

                  每次修改完 pubspec.yaml，使用 fvm flutter pub get 更新下依赖安装。
        运行调试

    用 Deveco 打开apps/ohos_app/ohos 目次。
    在 Deveco 左上角 打开 File -> Project Structure…, 点击 Siging Configs, 勾选 Automatically generate signature, 对鸿蒙项目签名。
    在 ohos_app 目次下，使用 fvm flutter run，或者点击运行按钮，运行flutter项目。
    注意事项

   

• melos.yaml 文件中的 sdkPath: .fvm/flutter_sdk 配置了 melos 使用的 flutter SDK 版本，即由FVM 配置的当前项目版本
  
• 每次切换 Flutter SDK 时，都会修改文件 .fvm/, vscode/settings.json 文件
  
• ohos_app/pubsec.yaml 中的 dependency_overrides, 仅添加需要鸿蒙化的三方库
  
• ohos-3.22 在 build 时，有的 har 包大概确实，建议保持 ohos-Flutter 版本最新，如果照旧不可，可以考虑手动复制 har 包(使用 3.7 构建出来)
  

    如何判定三方库是否需要鸿蒙化，简而言之，如果三方库由纯 Dart 实现，则不需要单独适配，直接使用；如果三方库依赖体系底层实现，则需要鸿蒙化适配。
    三方库的适配情况，可以查询 Gitee/Github，或者查阅表格  Flutter三方库适配计划
   

• 已知插件删除标题，如果删除插件，大概需要在ohos内里手动修改代码，移除相关依赖
  

    ohos/oh-package.json5
    应用截图

   

   

   

    总结

   

• 通过 FVM 管理多个 Flutter SDK 版本，仅在鸿蒙调测打包时，切换到 ohos-flutter SDK
  
• 通过 apps 壳工程，将鸿蒙化适配的代码，只管在 ohos_app 项目中完成。通过 pub 包管理的 dependency_overrides 配置，逐个更换鸿蒙化的三方库
  
• 通过 melos 管理多包项目，Flutter 项目进行模块化、组件化、插件化拆分，职责分离，平台抽象，差别平台组合打包，有效解决平台不一致标题
  

    参考资料

   

•  鸿蒙Flutter实战：01-搭建开辟环境
  
•  鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙
  
•  Flutter三方库适配计划
  
•  flutter-ohos-demo项目代码
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。