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

时间 2019-11-22

标签混合开发 flutter 集成 ios 工程栏目 iOS 繁體版

原文原文链接

####本文主要记录了将flutter模块以framework的形式集成进iOS主工程的方案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 基础上进行一系列操做git

#####先看版本基本配置github

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…bash

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

github.com/flutter/flu…session

大意就是说如今咱们只须要在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中去添加设置脚本文件路径等繁琐操做，必定程度上简化了集成的繁琐性。app

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

#####第二种方案：将flutter以framework的形式经过Cocoapods引入iOS工程这也是咱们本篇的主要内容其中 Cocoapods引入也分为两种方式：ide

pod的本地路径化引入

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

#####1、 pod的本地化引入

######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.四、在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 最终选择了这个策略。

flutter_ module仓库地址：gitlab.com/OmgKevin/my…