前言
混合開發(fā)(Hybird模式)是當(dāng)下大部分APP開發(fā)的主流方式吞杭。通常我們將APP內(nèi)變化比較頻繁，業(yè)務(wù)比較輕变丧，且對(duì)性能要求不是特別高的的功能芽狗，通過一些非原生的手段來實(shí)現(xiàn)，比如最簡單的嵌套一個(gè)WebView痒蓬，然后通過JSBridge的方式來實(shí)現(xiàn)雙向通行童擎，從而實(shí)現(xiàn)頁面的動(dòng)態(tài)更新；同樣的在React Native,Weex,和Flutter中都提供的混合開發(fā)的能力攻晒。今天我們就看下Flutter如何與原生混合開發(fā)(這里主要以iOS開發(fā)為例)柔昼；
這里需要注意的是如果需要支持混合開發(fā)，整個(gè)Flutter項(xiàng)目需要?jiǎng)?chuàng)建為Module,然后將Module引入iOS/Android項(xiàng)目中炎辨，iOS通過cocoaPods來引入并加載。
創(chuàng)建Flutter-Module項(xiàng)目
項(xiàng)目結(jié)構(gòu)對(duì)比
我發(fā)現(xiàn)的唯一區(qū)別就是原來的
android和ios文件夾變成了隱藏文件聪姿。而且Module項(xiàng)目是可以獨(dú)立運(yùn)行的碴萧。
創(chuàng)建一個(gè)iOS項(xiàng)目
通常在Flutter混合開發(fā)項(xiàng)目中，我們的iOS或者Android項(xiàng)目會(huì)創(chuàng)建在Module的同級(jí)目錄下（實(shí)際上就是為了引用個(gè)時(shí)候方便末购，其實(shí)我們完全可以將Module創(chuàng)建在任意位置破喻，只是在項(xiàng)目中引用時(shí)路徑太惡心罷了）。
- 通過
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曹质，此時(shí)我們的原生項(xiàng)目就引入了整個(gè)flutter_module；
- 原生調(diào)起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的初始化我沒有放在點(diǎn)擊事件內(nèi)部，而是放在viewDidLoad中羽德，FlutterViewController是一個(gè)特殊的視圖控制器几莽，并不像我們平常使用的UIViewController,在dismiss或者pop后會(huì)被釋放凝赛，它不會(huì)被釋放而且它被創(chuàng)建后的生命周期跟AppDelegate是一致的跑筝。
在純flutter項(xiàng)目中，FlutterViewController通常被指定為UIApplication.keyWindow.rootViewController蜻懦。
通信
這里主要用到的是MethodChannel
MethodChannel中兩個(gè)核心的方法：
-
setMethodCallHandler:注冊(cè)監(jiān)聽姨夹，處理收到的消息 -
invokeMethod:發(fā)送消息
- Flutter
class _HomePageState extends State<HomePage> {
//創(chuàng)建通道,設(shè)置通道標(biāo)識(shí)
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)建通道纤垂，并綁定通道標(biāo)識(shí)
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ā)消息了"}];
}
控制臺(tái)輸出：
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ā)消息了}
這樣就實(shí)現(xiàn)了一個(gè)雙向的通信能力，非常類似于WebViewJavascriptBridge磷账；
