前言

混合開發(fā)(Hybird模式)是當下大部分APP開發(fā)的主流方式。通常我們將APP內變化比較頻繁，業(yè)務比較輕，且對性能要求不是特別高的的功能，通過一些非原生的手段來實現(xiàn)，比如最簡單的嵌套一個WebView，然后通過JSBridge的方式來實現(xiàn)雙向通行，從而實現(xiàn)頁面的動態(tài)更新；同樣的在React Native,Weex,和Flutter中都提供的混合開發(fā)的能力。今天我們就看下Flutter如何與原生混合開發(fā)(這里主要以iOS開發(fā)為例)；
這里需要注意的是如果需要支持混合開發(fā)，整個Flutter項目需要創(chuàng)建為Module,然后將Module引入iOS/Android項目中，iOS通過cocoaPods來引入并加載。

創(chuàng)建Flutter-Module項目

截屏2020-06-22下午10.19.06.png

項目結構對比

兩種類型項目對比.png

創(chuàng)建一個iOS項目

通常在Flutter混合開發(fā)項目中，我們的iOS或者Android項目會創(chuàng)建在Module的同級目錄下（實際上就是為了引用個時候方便，其實我們完全可以將Module創(chuàng)建在任意位置，只是在項目中引用時路徑太惡心罷了）。

• 通過pod引入引入flutter_module，配置Podfile:

# Uncomment the next line to define a global platform for your project
flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

platform :ios, '9.0'

use_frameworks!
target 'Flutter_iOS' do
  install_all_flutter_pods(flutter_application_path)
end

執(zhí)行pod install，此時我們的原生項目就引入了整個flutter_module；

• 原生調起Flutter模塊

#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@property (nonatomic,strong) FlutterViewController *flutterVC;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.flutterVC = [[FlutterViewController alloc]init];
}
- (IBAction)toFlutterModule:(UIButton *)sender {  
    [self presentViewController:self.flutterVC animated:YES completion:nil];
}
@end

這里值得注意的是flutterVC的初始化我沒有放在點擊事件內部，而是放在viewDidLoad中，FlutterViewController是一個特殊的視圖控制器，并不像我們平常使用的UIViewController,在dismiss或者pop后會被釋放，它不會被釋放而且它被創(chuàng)建后的生命周期跟AppDelegate是一致的。
在純flutter項目中，FlutterViewController通常被指定為UIApplication.keyWindow.rootViewController。

調起效果圖.gif

通信

這里主要用到的是MethodChannel

Flutter官方圖

1. setMethodCallHandler: 注冊監(jiān)聽，處理收到的消息
2. invokeMethod: 發(fā)送消息

• Flutter

class _HomePageState extends State<HomePage> {
  //創(chuàng)建通道,設置通道標識
  final MethodChannel _msgChannel = MethodChannel('msg_channel');
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //添加監(jiān)聽,接受來自native的消息
    _msgChannel.setMethodCallHandler((MethodCall call){
      print('收到iOS的消息=>${call.method}\n${call.arguments}');
      return null;
    });
  }

GestureDetector(
    onTap: (){
        print('onTap.....');
        //向native發(fā)送消息
        _msgChannel.invokeMethod('disMissVC',{'name':'zezefamily','age':'3','from':'Shannxi of China'});
    },
    child:  Text('返回上一頁'),
)

• Native

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.flutterVC = [[FlutterViewController alloc]init];
    //創(chuàng)建通道，并綁定通道標識
    self.methodChannel = [FlutterMethodChannel methodChannelWithName:@"msg_channel" binaryMessenger:self.flutterVC];
    //添加監(jiān)聽：接收來自Flutter的消息
    __weak typeof(self) weakSelf = self;
    [self.methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        
        if([call.method isEqualToString:@"disMissVC"]){
            [weakSelf dismissVC:call.arguments];
        }
        
    }];
}
- (void)dismissVC:(id)arguments
{
    NSLog(@"來自Flutter=>%@",arguments);
    [self dismissViewControllerAnimated:YES completion:nil];
}
- (IBAction)nativeToFlutter:(UIButton *)sender {
    //Native=>Flutter
    [self.methodChannel invokeMethod:@"msg_channel" arguments:@{@"name":@"我是原生",@"desc":@"我給你發(fā)消息了"}];
}

控制臺輸出：

2020-06-23 15:20:54.568666+0800 Flutter_iOS[64555:1302095] flutter: onTap.....
2020-06-23 15:20:54.569892+0800 Flutter_iOS[64555:1301842] 來自Flutter=>{
    age = 3;
    from = "Shannxi of China";
    name = zezefamily;
}
2020-06-23 15:20:56.594187+0800 Flutter_iOS[64555:1302095] flutter: 收到iOS的消息=>msg_channel
{name: 我是原生, desc: 我給你發(fā)消息了}

這樣就實現(xiàn)了一個雙向的通信能力，非常類似于WebViewJavascriptBridge；

j4i8b-w6dwn.gif

總結

參考文獻：https://flutter.dev/docs/development/add-to-app