ios实用开发技巧

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

2019-08-28  本文已影响0人  绿豆粥与茶叶蛋

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环境。

上一篇下一篇

猜你喜欢

热点阅读