flutter组件化调研
一、组件化接入方式
跟原生组件化类似，共有两种方式接入：pod和framework
怎么配置flutter环境，flutter官网上讲得很详细了，不在累赘了
1.以pod的方式接入
1.创建一个flutter_module
flutter create -t module flutter_module
WX20220303-103123@2x.png
额。。。瞬间翻车。。。尴尬得一批。。。囧么办呢
现在用的是zsh命名，需要切换到bash命令
source ~/.bash_profile
WX20220303-103445@2x.png
可以看到文件下面的flutter_module文件
WX20220303-104104@2x.png
iOS接入
然后是创建一个iOS项目。并创建pod文件
image.png
image.png
修改podfile，添加
flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
install_all_flutter_pods(flutter_application_path)
image.png
image.png
pod 成功了
image.png
在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
image.png
成了
image.png
android接入
创建安卓项目
image.png
1 在原生Android项目里面的 app目录下面的 build.gradle里面添加如下代码
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
image.png
我们知道这是使用Java 8所需要的配置，在这里的作用是为了解决版本兼容问题，如果不配置的话运行项目可能会报错：Invoke-customs are only supported starting with Android O (--min-api 26)。
2然后在项目根目录下的setting.gradle文件中配置：
// 加入下面配置
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
'flutter_module/.android/include_flutter.groovy'
))
rootProject.name = "AndroidProject"
include ':flutter_module'
project(':flutter_module').projectDir = new File('../flutter_module')
image.png
sync之后我们发现原生工程工程的目录结构里面多出一flutter名字的library module 的库工程 我们需要在app目录下的build.gradle 里面添加该module的依赖
implementation project(':flutter')
image.png
2.以framewor的方式接入
同上
创建一个MyFlutterPod仓库
cd 到flutter_module目录下，然后build一下就有对应的文件了
flutter build ios --debug //编译debug产物
flutter build ios --release --no-codesign //编译release产物（选择不需要证书）
flutter build ios 默认是使用证书打release产物
image.png
把需要的产物copy到MyFlutterPod仓库下，为了方便我新建了一个ios_frameworks
image.png
image.png
然后在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'
image.png
image.png
跑一下完成
image.png
二、组件化接入
每个语言都只有一个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.原生交互
维护一个交互的路由
image.png
