本文主要記錄了將flutter模塊以framework的形式集成進iOS主工程的方案

首先我們先了解一下flutter 所具備的類型

1. Flutter Application：標準的Flutter App工程圈浇，包含標準的Dart層與Native平臺層
2. Flutter Module ：Flutter組件工程陆淀，僅包含Dart層實現(xiàn)，Native平臺層子工程為通過Flutter自動生成的隱藏工程
3. Flutter Plugin： Flutter平臺插件工程没咙，包含Dart層與Native平臺層的實現(xiàn)
4. Flutter Package： Flutter純Dart插件工程兼蜈，僅包含Dart層的實現(xiàn)变骡，往往定義一些公共Widget

現(xiàn)在我們就是要在Flutter Module 基礎(chǔ)上進行一系列操作

先看版本基本配置

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 官方已經(jīng)給出的混編方案：

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

大意就是說現(xiàn)在我們只需要在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的編譯產(chǎn)物由此依賴進入iOS項目中，不用再每次去在Xcode->Build Phases中去添加設(shè)置腳本文件路徑等繁瑣操作始藕，一定程度上簡化了集成的繁瑣性蒲稳。

優(yōu)點：該方案遵循flutter官方建議氮趋，規(guī)范性不言而喻
缺點： 此方案對團隊開發(fā)不是很友好，需要求每名開發(fā)同學(xué)的電腦上都要配置flutter環(huán)境弟塞。并且 iOS端開發(fā)與flutter端開發(fā)在代碼糾纏性上會變得復(fù)雜化

第二種方案： 將flutter以framework的形式通過Cocoapods引入iOS工程

這也是我們本篇的主要內(nèi)容
其中 Cocoapods引入也分為兩種方式：

1. pod的本地路徑化引入
2. pod通過遠程Git倉庫引入
   我們先來介紹本地化引入

一凭峡、 pod的本地化引入

1.1、 創(chuàng)建iOS項目

在電腦桌面Desktop創(chuàng)建外層文件夾 FlutterForFW决记，并在該文件下創(chuàng)建iOS工程iOSProject，依次執(zhí)行以下命令

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

1.2. 接下來創(chuàng)建名字為‘ 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.

創(chuàng)建完成之后會有一個工程自動打開倍踪，此工程為Pod工程系宫，在Example->MyFlutterPod.xcworkspace打開后可以作為獨立項目在此編碼iOS代碼之類的，暫時先不在此進行編寫原生代碼建车，關(guān)閉退出扩借。

當前項目目錄構(gòu)造：

項目主架構(gòu)目錄

1.3. 在MyFlutterPod目錄下創(chuàng)建 Flutter Module模塊

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

命令執(zhí)行完后，目錄文件夾下會多出一個名為flutter_module_for_ios的flutter模板項目

創(chuàng)建好的flutter_module模塊

該項目模板包含有flutter代碼模塊+隱藏.ios文件缤至。同時選中三個鍵可以使隱藏文件顯示

command + shift + .

暴露灰色隱藏文件夾

在當前flutter_module_for_ios文件lib中可以編碼flutter相關(guān)代碼潮罪，考慮到可能會在flutter項目中使用到相關(guān)插件，我們可以在pubspec.yaml中添加一個插件

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  #添加 數(shù)據(jù)持久化插件  https://pub.flutter-io.cn/packages/shared_preferences
  shared_preferences: ^0.5.4+3

1.4领斥、在flutter_module_for_ios項目中執(zhí)行安裝插件操作

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

可以看到在.ios文件夾下自動生成出來一個Podfile文件

自動生成的Podfile文件

1.5嫉到、執(zhí)行編譯該flutter_module_for_ios項目

編譯后會生成Flutter所依賴的相關(guān)的庫文件。我們在當前先編譯出debug版本的庫文件方便我們后續(xù)調(diào)試

$ flutter build ios --debug      //編譯debug產(chǎn)物
或者
$ flutter build ios --release --no-codesign //編譯release產(chǎn)物（選擇不需要證書）

重要：如果想要減少包體積月洛，把最大的那個flutter引擎自動管理就用下邊的
$ flutter build ios-framework --cocoapods --output=./ios-framework

觀察項目中的變化何恶，可發(fā)現(xiàn)有多出編譯產(chǎn)物

編譯生成產(chǎn)物

我們所需要的就是這些生成出來的framework庫

build目錄下

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

.ios目錄下

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

當前生成的庫都是debug版本庫文件。
需要注意的是嚼黔，后續(xù)若想編譯出release版本的framework庫细层，修改下面的腳本文件根據(jù)注釋提示修改。因為在build生成產(chǎn)物之前會先重置文件為初始狀態(tài)

接下來iOS工程通過Pod把這些庫引入到自己的工程中了唬涧。為了方便集中快速管理操作我們可以通過創(chuàng)建腳本的方式對其進行管理（思路就是通過腳本創(chuàng)建一個文件夾疫赎，將這些散亂在各文件的庫統(tǒng)一拷貝進來）

2.1、在flutter_module_for_ios下創(chuàng)建腳本文件

$ cd ../flutter_module_for_ios
$ touch move_file.sh   //1. 創(chuàng)建腳本文件
$ 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文件狀態(tài)"
a=$(cat .iOS/Podfile)
if [[ $a == use* ]]; then
    echo '已經(jīng)添加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 "復(fù)制framework庫到臨時文件夾: $out"

libpath='../'

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

echo "復(fù)制庫文件到: $libpath"

注意觀察腳本文件中的代碼意思：將編譯生成的debug版本的所需.framework庫文件拷貝至ios_frameworks文件下并復(fù)制一份到MyFlutterPod目錄下，后續(xù)若想編譯生成release版本庫文件時還需修改腳本文件查找對應(yīng)上release標識

2.2钓株、執(zhí)行腳本文件

$ sh move_file.sh      //3. 執(zhí)行腳本文件

此時的ios_frameworks文件已經(jīng)生成拷貝

ios_framework文件

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

接下來我們就要通過MyFlutterPod庫的podspec來創(chuàng)建依賴導(dǎo)出

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文件中執(zhí)行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

之后執(zhí)行

$ pod install

可以看到終端提示安裝MyFlutterPod庫成功

安裝MyFlutterPod

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

圖示

OK下面我們來試一下如何在iOS項目中跳轉(zhuǎn)進flutter界面轴合，也就是我們提到的混合開發(fā)的代碼測試,基本上也就是按照官方提供的模板寫

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 {
       //在這里手動創(chuàng)建新的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的時候會自動的創(chuàng)建一個引擎纲堵。而通過官方的方式去初始化引擎則需將該引擎設(shè)置成一個全局單例去使用

至此巡雨。第一種形式的pod本地化引入工程就已經(jīng)完成。但是我們發(fā)現(xiàn)一個問題那就是目前感覺好像還是沒有能完全剝離一臺電腦上沒有flutter環(huán)境配置的情況下如何去引入flutter.framework等庫文件席函，難道要手動拷貝么铐望，這樣也不是很符合開發(fā)的初衷，接下來我會給大家介紹一下如何將創(chuàng)建好的私有庫上傳至git去托管茂附，然后其他開發(fā)同學(xué)直接通過Git命令去引入包正蛙，這樣也就從根源上解決了模塊化的剝離，更為干凈利落

一营曼、 pod通過遠程Git倉庫引入乒验，這里我選擇了GitLab

1.1、遠程創(chuàng)建倉庫MyFlutterPod

遠程pod倉庫創(chuàng)建成功

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
// 給當前代碼設(shè)置tag版本
$ git tag -m "first demo" 0.1.0
$ git push --tags

可能會有上傳文件大小限制鳄厌，解除具體可以參考這篇文章

http://www.reibang.com/p/3b86486bc6cd

1.3、修改MyFlutterPod.podspec文件

修改后的模板

需要注意的地方時你自己創(chuàng)建的gitlab地址與管理員郵箱及tag版本一一對應(yīng)上

將此修改的文件推至遠端倉庫

$ 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執(zhí)行一下 pod install
可以看到之前安裝過得庫已經(jīng)從項目中移除

修改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

安裝過程可能會比較慢响委，這跟網(wǎng)絡(luò)有關(guān)

1.8新思、下載完畢的項目目錄下可以看到添加進的framework庫文件

通過git遠端拉取的相關(guān)庫文件

2.1、可以試一下按照方式一中的代碼切換進flutter頁面赘风，這里就不貼代碼了

至此夹囚，通過Git遠程管理的flutter模塊集成進iOS項目已經(jīng)完成了，以后每次flutter模塊代碼有更新時邀窃，直接推向遠端荸哟，iOS開發(fā)同學(xué)直接在podfile文件中進行拉取，后續(xù)可以考慮加上tag標識來進行拉取

優(yōu)點： 對 Flutter 自身的構(gòu)建流程改動較少并且較徹底第解決了本地耦合的問題; 解決了組件式開發(fā)的痛點瞬捕，各自開發(fā)各自的代碼鞍历，也不用要求每臺電腦上都配置flutter環(huán)境

缺點： 集成方式上變得貌似更加繁瑣，F(xiàn)lutter 內(nèi)容的變動需要先同步到遠程倉庫再 同步到 Standalone 模式方能生效肪虎；且要各自打包維護iOS安卓的兩套代碼倉庫供不同平臺去拉取調(diào)用

PS. 閑魚APP 最終選擇了這個策略劣砍。

flutter_ module倉庫地址：https://gitlab.com/OmgKevin/myflutterpod

相關(guān)參考：
https://mp.weixin.qq.com/s/RzvJeT_w69oZJmS9JHGBCg
http://www.reibang.com/p/969aa7e37827
http://www.reibang.com/p/3b86486bc6cd

======================分割線 2024年6月3日更新=====================
因為我用的是flutter build ios-framework --cocoapods --output=./ios-framework 命令，現(xiàn)在生成的產(chǎn)物如下

注意這個Flutter.podspec文件扇救，內(nèi)容在不同環(huán)境下有區(qū)別

作用是為了可以直接從遠端下載flutter引擎庫刑枝，這樣依賴可以讓開發(fā)者可以少管理一個庫香嗓，同時極大的減少倉庫體積，只需要關(guān)注業(yè)務(wù)庫就可以了

但是我們在pod install的時候装畅，Xcode項目中是不會包含有flutter引擎庫的如下圖

image.png

此時如果直接編譯項目的話靠娱，大概率會報錯：Command SwiftCompile failed with a nonzero exit code

pod 'Flutter', :podspec => './Flutter.podspec'

最終如下所示

image.png

然后執(zhí)行 pod install 就可以了
最終flutter引擎庫會獨立于flutterMoudle業(yè)務(wù)庫存在

image.png