一、组件化接入方式

跟原生组件化类似，共有两种方式接入：pod和framework 怎么配置flutter环境，flutter官网上讲得很详细了，不在累赘了

1.以pod的方式接入

1.创建一个flutter_module

 flutter create -t module flutter_module 
复制代码

额。。。瞬间翻车。。。尴尬得一批。。。囧么办呢现在用的是zsh命名，需要切换到bash命令

source ~/.bash_profile
复制代码

可以看到文件下面的flutter_module文件

然后是创建一个iOS项目。并创建pod文件

修改podfile，添加

  flutter_application_path = '../flutter_module'
  load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
  install_all_flutter_pods(flutter_application_path)
复制代码

pod 成功了

在ViewController中修改代码

#import "ViewController.h"
#import <Flutter/FlutterViewController.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setFrame:CGRectMake(100, 100, 200, 50)];
    [button setBackgroundColor:[UIColor greenColor]];
    [button setTitle:@"ClickMePushToFlutterVC" forState:UIControlStateNormal];
    [button addTarget:self action:@selector(btn_click) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)btn_click {
    
//    FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
    if (self.navigationController) {
        [self.navigationController pushViewController:flutterViewController animated:YES];
    } else {
        [self presentViewController:flutterViewController animated:YES completion:nil];
    }
}

@end

复制代码

成了

2.以framewor的方式接入

同上创建一个MyFlutterPod仓库 cd 到flutter_module目录下，然后build一下就有对应的文件了

 flutter build ios --debug      //编译debug产物
 flutter build ios --release --no-codesign //编译release产物（选择不需要证书）
 flutter build ios 默认是使用证书打release产物
复制代码

把需要的产物copy到MyFlutterPod仓库下，为了方便我新建了一个ios_frameworks

然后在MyFlutterPod仓库，增加一下framework打包代码

  s.static_framework = true
  p = Dir::open("ios_frameworks")
  arr = Array.new
  arr.push('ios_frameworks/*.framework')
  s.ios.vendored_frameworks = arr
复制代码

在到iOSProject项目中把MyFlutterPod仓库pod进来

pod 'MyFlutterPod', :path => '../MyFlutterPod'
复制代码

跑一下完成

二、组件化接入

每个语言都只有一个main入口函数，dart也不例外，所以你接入的时候也只能绑定一个flutter_module（即app.framework）然后通过flutter_module来进行模块拆分，通过路由跳转到对应的模块初始化flutter有两种方式

1.直接用FlutterViewController

    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
复制代码

不能先加载引擎，初始化的时候，需要一段时间

2.使用engine去初始化

FlutterEngine *flutterEngine =
    [[FlutterEngine alloc] initWithName:@"my flutter engine"];
[[flutterEngine navigationChannel] invokeMethod:@"setInitialRoute"
                                      arguments:@"/onboarding"];
[flutterEngine run];
复制代码

设置路由跳转的时候不起作用 flutterViewController.setInitialRoute("test1")

3.初始化两个引擎

这样可以大大提高UI初始化速度，减少用户等待时间，大大提高用户体验但是随之而来就是，大量的内存消耗，复杂的页面跳转逻辑

三、flutter与原生的通信

1.BasicMessageChannel：

用于传递字符串和半结构化的信息，持续通信，收到消息后可以回复此次消息，如：Native将遍历到的文件信息陆续传递到Dart，在比如：Flutter将从服务端陆陆续获取到信息交个Native加工，Native处理完返回等；

2.MethodChannel：

用于传递方法调用（method invocation）一次性通信：如Flutter调用Native拍照；

3.EventChannel:

用于数据流（event streams）的通信，持续通信，收到消息后无法回复此次消息，通常用于Native向Dart的通信，如：手机电量变化，网络连接变化，陀螺仪，传感器等；

四、组件化方案

1.接入方式

以flutter_module的方式去接入，减少打包成framework的成本

2.原生捆绑

flutter_module是调用flutter组件的中间键，用于与原生进行捆绑

3.跳转方案

1.用FlutterViewController去初始化，再进行组建的跳转 2.维护一个路由用于每个组建的跳转

4.原生交互

维护一个交互的路由

flutter组件化调研