本文主要记录了将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代码模块+隐藏.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文件

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文件已经生成拷贝

里面包含有我们前面提到所需要的.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

添加之后文件整体长这样

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库里就包含有我们所需的上述提到的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

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.4、验证一下Pod库文件是否可行

$ pod spec lint MyFlutterPod.podspec --verbose

1.5、在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.6、下载完毕的项目目录下可以看到添加进的framework库文件

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

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

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

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

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

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

相关参考：

https://mp.weixin.qq.com/s/RzvJeT_w69oZJmS9JHGBCg

https://www.jianshu.com/p/969aa7e37827

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

掘金最近抽风，一输入回复就出现浏览器卡死。留言什么的可以在简书原文地址哈：https://www.jianshu.com/p/3731dd683726