Flutter与原生混编-framework方式

距离上次写Flutter【iOS 学习Flutter (网络库dio简单封装，数据解析)】已经过去快一年了，哈哈。
最近有时间搞了一下混编方案以及通过pod来管理+一些简单的交互demo
使用的是framework导入的方式，这样多人开发不需要每个人的电脑都有Flutter环境，相对官方方式友好度较高
本文用到的2个仓库：flutter_pod，flutter_podDemo

以iOS为例下面一步步来记录一下

Flutter编译后得到产物

• 首先肯定先创建一个文件夹，然后在文件夹里创建一个Flutter模版项目，通过命令flutter create -t module flutter_module，（图中有些文件是后面的流程产生的或者自己记录的，跟这一步没有关系，不用在意）。
  image.png
• 可以显示一下隐藏文件，里面有个.ios，如果build遇到一些什么bundle id，证书的问题，可以在这个Runner项目里改一改。
• 这里我们假设一下，Flutter里用到了插件，随便加一个shared_preferences插件
  image.png
• 通过以下命令编译得到产物(我们需要的东西)。

flutter build ios --debug
flutter build ios --release --no-codesign
/// 还有一些参数可以自己了解一下，后面脚本文件里也会有用到的，可以参考参考

image.png

• 这里用了别人的一个脚本文件(move_file.sh)，不过改了增加了一些东西，作用就是通过脚本创建一个文件夹，将编译后的这些库统一拷贝到一起(ios_frameworks)，然后增加了一些指令参数判断，sh move_file [debug/release] [sim]跑一下就行了，可以去github仓库里看具体的脚本文件。如下图，ios_frameworks里的东西就是我们需要的了。
  image.png

pod集成产物(跟弄私有库没啥大区别)

• 既然得到了需要的产物，那么接下来就是原生项目集成了，采取的是pod集成，方便快捷。
• 在flutter_pod文件夹里创建.podspec文件，pod spec create flutter_pod
  image.png
• 编辑.podspec文件,按情况来

Pod::Spec.new do |s|
  s.name             = 'flutter_pod'
  s.version          = '1.0.0'
  s.summary          = 'flutter_pod'

  s.description      = <<-DESC
        原生与flutter交互
                       DESC

  s.homepage         = 'https://github.com/huangjian0414/flutter_pod'

  s.license          = { :type => 'MIT', :file => 'LICENSE' }
  s.author           = { 'huangjian0414' => 'xxx@gmail.com' }
  s.source           = { :git => 'https://github.com/huangjian0414/flutter_pod', :tag => s.version }
  
  s.ios.deployment_target = '9.0'
  
  s.static_framework = true
  p = Dir::open("ios_frameworks")
  arr = Array.new
  arr.push('ios_frameworks/*.framework')
  s.ios.vendored_frameworks = arr
end

• 在flutter_pod同级目录创建原生demo项目，不是必须这个路径，这里为了方便本地pod
  image.png
• 在podfile里增加如下行，再pod install一下，即导入了flutter生成的库。

pod 'flutter_pod', :path => '../flutter_pod'

image.png

使用

• 调整一下AppDelegate，来使用一下看看

/// .h
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@end

/// .m
#import "AppDelegate.h"
#import "ViewController.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.window setBackgroundColor:[UIColor whiteColor]];
    ViewController *con = [[ViewController alloc] init];
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:con];
    [self.window setRootViewController:nav];
    [self.window makeKeyAndVisible];
    
    [GeneratedPluginRegistrant registerWithRegistry:self];
    
    return YES;
}

@end

• 在ViewController里增加一个按钮跳转Flutter界面
  image.png
• 效果如下
  May-17-2021 20-03-29.gif
  这样就完成了一个简单的集成了

可能遇到的问题

• 更换一下Runner工程的bundle id
  image.png

• 如果build的时候如下架构报错，项目设置无效架构
  

  image.png

  将framework通过cocoapods管理一下，流程就不说了，比较简单，网上也多

  • 弄好之后就可以pod 'flutter_pod',:git =>'https://github.com/xxx/flutter_pod',:tag => '0.1.0'导入了
    image.png

  优化

  • 打包出来的Flutter.framework release包，过大。xcrun bitcode_strip Flutter -r -o Flutter移除bitcode代码，本文已放入move_file.sh里处理。

  老项目flutter build 可能Warning
  

  image.png
  • 在AndroidManifest.xml里增加俩行

<meta-data
android:name="flutterEmbedding"
android:value="2" />

image.png

• 或者如下错误，根据提示删除重跑就行了

  
  image.png

带一点混编交互跳转吧，demo里反正也有

• Flutter按钮点击跳转原生，使用MethodChannel通信
  image.png
  image.png
  image.png
• 原生跳``Flutter指定界面，点击Flutter界面按钮，事件交给原生，并回调数据给Flutter
  image.png
  image.png
  image.png

都是一些简单的demo，实际项目自行研究，本文只做一点混编经验的分享

demo效果如下，本文所有东西都在文首的2个仓库里。

May-20-2021 10-59-57.gif

补充：demo里文档补充了点安卓混编，没搞过安卓简单研究了一下，可参考参考。安卓demo
2021.8.16补充：git仓库增加flutter嵌入原生页面方式以及多FlutterEngine, FlutterEngineGroup等

如有错误，大佬带我。

end