混合開發：flutter集成進iOS工程

時間 2019-11-21

標籤混合開發 flutter 集成 ios 工程欄目 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 官方已經給出的混編方案：

github.com/flutter/flu…ios

文檔裏寫的比較清楚了的，這裏就再也不多作贅述，可是須要注意一點的是，在2019年8月1往後，官方給出的集成方案更新，詳情可參考git

github.com/flutter/flu…github

大意就是說如今咱們只須要在iOS工程的podfile文件中添加以下命令bash

# 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官方建議，規範性不言而喻session

缺點：此方案對團隊開發不是很友好，須要求每名開發同窗的電腦上都要配置flutter環境。而且 iOS端開發與flutter端開發在代碼糾纏性上會變得複雜化架構

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

這也是咱們本篇的主要內容其中 Cocoapods引入也分爲兩種方式：app

pod的本地路徑化引入

pod經過遠程Git倉庫引入咱們先來介紹本地化引入

1、 pod的本地化引入

1.一、建立iOS項目

在電腦桌面Desktop建立外層文件夾 FlutterForFW，並在該文件下建立iOS工程iOSProject，依次執行如下命令iphone

$ cd ~/Desktop/FlutterForFW/iOSProject
$ pod init
$ pod install
複製代碼

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

$ cd ~/Desktop/FlutterForFW
$ pod lib create MyFlutterPod
複製代碼

終端依次輸入所需類型：ide

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.四、在flutter_module_for_ios項目中執行安裝插件操做

$ cd ~/Desktop/FlutterForFW/MyFlutterPod/flutter_module_for_ios
$ flutter pub get
複製代碼

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

1.五、執行編譯該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.一、在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.二、執行腳本文件

$ sh move_file.sh      //3. 執行腳本文件
複製代碼

此時的ios_frameworks文件已經生成拷貝

裏面包含有咱們前面提到所須要的.framework全部庫文件

接下來咱們就要經過MyFlutterPod庫的podspec來建立依賴導出

3.一、編輯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.二、在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.一、AppDelegate.h中修改

//  AppDelegate.h
//  iOSProject


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

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

@end

複製代碼

4.二、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.三、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.四、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命令去引入包，這樣也就從根源上解決了模塊化的剝離，更爲乾淨利落

1、 pod經過遠程Git倉庫引入，這裏我選擇了GitLab

1.一、遠程建立倉庫MyFlutterPod

1.二、在MyFlutterPod項目中與遠端創建鏈接

$ cd ../MyFlutterPod
$ git remote add origin https://gitlab.com/OmgKevin/myflutterpod.git
複製代碼

爲了防止上傳文件過大的限制，能夠選擇在.gitignore文件中選擇不上傳flutter_module_for_ios代碼，只將ios_frameworks文件中的庫文件上傳就好

1.2.一、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.三、修改MyFlutterPod.podspec文件

須要注意的地方時你本身建立的gitlab地址與管理員郵箱及tag版本一一對應上

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

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

1.四、驗證一下Pod庫文件是否可行

$ pod spec lint MyFlutterPod.podspec --verbose
複製代碼

1.五、在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.六、下載完畢的項目目錄下能夠看到添加進的framework庫文件

2.一、能夠試一下按照方式一中的代碼切換進flutter頁面，這裏就不貼代碼了

至此，經過Git遠程管理的flutter模塊集成進iOS項目已經完成了，之後每次flutter模塊代碼有更新時，直接推向遠端，iOS開發同窗直接在podfile文件中進行拉取，後續能夠考慮加上tag標識來進行拉取

優勢：對 Flutter 自身的構建流程改動較少而且較完全第解決了本地耦合的問題; 解決了組件式開發的痛點，各自開發各自的代碼，也不用要求每臺電腦上都配置flutter環境

缺點：集成方式上變得貌似更加繁瑣，Flutter 內容的變更須要先同步到遠程倉庫再同步到 Standalone 模式方能生效；且要各自打包維護iOS安卓的兩套代碼倉庫供不一樣平臺去拉取調用

PS. 閒魚APP 最終選擇了這個策略。