混合開發：flutter整合進iOS工程

尚德技術發表於2019-11-19

本文主要記錄了將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 官方已經給出的混編方案：

github.com/flutter/flu…

文件裡寫的比較清楚了的，這裡就不再多做贅述，但是需要注意一點的是，在2019年8月1日後，官方給出的整合方案更新，詳情可參考

github.com/flutter/flu…

大意就是說現在我們只需要在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
複製程式碼

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

www.jianshu.com/p/3b86486bc…

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倉庫地址：gitlab.com/OmgKevin/my…

相關參考：

iOS整合 Flutter 混合工程開發一
2020-04-24
iOSFlutter
Flutter混合開發-iOS
2020-04-18
FlutteriOS
Flutter混合工程開發探究
2018-07-23
Flutter
Flutter混合開發(二)：iOS專案整合Flutter模組詳細指南
2019-11-12
FlutteriOS
Flutter混合開發—iOS篇
2021-05-14
FlutteriOS
Flutter與已有iOS工程混合開發與指令碼配置
2018-12-14
FlutteriOS指令碼
Flutter、iOS混合開發實踐
2020-03-12
FlutteriOS
Flutter 和iOS 混合開發（一）
2019-08-08
FlutteriOS
Flutter iOS 混合工程自動化
2019-10-28
FlutteriOS
Flutter與Native混合開發-FlutterBoost整合應用和開發實踐(iOS)
2020-07-22
FlutteriOS
Now直播iOS Flutter混合工程實踐
2018-08-10
iOSFlutter
iOS與Flutter混合開發的姿勢
2020-07-08
iOSFlutter
Flutter 混合開發FlutterBoost iOS 接入流程
2019-06-05
FlutteriOS
原生(iOS)與Flutter混合開發步驟
2021-08-20
iOSFlutter
Flutter與已有iOS工程混合開發與指令碼配置 | 掘金技術徵文
2018-08-20
FlutteriOS指令碼
從零搭建 iOS Native Flutter 混合工程
2019-01-13
iOSFlutter
Flutter - 混合開發
2020-07-12
Flutter
Flutter混合開發
2020-12-12
Flutter
iOS&Flutter混合開發的探索歷程
2021-06-01
iOSFlutter
原生App專案整合flutter混合開發詳細指南
2019-02-21
APPFlutter
Flutter混合開發(一)：Android專案整合Flutter模組詳細指南
2019-11-07
FlutterAndroid
Flutter原生混合開發
2019-11-08
Flutter
iOS React Native 混合開發整合React Native
2017-07-24
iOSReact Native
現有Android專案中整合Flutter/Flutter混合開發實戰（一）
2019-02-26
AndroidFlutter
Flutter & Native 混合開發
2020-02-21
Flutter
微店的Flutter混合開發元件化與工程化架構
2019-01-08
Flutter元件化架構
FLUTTER混合工程踩坑之旅
2019-10-08
Flutter
Flutter混合工程改造實踐
2018-07-06
Flutter
Flutter混合開發之FlutterFragment使用
2022-01-09
FlutterFragment
Flutter Boost 混合開發框架初探
2021-04-01
Flutter框架
Flutter混合開發—Android篇
2021-05-25
FlutterAndroid
如何進行Flutter混合開發
2018-10-30
Flutter
安卓原生工程整合Flutter工程
2019-10-11
安卓Flutter
Flutter、Android混合開發實踐
2020-02-16
FlutterAndroid
Flutter 1.12混合開發實踐
2020-03-16
Flutter
Flutter元件化混合開發-Android
2020-01-10
Flutter元件化Android
Flutter混合開發的路由棧管理
2020-01-27
Flutter路由
Flutter 2.0 下混合開發淺析
2021-03-18
Flutter

混合開發：flutter整合進iOS工程

本文主要記錄了將flutter模組以framework的形式整合進iOS主工程的方案

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

現在我們就是要在Flutter Module 基礎上進行一系列操作

先看版本基本配置

目前為止有兩種方案可以將flutter整合進iOS專案中

第一種方案： Flutter 官方已經給出的混編方案：

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

一、 pod的本地化引入

1.1、建立iOS專案

1.2. 接下來建立名字為‘ MyFlutterPod’的Pod庫

1.3. 在MyFlutterPod目錄下建立 Flutter Module模組

1.4、在flutter_module_for_ios專案中執行安裝外掛操作

1.5、執行編譯該flutter_module_for_ios專案

build目錄下

.ios目錄下

2.1、在flutter_module_for_ios下建立指令碼檔案

2.2、執行指令碼檔案

3.1、編輯podspec檔案

3.2、在iOSProject專案的podfile檔案中執行pod引用

4.1、AppDelegate.h中修改

4.2、AppDelegate.m中修改

4.3、SceneDelegate.m

4.4、ViewController.m

一、 pod通過遠端Git倉庫引入，這裡我選擇了GitLab

1.1、遠端建立倉庫MyFlutterPod

1.2、在MyFlutterPod專案中與遠端建立連線

1.2.1、gitignore檔案

1.3、修改MyFlutterPod.podspec檔案

1.4、驗證一下Pod庫檔案是否可行

1.5、在iOSProject檔案中進行新增程式碼

1.6、下載完畢的專案目錄下可以看到新增進的framework庫檔案

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

flutter_ module倉庫地址：gitlab.com/OmgKevin/my…

mp.weixin.qq.com/s/RzvJeT_w6…

www.jianshu.com/p/969aa7e37…

www.jianshu.com/p/3b86486bc…

相關文章

混合開發：flutter整合進iOS工程

本文主要記錄了將flutter模組以framework的形式整合進iOS主工程的方案

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

現在我們就是要在Flutter Module 基礎上進行一系列操作

先看版本基本配置

目前為止有兩種方案可以將flutter整合進iOS專案中

第一種方案： Flutter 官方已經給出的混編方案：

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

一、 pod的本地化引入

1.1、 建立iOS專案

1.2. 接下來建立名字為‘ MyFlutterPod’的Pod庫

1.3. 在MyFlutterPod目錄下建立 Flutter Module模組

1.4、在flutter_module_for_ios專案中執行安裝外掛操作

1.5、執行編譯該flutter_module_for_ios專案

build目錄下

.ios目錄下

2.1、在flutter_module_for_ios下建立指令碼檔案

2.2、執行指令碼檔案

3.1、編輯podspec檔案

3.2、在iOSProject專案的podfile檔案中執行pod引用

4.1、AppDelegate.h中修改

4.2、AppDelegate.m中修改

4.3、SceneDelegate.m

4.4、ViewController.m

一、 pod通過遠端Git倉庫引入，這裡我選擇了GitLab

1.1、遠端建立倉庫MyFlutterPod

1.2、在MyFlutterPod專案中與遠端建立連線

1.2.1、gitignore檔案

1.3、修改MyFlutterPod.podspec檔案

1.4、驗證一下Pod庫檔案是否可行

1.5、在iOSProject檔案中進行新增程式碼

1.6、下載完畢的專案目錄下可以看到新增進的framework庫檔案

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

flutter_ module倉庫地址：gitlab.com/OmgKevin/my…

mp.weixin.qq.com/s/RzvJeT_w6…

www.jianshu.com/p/969aa7e37…

www.jianshu.com/p/3b86486bc…

相關文章

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

1.1、建立iOS專案