混合开发：flutter集成进iOS工程

本文主要记录了将flutter模块以framework的形式集成进iOS主工程的方案

首先我们先了解一下flutter 所具备的类型

Flutter Application：标准的Flutter App工程，包含标准的Dart层与Native平台层

Flutter Module ：Flutter组件工程，仅包含Dart层实现，Native平台层子工程为通过Flutter自动生成的隐藏工程

Flutter Plugin： Flutter平台插件工程，包含Dart层与Native平台层的实现

Flutter Package： Flutter纯Dart插件工程，仅包含Dart层的实现，往往定义一些公共Widget

现在我们就是要在Flutter Module 基础上进行一系列操作

先看版本基本配置

DateTime    ：2019.10.31
Flutter  版本 ：Channel master, v1.10.2-pre.4
OSX      版本 ：10.14.6
Xcode    版本 ：Version 11.1 (11A1027)
iOS      版本 ：iOS 13.1
iOS      语言 ：Object-C
Cocoapods版本 ：1.7.5

目前为止有两种方案可以将flutter集成进iOS项目中

第一种方案： Flutter 官方已经给出的混编方案：

https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

文档里写的比较清楚了的，这里就不再多做赘述，但是需要注意一点的是，在2019年8月1日后，官方给出的集成方案更新，详情可参考

https://github.com/flutter/flutter/wiki/Upgrading-Flutter-added-to-existing-iOS-Xcode-project

大意就是说现在我们只需要在iOS工程的podfile文件中添加如下命令

# Flutter
flutter_application_path = '../flutter_module/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'XXXAPP' do
   use_frameworks!
 
   # Flutter
   install_all_flutter_pods(flutter_application_path)

end

就可以一次性将flutter的编译产物由此依赖进入iOS项目中，不用再每次去在Xcode->Build Phases中去添加设置脚本文件路径等繁琐操作，一定程度上简化了集成的繁琐性。

优点：该方案遵循flutter官方建议，规范性不言而喻
缺点：此方案对团队开发不是很友好，需要求每名开发同学的电脑上都要配置flutter环境。并且 iOS端开发与flutter端开发在代码纠缠性上会变得复杂化

第二种方案：将flutter以framework的形式通过Cocoapods引入iOS工程

这也是我们本篇的主要内容
其中 Cocoapods引入也分为两种方式：

pod的本地路径化引入

pod通过远程Git仓库引入
我们先来介绍本地化引入

一、 pod的本地化引入

1.1、创建iOS项目

在电脑桌面Desktop创建外层文件夹 FlutterForFW，并在该文件下创建iOS工程iOSProject，依次执行以下命令

$ cd ~/Desktop/FlutterForFW/iOSProject
$ pod init
$ pod install

1.2. 接下来创建名字为‘ MyFlutterPod’的Pod库

$ cd ~/Desktop/FlutterForFW
$ pod lib create MyFlutterPod

终端依次输入所需类型：

xingkunkun:FlutterForFW admin$ pod lib create MyFlutterPod
Cloning `https://github.com/CocoaPods/pod-template.git` into `MyFlutterPod`.
Configuring MyFlutterPod template.
------------------------------
To get you started we need to ask a few questions, this should only take a minute.

What platform do you want to use?? [ iOS / macOS ]
 > ios
What language do you want to use?? [ Swift / ObjC ]
 > objc
Would you like to include a demo application with your library? [ Yes / No ]
 > no
Which testing frameworks will you use? [ Specta / Kiwi / None ]
 > none
Would you like to do view based testing? [ Yes / No ]
 > no
What is your class prefix?
 > Kevin

Running pod install on your new library.

创建完成之后会有一个工程自动打开，此工程为Pod工程，在Example->MyFlutterPod.xcworkspace打开后可以作为独立项目在此编码iOS代码之类的，暂时先不在此进行编写原生代码，关闭退出。

当前项目目录构造：

项目主架构目录

1.3. 在MyFlutterPod目录下创建 Flutter Module模块

$ cd ~/Desktop/FlutterForFW/MyFlutterPod
$ flutter create -t module flutter_module_for_ios

命令执行完后，目录文件夹下会多出一个名为flutter_module_for_ios的flutter模板项目

创建好的flutter_module模块

该项目模板包含有flutter代码模块+隐藏.ios文件。同时选中三个键可以使隐藏文件显示

command + shift + .

暴露灰色隐藏文件夹

在当前flutter_module_for_ios文件lib中可以编码flutter相关代码，考虑到可能会在flutter项目中使用到相关插件，我们可以在pubspec.yaml中添加一个插件

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  #添加 数据持久化插件  https://pub.flutter-io.cn/packages/shared_preferences
  shared_preferences: ^0.5.4+3

1.4、在flutter_module_for_ios项目中执行安装插件操作

$ cd ~/Desktop/FlutterForFW/MyFlutterPod/flutter_module_for_ios
$ flutter pub get

可以看到在.ios文件夹下自动生成出来一个Podfile文件

自动生成的Podfile文件

1.5、执行编译该flutter_module_for_ios项目

编译后会生成Flutter所依赖的相关的库文件。我们在当前先编译出debug版本的库文件方便我们后续调试

$ flutter build ios --debug      //编译debug产物
或者
$ flutter build ios --release --no-codesign //编译release产物（选择不需要证书）

观察项目中的变化，可发现有多出编译产物

编译生成产物

我们所需要的就是这些生成出来的framework库

build目录下

ios->Debug-iphoneos-> FlutterPluginRegistrant.framework
ios->Debug-iphoneos-> shared_preferences.framework

.ios目录下

Flutter-->App.framework
Flutter-->engine-->Flutter.framework

当前生成的库都是debug版本库文件。
需要注意的是，后续若想编译出release版本的framework库，修改下面的脚本文件根据注释提示修改。因为在build生成产物之前会先重置文件为初始状态

接下来iOS工程通过Pod把这些库引入到自己的工程中了。为了方便集中快速管理操作我们可以通过创建脚本的方式对其进行管理（思路就是通过脚本创建一个文件夹，将这些散乱在各文件的库统一拷贝进来）

2.1、在flutter_module_for_ios下创建脚本文件

$ cd ../flutter_module_for_ios
$ touch move_file.sh   //1. 创建脚本文件
$ open move_file.sh    //2. 打开脚本文件

添加以下脚本代码

if [ -z $out ]; then
    out='ios_frameworks'
fi

echo "准备输出所有文件到目录: $out"

echo "清除所有已编译文件"
find . -d -name build | xargs rm -rf
flutter clean
rm -rf $out
rm -rf build

flutter packages get

addFlag(){
    cat .ios/Podfile > tmp1.txt
    echo "use_frameworks!" >> tmp2.txt
    cat tmp1.txt >> tmp2.txt
    cat tmp2.txt > .ios/Podfile
    rm tmp1.txt tmp2.txt
}

echo "检查 .ios/Podfile文件状态"
a=$(cat .ios/Podfile)
if [[ $a == use* ]]; then
    echo '已经添加use_frameworks, 不再添加'
else
    echo '未添加use_frameworks,准备添加'
    addFlag
    echo "添加use_frameworks 完成"
fi

echo "编译flutter"
flutter build ios --debug
#release下放开下一行注释，注释掉上一行代码
#flutter build ios --release --no-codesign
echo "编译flutter完成"
mkdir $out
cp -r build/ios/Debug-iphoneos/*/*.framework $out
#release下放开下一行注释，注释掉上一行代码
#cp -r build/ios/Release-iphoneos/*/*.framework $out
cp -r .ios/Flutter/App.framework $out
cp -r .ios/Flutter/engine/Flutter.framework $out

echo "复制framework库到临时文件夹: $out"

libpath='../'

rm -rf "$libpath/ios_frameworks"
mkdir $libpath
cp -r $out $libpath

echo "复制库文件到: $libpath"

注意观察脚本文件中的代码意思：将编译生成的debug版本的所需.framework库文件拷贝至ios_frameworks文件下并复制一份到MyFlutterPod目录下，后续若想编译生成release版本库文件时还需修改脚本文件查找对应上release标识

2.2、执行脚本文件

$ sh move_file.sh      //3. 执行脚本文件

此时的ios_frameworks文件已经生成拷贝

ios_framework文件

里面包含有我们前面提到所需要的.framework所有库文件

接下来我们就要通过MyFlutterPod库的podspec来创建依赖导出

3.1、编辑podspec文件

打开podspec文件在end前一行添加以下命令

  s.static_framework = true
  p = Dir::open("ios_frameworks")
  arr = Array.new
  arr.push('ios_frameworks/*.framework')
  s.ios.vendored_frameworks = arr

添加之后文件整体长这样

MyFlutterPod.podspec文件

3.2、在iOSProject项目的podfile文件中执行pod引用

在iOSProject工程下的podfile文件中添加

# Uncomment the next line to define a global platform for your project
platform :ios, '8.0'

target 'iOSProject' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for iOSProject
   pod 'MyFlutterPod', :path => '../MyFlutterPod'

end

之后执行

$ pod install

可以看到终端提示安装MyFlutterPod库成功

安装MyFlutterPod

其中MyFlutterPod库里就包含有我们所需的上述提到的framework库

图示

OK下面我们来试一下如何在iOS项目中跳转进flutter界面，也就是我们提到的混合开发的代码测试,基本上也就是按照官方提供的模板写

4.1、AppDelegate.h中修改

//  AppDelegate.h
//  iOSProject


#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) UIWindow *window;

@end

4.2、AppDelegate.m中修改

//  AppDelegate.m
//  FlutterPodTest

#import "AppDelegate.h"
#import "ViewController.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    if (@available(iOS 13.0, *)) {
        
    } else {
        self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
        [self.window setBackgroundColor:[UIColor whiteColor]];
        ViewController *con = [[ViewController alloc] init];
        UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:con];
        [self.window setRootViewController:nav];
        [self.window makeKeyAndVisible];
        
    }
       [GeneratedPluginRegistrant registerWithRegistry:self];
    
    return YES;
}

4.3、SceneDelegate.m

#import "SceneDelegate.h"
#import "ViewController.h"

@implementation SceneDelegate

- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
       //在这里手动创建新的window
        if (@available(iOS 13.0, *)) {
            UIWindowScene *windowScene = (UIWindowScene *)scene;
            self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
            [self.window setWindowScene:windowScene];
            [self.window setBackgroundColor:[UIColor whiteColor]];
            
            ViewController *con = [[ViewController alloc] init];
            UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:con];
            [self.window setRootViewController:nav];
            [self.window makeKeyAndVisible];
        }
}

4.4、ViewController.m

//
//  ViewController.m
//  iOSProject


#import "ViewController.h"
#import "AppDelegate.h"

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setFrame:CGRectMake(100, 100, 200, 50)];
    [button setBackgroundColor:[UIColor lightGrayColor]];
    [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];
    [self.navigationController pushViewController:flutterViewController animated:YES];

    /* 方式 2
     
    FlutterViewController *fluvc = [[FlutterViewController alloc]init];
    [self addChildViewController:fluvc];
    fluvc.view.frame = self.view.bounds;
    [fluvc didMoveToParentViewController:self];
    [self.view addSubview:fluvc.view];
    [self.navigationController pushViewController:fluvc animated:YES];
     
     */
}

集成代码较官方方式有部分不同，这里没有通过
[[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
这种方式去初始化引擎，是因为FlutterViewContorller在new的时候会自动的创建一个引擎。而通过官方的方式去初始化引擎则需将该引擎设置成一个全局单例去使用

至此。第一种形式的pod本地化引入工程就已经完成。但是我们发现一个问题那就是目前感觉好像还是没有能完全剥离一台电脑上没有flutter环境配置的情况下如何去引入flutter.framework等库文件，难道要手动拷贝么，这样也不是很符合开发的初衷，接下来我会给大家介绍一下如何将创建好的私有库上传至git去托管，然后其他开发同学直接通过Git命令去引入包，这样也就从根源上解决了模块化的剥离，更为干净利落

一、 pod通过远程Git仓库引入，这里我选择了GitLab

1.1、远程创建仓库MyFlutterPod

远程pod仓库创建成功

1.2、在MyFlutterPod项目中与远端建立连接

$ cd ../MyFlutterPod
$ git remote add origin https://gitlab.com/OmgKevin/myflutterpod.git

为了防止上传文件过大的限制，可以选择在.gitignore文件中选择不上传flutter_module_for_ios代码，只将ios_frameworks文件中的库文件上传就好

1.2.1、gitignore文件

最后一行添加忽略文件

$ git add .
$ git commit -m "Initial commit"
$ git push -u origin master
// 给当前代码设置tag版本
$ git tag -m "first demo" 0.1.0
$ git push --tags

可能会有上传文件大小限制，解除具体可以参考这篇文章

https://www.jianshu.com/p/3b86486bc6cd

1.3、修改MyFlutterPod.podspec文件

修改后的模板

需要注意的地方时你自己创建的gitlab地址与管理员邮箱及tag版本一一对应上

将此修改的文件推至远端仓库

$ git status
$ git add MyFlutterPod.podspec
$ git commit -m "修改文件"
$ git push origin master

1.6、验证一下Pod库文件是否可行

$ pod spec lint MyFlutterPod.podspec --verbose

1.7、在iOSProject文件中进行添加代码

如果在此之前做过本地化加载pod库，要先卸载掉之前安装过的文件
--1 注释掉podfile文件中的代码
pod 'MyFlutterPod', :path => '../MyFlutterPod'
--2执行一下 pod install
可以看到之前安装过得库已经从项目中移除

修改podfile文件

# Uncomment the next line to define a global platform for your project
platform :ios, '8.0'

target 'iOSProject' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for iOSProject
#   pod 'MyFlutterPod', :path => '../MyFlutterPod'
   pod 'MyFlutterPod',:git=>'https://gitlab.com/OmgKevin/myflutterpod.git'

end

安装过程可能会比较慢，这跟网络有关

1.8、下载完毕的项目目录下可以看到添加进的framework库文件

通过git远端拉取的相关库文件

2.1、可以试一下按照方式一中的代码切换进flutter页面，这里就不贴代码了

至此，通过Git远程管理的flutter模块集成进iOS项目已经完成了，以后每次flutter模块代码有更新时，直接推向远端，iOS开发同学直接在podfile文件中进行拉取，后续可以考虑加上tag标识来进行拉取

优点：对 Flutter 自身的构建流程改动较少并且较彻底第解决了本地耦合的问题; 解决了组件式开发的痛点，各自开发各自的代码，也不用要求每台电脑上都配置flutter环境

缺点：集成方式上变得貌似更加繁琐，Flutter 内容的变动需要先同步到远程仓库再同步到 Standalone 模式方能生效；且要各自打包维护iOS安卓的两套代码仓库供不同平台去拉取调用

PS. 闲鱼APP 最终选择了这个策略。

flutter_ module仓库地址：https://gitlab.com/OmgKevin/myflutterpod

最后编辑于：2019.11.11 12:05:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,425评论 4赞 361
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,058评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,186评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,848评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,249评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,554评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,830评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,536评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,239评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,505评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,004评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,346评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,999评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,060评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,821评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,574评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,480评论 2赞 267