一、組件化接入方式

跟原生組件化類似居暖，共有兩種方式接入：pod和framework
怎么配置flutter環(huán)境米诉，flutter官網(wǎng)上講得很詳細(xì)了，不在累贅了

1.以pod的方式接入

1.創(chuàng)建一個(gè)flutter_module

 flutter create -t module flutter_module 

WX20220303-103123@2x.png

額游两。砾层。。瞬間翻車器罐。梢为。。尷尬得一批。铸董。祟印。囧么辦呢
現(xiàn)在用的是zsh命名，需要切換到bash命令

source ~/.bash_profile

WX20220303-103445@2x.png

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

WX20220303-104104@2x.png

iOS接入

然后是創(chuàng)建一個(gè)iOS項(xiàng)目粟害。并創(chuàng)建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

#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接入

創(chuàng)建安卓項(xiàng)目

image.png

1 在原生Android項(xiàng)目里面的 app目錄下面的 build.gradle里面添加如下代碼

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

image.png

我們知道這是使用Java 8所需要的配置，在這里的作用是為了解決版本兼容問題悲幅，如果不配置的話運(yùn)行項(xiàng)目可能會(huì)報(bào)錯(cuò)：Invoke-customs are only supported starting with Android O (--min-api 26)易结。

2然后在項(xiàng)目根目錄下的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之后我們發(fā)現(xiàn)原生工程工程的目錄結(jié)構(gòu)里面多出一flutter名字的library module 的庫工程 我們需要在app目錄下的build.gradle 里面添加該module的依賴

  implementation project(':flutter')

image.png

2.以framewor的方式接入

同上
創(chuàng)建一個(gè)MyFlutterPod倉庫
cd 到flutter_module目錄下仓犬，然后build一下就有對(duì)應(yīng)的文件了

 flutter build ios --debug      //編譯debug產(chǎn)物
 flutter build ios --release --no-codesign //編譯release產(chǎn)物（選擇不需要證書）
 flutter build ios 默認(rèn)是使用證書打release產(chǎn)物

image.png

把需要的產(chǎn)物copy到MyFlutterPod倉庫下，為了方便我新建了一個(gè)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項(xiàng)目中把MyFlutterPod倉庫pod進(jìn)來

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

image.png

image.png

跑一下完成

image.png

二瞭吃、組件化接入

每個(gè)語言都只有一個(gè)main入口函數(shù)箭阶，dart也不例外府树，所以你接入的時(shí)候也只能綁定一個(gè)flutter_module（即app.framework）
然后通過flutter_module來進(jìn)行模塊拆分讨阻，通過路由跳轉(zhuǎn)到對(duì)應(yīng)的模塊
初始化flutter有兩種方式

1.直接用FlutterViewController

    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];

不能先加載引擎，初始化的時(shí)候聚蝶，需要一段時(shí)間

2.使用engine去初始化

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

設(shè)置路由跳轉(zhuǎn)的時(shí)候不起作用 flutterViewController.setInitialRoute("test1")

3.初始化兩個(gè)引擎

這樣可以大大提高UI初始化速度杰妓，減少用戶等待時(shí)間，大大提高用戶體驗(yàn)
但是隨之而來就是碘勉，大量的內(nèi)存消耗巷挥，復(fù)雜的頁面跳轉(zhuǎn)邏輯

三、flutter與原生的通信

1.BasicMessageChannel：

用于傳遞字符串和半結(jié)構(gòu)化的信息验靡，持續(xù)通信倍宾，收到消息后可以回復(fù)此次消息，如：Native將遍歷到的文件信息陸續(xù)傳遞到Dart晴叨，在比如：Flutter將從服務(wù)端陸陸續(xù)獲取到信息交個(gè)Native加工凿宾，Native處理完返回等；

2.MethodChannel：

用于傳遞方法調(diào)用（method invocation）一次性通信：如Flutter調(diào)用Native拍照兼蕊；

3.EventChannel:

用于數(shù)據(jù)流（event streams）的通信初厚，持續(xù)通信，收到消息后無法回復(fù)此次消息孙技，通常用于Native向Dart的通信产禾，如：手機(jī)電量變化，網(wǎng)絡(luò)連接變化牵啦，陀螺儀亚情，傳感器等；

四哈雏、組件化方案

1.接入方式

以flutter_module的方式去接入楞件，減少打包成framework的成本

2.原生捆綁

flutter_module是調(diào)用flutter組件的中間鍵衫生，用于與原生進(jìn)行捆綁

3.跳轉(zhuǎn)方案

1.用FlutterViewController去初始化，再進(jìn)行組建的跳轉(zhuǎn)
2.維護(hù)一個(gè)路由用于每個(gè)組建的跳轉(zhuǎn)

4.原生交互

維護(hù)一個(gè)交互的路由

image.png