iOS原生与flutter混编环境的配置

flutter语言已经发布2年多的时间了，现在flutter版本也已经比较稳定，据笔者了解，很多公司已经开始尝试使用flutter进行项目开发，比如大家熟悉的闲鱼。flutter由于跨端、原生的体验、简洁的dart语言编写、丰富的flutter组件等优势，我们公司也有app开始采用flutter开发。当项目早期功能比较少的情况，我们采用的纯flutter开发，随着项目的进展，功能的丰富，包括第三方SDK的接入，比如推送、分享、地图等等，由于有些三方还不支持flutter语言的集成等原因，我们就需要转变为原生与flutter混编的模式。那么要进行混编，第一步就是进行iOS原生与flutter混编环境的配置，下面简要的说一下环境配置的步骤：

一、创建flutter项目模块：

利用终端命令行先进入iOS项目目录下：

 cd /Users/Dustin/Desktop/pms-ios

利用终端命令行创建flutter模块：(flutter_module自己命名的，记得字母都要小写，不然会报错)

flutter create -t module flutter_module 

如下示图1：

示图1

二、Pod引入flutter模块：

1、如果项目中没有用到cocoaPods，先初始化pod，终端运行命令：

pod init

查看项目目录中会多一个 Podfile 文件，我们在该文件最后面添加命令如下：

target 'AizhizuPartner' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for AizhizuPartner

end

flutter_application_path = 'flutter_module'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
#其中flutter_application_path为flutter模块相对于podfile文件的位置。

2、添加好后，终端运行命令:

pod install

三、项目中配置 Dart 编译脚本

在iOS项目Build Phases 选项中，点击左上角➕号按钮，选择 New Run Script Phase ，Run Script下添加如下脚本：

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

如下示图2所示：

示图2

四、项目中使用FlutterViewController，尝试原生和flutter交互

如下代码所示：

- (IBAction)jumpToFlutter:(UIButton *)sender {
    
    [self.navigationController pushViewController:self.flutterVC animated:YES];
}

- (FlutterViewController *)flutterVC{
    if (!_flutterVC) {
        _flutterVC = [[FlutterViewController alloc] init];
        UIView *splashView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
        splashView.backgroundColor = [UIColor whiteColor];
        _flutterVC.splashScreenView = splashView;//flutter渲染是异步的，如果是第一次渲染，并且没有设置splashScreenView，则默认加载启动页图片
    }
    return _flutterVC;
}

五、需要注意的：

需要注意的是iOS原生跳转flutter时，第一次跳转会异步渲染flutter环境，因此，FlutterViewController实例有个splashScreenView属性，防止用户在打开flutter页面时会有一个中间的空档，如果我们没有设置此属性，iOS默认将app应用的LaunchStoryboard设置为此属性的值，默认可能设置成功也可能设置失败，取决于你APP的启动图片是否是用LaunchStoryboard来设置的，所以，没有特殊情况，最好手动设置一下此属性；另外，混编最好将FlutterViewController的实例对象设置为单例，以避免用户跳转flutter页面多次异步初始化flutter环境。