Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

背景

此篇文章，主要针对想要在原有Native工程的基础上集成Flutter的需求，所提供的混编方案的探讨。

1. 官方方案的优缺点

（1）优势：

不须要每次 Run 起来以后，先进行 同步flutter代码（组件化Flutter后，由于组件化后flutter代码已经变为framework，因此每次进来须要先热更新同步代码） 不须要单独搞一个组件进行集成，管理组件的版本，发布等。 （2）缺点：

会很是耦合工程，须要修改工程配置，添加 BUILD PHASE 调用 flutter 中 xcode_backend.sh 脚本 去编译 Flutter。 若是使用pod管理，那么还需修改xcconfig配置。 由于须要调用 Flutter 的编译脚本，因此这种方式集成后，团队内全部组员电脑和打包机，都必须安装Flutter环境才能编译成功。 2. Flutter 组件化混编方案

（1）优势：

不需修改 原有 xcconfig 配置。 不须要添加 Run Script 脚本。 运行不须要依赖 Flutter 环境。 （2）缺点

须要单独管理一个 flutter私有索引库。 开发加载 Flutter 页面 首次须要热更新 进行刷新同步 Flutter 代码。 （3）混编方案 实现核心思想

经过查看 Flutter 编译脚本xcode_backend.sh 和 测试单独引入编译产物，发现其实 只要拥有 Flutter 的编译产物，项目就能够接入 Flutter 的功能。 因此说只要把Flutter编译好的产物，放在工程里，那么就无需配置每次调用 xcode_backend.sh 脚本，也无需强耦合Flutter环境，不须要全部组员安装Flutter环境，只须要有发布开发需求的同窗进行安装便可。 这就是Flutter组件化的实现核心点。 （4）Flutter 核心编译产物

App.framework：dart业务源码相关文件，在 Debug 模式下就是一个很小的空壳，在 Release 模式下包含所有业务逻辑。 flutter_assets：Flutter依赖的静态资源，如字体，图片等。 Flutter.framework：Flutter库和引擎。 目录

Flutter组件化 - 混编方案 Flutter组件化 - 断点调试 Flutter组件化 - 发布更新 Flutter组件化 - 一些坑点 1、Flutter组件化 - 混编方案

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

1. Git仓库存放 - 示例说明

主要分为3个仓库，分别存放Native项目、Flutter 工程源码、Flutter 编译产物私有pod库。

flutter 工程建立，使用 flutter create -t module my_flutter 命令

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

2. 项目目录 - 示例

Flutter_iOS ：iOS开发主项目。 flutter_library ：Flutter 项目的开发源码。 FlutterSDK ：Flutter 源码的编译产物，所构建的私有 pod 库。 Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

3. 混编方案说明

根据 只要拥有 Flutter 的编译产物，项目就能够接入 Flutter 的功能 的核心思想，咱们若是进行组件化Flutter混编，那么大概思路是： 有组件化环境 - 混编方案说明

（1）在 flutter 项目目录下，执行 flutter build ios 针对 Flutter 项目进行编译打包，生成 Flutter 编译产物。

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

Flutter 的产物分为两种模式，一个是 Debug 模式，采用 JIT（Just In Time）的方式，好处是能够支持热更新，方便调试,，可是性能比较慢。

另外一种是 AOT（Ahead Of Time）release 模式，好处是性能比较好。

经过 flutter build ios --debug 可打包出 Debug 下的 Flutter 编译产物。

flutter build ios 命令依赖于 Flutter 生成的 Runner 工程，因此要确保 Runner 工程可以编译成功，这样才能生成 flutter 编译产物。若是遇到编译失败，能够检查下 bundle id 修改一下，使用本身的证书。以下图示例：

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

（2）针对编译产物，制做 Flutter SDK 私有库， podspec 指定 App.framework、engine、flutter_assets 路径。

podspec 有省略

Pod::Spec.new do |s| s.name = "FlutterSDK" s.vendored_frameworks = 'Framework/.framework', 'Framework/engine/.framework' s.resources = 'Framework/flutter_assets' end （3）上传 Flutter SDK 私有库项目到云端私有pod索引库。（如何制做私有 pod 索引库，可搜索查看相关资料，这里不细说了）

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

（4）iOS 主项目指定 Podfile ，拉取云端Flutter私有库到本地。

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

没有组件化环境 - 混编方案说明

没有组件化环境的项目，而且不会创建私有索引库。 那么只有手动 执行 flutter build ios 命令后，将编译产物手动拖拽到iOS项目中。 4. 最后效果

以下图，能够看到最终工程只引用了一个私有 pod 库。

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

总结

对 flutter 项目执行 flutter build ios 命令，生成编译产物。 针对编译产物，制做为私有 pod 库。 主工程经过 cocoapods 引入私有 pod 库。 2、Flutter 组件化 - 断点调试

由于是编译后的资源接入，咱们还须要保证 Flutter 开发的同窗能够正常调试。

目录

单独运行 Flutter 工程调试 同时调试 iOS 和 Flutter（不支持断点） 同时调试 iOS 和 Flutter（支持断点） 注意点：

确保，已经安装 Android Studio（用于打开 Flutter 工程） 确保，项目中依赖的 Flutter 打包出来的是 Debug 版本，Release 版本是没法热更新和调试的（使用 flutter build ios --debug 打包 debug 版本）

1. 单独运行 Flutter 工程调试 （只适合和 Native 没有太多关联的工程，比较少用）

使用 Android Studio 打开 Flutter 工程目录

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

选择好真机或者模拟器，而后点击 Run 按钮

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

这样 Run 起来后，咱们就能够在 Flutter 项目中打断点调试。这种方法 只适合和 Native 没有关联的工程，比较少用。

2. 同时调试 iOS 和 Flutter（不支持Flutter断点的方式）

这种方法，须要先打开 Xcode 运行到 Flutter 页面，再进行附加 Flutter 端口号。

使用 Xcode 打开 iOS 项目，运行起 Flutter 页面。 Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

会发现会输出一行日志，其中有一个端口号咱们记录下来，例如： flutter: Observatory listening on http://127.0.0.1:60455/ 而后 使用 Android Studio 打开 Flutter 项目（不点击运行），在 底部的 终端框中输入 flutter attach --debug-port=60455，端口号替换为xcode 日志输出的端口号。 Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

Gif 演示

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

总结

先打开 iOS 工程，运行起 Flutter 页面，获得一个日志输出的端口号。 而后 Android Studio 打开 Flutter 工程，在底部终端处输入 flutter attach --debug-port=日志输出端口号，而后附加成功便可。 注意点：附加成功后，在终端处，按小写 r 只会刷新有有修改的文件，按大写的 R 会所有刷新，若是使用组件化的话，每次进入 Flutter 页面，Android Studio 附加成功后，都要先按大写 R 所有刷新一次 同步到最新代码。不然还会显示旧的页面。 3. 同时调试 iOS 和 Flutter（同时支持Flutter 和 Xcode断点的方式）

这种方法，须要先打开 Android Studio 选择 Attach Debugger to Android Process 等待 Flutter 页面链接，而后在 iOS 端，运行到 Flutter 页面，Android Studio 就会附加成功。

首先打开 Flutter 工程，直接点击 Attach Debugger to Android Process，而后会等待 Flutter 页面链接。 Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

而后运行 iOS 工程，进入 Flutter 页面。 而后就会发现 Android Studio 已经显示在 同步文件了（Syncing files to device 张大森的 iPhone...） 同步完成即链接成功。 Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

注意坑点

咱们能够看到 闪电符号 Flutter Hot Reload 和 返回绿色符号 Flutter Hot Restart Flutter Hot Reload 为局部刷新，好比某个文件有改动，才会同步刷新此页面。Flutter Hot Restart能够理解为所有刷新，在 Android Studio 面板上也有对应按钮，相应也有对应快捷键。 按照 Flutter 组件化的开发方式，咱们首次附加链接成功后，必定要遵循一个步骤，先 点击 Flutter Hot Restart 进行所有刷新，再点击 Flutter Hot Reload 局部刷新。由于本人发现，若是最后一次刷新点击的是 Flutter Hot Restart 按钮，那么发现断点会不生效，只有点击 Flutter Hot Reload 后 触发的断点才会生效。 Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学 Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学 演示 Gif

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

打断点.gif 总结

Android Studio 打开 Flutter 工程 ，点击 Attach Debugger to Android Process 而后运行 Flutter 页面。 而后点击Flutter Hot Restart （同步最新 Flutter 代码），在点击 Flutter Hot Reload 确保断点可以生效。 3、Flutter组件化 - 发布更新

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学 发布大概流程

（1）对 Flutter 工程 执行 flutter build ios 或 flutter build ios --debug 生成编译产物。

（2）把编译产物复制移动到 Flutter 私有库目录下。

（3）打包 上传更新私有库内容。

（4）主工程拉取最新版本。

版本更新说明

开发期间：基本只用热更新进行开发代码。 发布版本：通常可在上线前进行发布，因此组件版本更新，用的比较少。 4、一些坑点

（1）FlutterViewController 不释放

Flutter 开发集合系列之优雅的 Flutter 组件化 混编方案大神必学

加载 Flutter 页面后，返回后，VC 不会释放。闲鱼有大神研究过这个问题，不过目前咱们没有找到解决方案去释放 VC。 咱们使用单例持有了 VC，只能作到不每次进行叠加内存，不从新建立。每次进入 Flutter 页面都先重置一下。

（1）不支持x86_64

能够用xcode跑下，生成App.framewok，而后 lipo 命令合并下。 咱们目前不支持模拟器，这种方案没有进行测试。 其它

若是有更好的调试方法，坑点解决方法，混编方法，欢迎交流反馈下。 下一篇文章 （主要涉及到 Flutter 开发的一些知识）

教你 Flutter 如何与原生进行交互 待更新 最近有不少粉丝反映怎么学好java？ java开发技术不是一两天就能学好的关键是你看怎么学 跟谁去学，俗话说的好师傅领进门，修行靠我的，这个不是短期类所能完成的任务，有想法的上方关注，下方留言“学习”我教你！