Flutter與已有iOS工程混合開發與腳本配置

時間  2019-11-06
標籤 flutter ios 工程 混合 開發 腳本 配置 欄目 iOS 简体版
原文   原文鏈接
做者：Realank Liu
連接：https://juejin.im/post/5b7a1bfbe51d4538a93d2339
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

本文轉自⬆️, 並結合本身的實踐對其中一些地方作修改, 使用 Swift 語言.android

修改的地方用"註釋*"標出.


運行一個原生的Flutter工程(也就是純Flutter)很是簡便，不過如今Flutter屬於試水階段，要是想在商業app中使用Flutter，目前基本上是將Flutter的頁面嵌入到目前先有的iOS或者安卓工程，目前講混合開發的文章有不少：ios

Flutter新銳專家之路：混合開發篇git

Flutter混合工程改造實踐github

Flutter混合工程開發探究xcode

Now直播iOS Flutter混合工程實踐bash

不過這些文章大多講的是安卓和flutter混合開發的，沒有iOS和Flutter混合開發的比較詳細的步驟實操，上週試了一下iOS和Flutter混合，有一些坑，總結給你們app

1.目的

既然用Flutter混合開發，那確定是但願寫一套代碼，安卓iOS都能無負擔運行，因此在開發的時候，須要知足以下需求：iphone

  • Flutter、iOS、安卓工程的目錄在同一級，互相以前平級、無嵌套
  • 開發iOS的時候，不用操心Flutter部分，只用xcode點擊運行就能夠（即修改編譯iOS項目時，使用編譯好的Flutter產物）
  • 開發Flutter的時候，不用操心iOS部分，只用android studio點擊運行就能夠
  • 支持模擬器和真機

混合開發最權威的指南固然是flutter本身的wiki，可是缺陷是iOS部分，自動運行腳本的內容不夠詳細，項目結構也不利於混合開發，本文以其爲基礎，又對目錄結構和腳本作了一些修改，使其便於維護ide


2.項目搭建
函數

2.1 文件目錄搭建

HybridFlutter
    |-iOS
    |-Android
    |-Flutter
    |-build
複製代碼複製代碼

2.2 iOS項目搭建

創建完了上圖文件目錄，添加iOS工程(安卓工程暫時忽略)

而且在第一頁VC上增長一個Next按鈕，集成好Flutter之後，點擊Next能夠進入Flutter頁面

由於咱們要推入flutter頁面，因此須要有navigation controller：

目前Flutter混合開發還不支持bit code，因此在iOS工程裏關閉

2.3 Flutter Module搭建

這裏有一個坑，按照flutter官方文檔，下載的flutter工具對應其beta分支，是不支持生成Flutter module的，而混合開發的wiki裏說，須要創建這麼個module，經過諮詢大牛，須要切換到master分支，而flutter有個channel命令，能夠切換工具分支:

若是你不在master分支，請執行flutter channel master

以後在Flutter目錄下執行flutter create -t module flutter_module

這樣就建立好了flutter module

目前爲止的目錄結構

2.4 添加膠水文件

混合開發最關鍵的是將兩個項目銜接起來，因此須要一些配置

2.4.1 xcconfig文件

首先是xcode工程配置的銜接，打開ios工程，在xcode中點擊File->New->File添加Configuration Settings File文件，命名爲FlutterConfig.xcconfig，

注意添加的路徑是HybridFlutter/Flutter/flutter_module

此時可能xcode會在ios工程裏添加了一個FlutterConfig.xcconfig文件的引用，爲了項目乾淨，能夠刪除這個引用（可是不要刪除文件）

在FlutterConfig.xcconfig裏添加 #include "./.ios/Flutter/Generated.xcconfig" 引用flutter_module下的ios插件裏的Generated.xcconfig文件

上面是給flutter添加xcconfig文件，下載添加ios工程裏的xccofig文件Debug.xcconfig，並引用FlutterConfig.xcconfig(若是iOS工程裏已經有了xcconfig文件，那麼直接在已有的xcconfig裏添加)

添加內容 #include "../../../Flutter/flutter_module/FlutterConfig.xcconfig"

而後，將Debug.xcconfig添加到iOS項目的Info-Configuration裏：

2.4.2 AppFrameworkInfo.plist

這個文件在最新的flutter工具裏已經自動建立好了 剛纔咱們看的文件目錄，不包含隱藏文件，其實flutter_module裏還有對應的ios和android插件工程，都是隱藏文件，從隱藏文件裏能夠看到AppFrameworkInfo.plist

2.4.3 引入xcode-backend.sh

在ios工程裏添加運行腳本"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build,而且確保Run Script這一行在 "Target dependencies" 或者 "Check Pods Manifest.lock"後面

此時點擊xcode的運行，會執行到xcode-backend.sh腳本，因此不只會編譯安裝iOS app到模擬器(暫時運行對象是模擬器),並且在iOS工程目錄，也會生成一個Flutter文件夾，裏面是Flutter工程的產物

把這些產物放到iOS工程裏，就能獲取到flutter的資源了。

註釋*: 本人在嘗試以上下劃線部分運行 xcode 後, 並無在本地生成 Flutter 文件夾.解決辦法是, 到 Flutter 項目目錄下, "shift + commond + >" 讓隱藏的 .iOS 文件夾顯示出來, 複製以下三個文件夾


而後到 iOS 項目下, 在一級 HybridiOS 目錄下建立 Flutter 文件夾(和項目文件夾 Hybrid iOS 並列), 而後將剛纔複製的三個文件粘貼到 Flutter 文件夾中.



進入 iOS 項目右鍵 Add files to......, 將剛纔的 Flutter 文件夾添加到項目中




2.4.4 添加flutter編譯產物

，將iOS工程目錄下的Flutter文件夾添加到工程，而後確保文件夾下的兩個framework添加到Embeded Binaries裏

註釋*: 因爲 Flutter 文件夾並不在 HybridiOS 中, 此處選擇Add other 添加, Copy Bundle Resources 的添加一樣選擇 Add other




確保flutter_aseets添加到Build Phases裏的Copy Bundle Resources裏

添加完，在工程目錄裏，會多出一個flutter _aseets引用（注意只是引用，若是是拷貝可能會有問題），實際上是引用的Flutter/flutter _aseets，試了半天沒有去掉，就先這樣吧

目前，全部的膠水文件都已經添加完了，下一步就是在iOS工程裏，顯示flutter頁面

3. 引用Flutter頁面

註釋*: 3.1 部分 AppDelegate改造

 FlutterPluginAppLifeCycleDelegate 只有對於使用插件的才須要寫, 沒有使用插件不須要. 3.1 部分可直接忽略看下邊註釋* 

註釋*: 此處本人使用的是 Swift 語言, 直接貼出 AppDelegate 的代碼.

修改部分:

1. import Flutter 

2.AppDelegate: UIResponder, UIApplicationDelegate改成AppDelegate: FlutterAppDelegate 

3.didFinishLaunch 的返回值 return true 改成  return super.application(application, didFinishLaunchingWithOptions: launchOptions); 4.AppDelegate 全部代理函數前加 override

import UIKit
import Flutter


@UIApplicationMain
class AppDelegate: FlutterAppDelegate {


    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        return super.application(application, didFinishLaunchingWithOptions: launchOptions);
    }


    override func applicationWillResignActive(_ application: UIApplication) {
        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
    }


    override func applicationDidEnterBackground(_ application: UIApplication) {
        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
    }


    override func applicationWillEnterForeground(_ application: UIApplication) {
        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
    }


    override func applicationDidBecomeActive(_ application: UIApplication) {
        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
    }


    override func applicationWillTerminate(_ application: UIApplication) {
        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
    }
}


複製代碼


3.1 AppDelegate改造

改變AppDelegate.h,使其父類指向FlutterAppDelegate:

#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate <UIApplicationDelegate, FlutterAppLifeCycleProvider>
@end
複製代碼複製代碼

改造AppDelegate.m

//
//  AppDelegate.m
//  HybridIOS
//
//  Created by Realank on 2018/8/20.
//  Copyright © 2018年 Realank. All rights reserved.
//

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

{
    FlutterPluginAppLifeCycleDelegate *_lifeCycleDelegate;
}
- (instancetype)init {
    if (self = [super init]) {
        _lifeCycleDelegate = [[FlutterPluginAppLifeCycleDelegate alloc] init];
    }
    return self;
}

- (BOOL)application:(UIApplication*)application
didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {
    return [_lifeCycleDelegate application:application didFinishLaunchingWithOptions:launchOptions];
}

// Returns the key window's rootViewController, if it's a FlutterViewController.
// Otherwise, returns nil.
- (FlutterViewController*)rootFlutterViewController {
    UIViewController* viewController = [UIApplication sharedApplication].keyWindow.rootViewController;
    if ([viewController isKindOfClass:[FlutterViewController class]]) {
        return (FlutterViewController*)viewController;
    }
    return nil;
}

- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event {
    [super touchesBegan:touches withEvent:event];
    
    // Pass status bar taps to key window Flutter rootViewController.
    if (self.rootFlutterViewController != nil) {
        [self.rootFlutterViewController handleStatusBarTouches:event];
    }
}

- (void)applicationDidEnterBackground:(UIApplication*)application {
    [_lifeCycleDelegate applicationDidEnterBackground:application];
}

- (void)applicationWillEnterForeground:(UIApplication*)application {
    [_lifeCycleDelegate applicationWillEnterForeground:application];
}

- (void)applicationWillResignActive:(UIApplication*)application {
    [_lifeCycleDelegate applicationWillResignActive:application];
}

- (void)applicationDidBecomeActive:(UIApplication*)application {
    [_lifeCycleDelegate applicationDidBecomeActive:application];
}

- (void)applicationWillTerminate:(UIApplication*)application {
    [_lifeCycleDelegate applicationWillTerminate:application];
}

- (void)application:(UIApplication*)application
didRegisterUserNotificationSettings:(UIUserNotificationSettings*)notificationSettings {
    [_lifeCycleDelegate application:application
didRegisterUserNotificationSettings:notificationSettings];
}

- (void)application:(UIApplication*)application
didRegisterForRemoteNotificationsWithDeviceToken:(NSData*)deviceToken {
    [_lifeCycleDelegate application:application
didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication*)application
didReceiveRemoteNotification:(NSDictionary*)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
    [_lifeCycleDelegate application:application
       didReceiveRemoteNotification:userInfo
             fetchCompletionHandler:completionHandler];
}

- (BOOL)application:(UIApplication*)application
            openURL:(NSURL*)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id>*)options {
    return [_lifeCycleDelegate application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication*)application handleOpenURL:(NSURL*)url {
    return [_lifeCycleDelegate application:application handleOpenURL:url];
}

- (BOOL)application:(UIApplication*)application
            openURL:(NSURL*)url
  sourceApplication:(NSString*)sourceApplication
         annotation:(id)annotation {
    return [_lifeCycleDelegate application:application
                                   openURL:url
                         sourceApplication:sourceApplication
                                annotation:annotation];
}

- (void)application:(UIApplication*)application
performActionForShortcutItem:(UIApplicationShortcutItem*)shortcutItem
  completionHandler:(void (^)(BOOL succeeded))completionHandler NS_AVAILABLE_IOS(9_0) {
    [_lifeCycleDelegate application:application
       performActionForShortcutItem:shortcutItem
                  completionHandler:completionHandler];
}

- (void)application:(UIApplication*)application
handleEventsForBackgroundURLSession:(nonnull NSString*)identifier
  completionHandler:(nonnull void (^)(void))completionHandler {
    [_lifeCycleDelegate application:application
handleEventsForBackgroundURLSession:identifier
                  completionHandler:completionHandler];
}

- (void)application:(UIApplication*)application
performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
    [_lifeCycleDelegate application:application performFetchWithCompletionHandler:completionHandler];
}

- (void)addApplicationLifeCycleDelegate:(NSObject<FlutterPlugin>*)delegate {
    [_lifeCycleDelegate addDelegate:delegate];
}

@end


複製代碼複製代碼

這部分改造的原理尚未深究，並且有一些方法的實現iOS已經提示棄用了，你們在加入已有工程的時候，須要酌情考慮，我相信後續flutter官方也會更新相關的方法


3.2 推入flutter頁面

在首頁VC中添加以下代碼

//
//  ViewController.m
//  HybridIOS
//
//  Created by Realank on 2018/8/20.
//  Copyright © 2018年 Realank. All rights reserved.
//

#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (IBAction)goNext:(id)sender {
    FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
    FlutterBasicMessageChannel* messageChannel = [FlutterBasicMessageChannel messageChannelWithName:@"channel"
                                                        binaryMessenger:flutterViewController
                                                                  codec:[FlutterStandardMessageCodec sharedInstance]];//消息發送代碼，本文不作解釋
    __weak __typeof(self) weakSelf = self;
    [messageChannel setMessageHandler:^(id message, FlutterReply reply) {
        // Any message on this channel pops the Flutter view.
        [[weakSelf navigationController] popViewControllerAnimated:YES];
        reply(@"");
    }];
    NSAssert([self navigationController], @"Must have a NaviationController");
    [[self navigationController]  pushViewController:flutterViewController animated:YES];
}

@end

複製代碼複製代碼

若是你的首頁不在navigation controller裏，那麼pushflutter頁面確定會報錯，這和flutter不要緊，若是確實沒有navigation controller，能夠present flutterViewController

運行代碼，點擊next，就能夠看到flutter頁面了：

由於咱們的導航欄使用了iOS原生的，因此flutter的導航欄有點多餘了，咱們去掉flutter導航欄：

再次運行：

證實改動能夠同步到app

3.3 flutter頁面管理

你可能發現了，上面的代碼運行的時候，在flutter頁面點擊右下角的加號能夠增長中間的數字，可是當退出當前頁面，再進入flutter頁面之後，中間的數字又重置爲0了，這是由於每次點擊Next，都會從新分配和初始化全部flutter資源，這形成了flutter頁面啓動慢，狀態沒法保存（這個頁面的數字狀態不必保存，可是別的場景下必定有須要保存的內容）

因此Flutter新銳專家之路：混合開發篇對混合開發中flutter部分作了很好的管理，它將flutter部分作成單例，使其基礎資源在app運行期間只運行一次，再將flutter根頁面設置成一個空白container，須要flutter推入什麼頁面，就發消息給flutter，flutter在空白container基礎上推入對應頁面，這樣當從flutter的某個頁面回退到iOS原生頁面的時候，flutter也會釋放掉剛剛顯示的頁面，回退到空白頁面。

4. 配置自動運行腳本

針對怎麼寫代碼，不是這篇文章的範疇，下面說說混合開發最後的一個痛點

如今的工程，flutter部分有改動，能夠直接經過綁定的xcode-backend.sh來編譯，並生成framework和資源文件，因此不管是iOS端，仍是flutter端有改動，在xcode上點擊run均可以運行到模擬器和真機，並且iOS和flutter項目代碼彼此獨立，只有flutter的編譯產物留在了iOS文件夾裏 可是如今還有一個問題，就是當開發flutter部分的時候，咱們並不想碰xcode，最好能關掉xcode，只打開android studio作開發，而後點擊AS上的run按鈕運行。

4.1 實現原理

  • xcode命令行工具，能夠編譯iOS項目(就像xcode裏點擊run同樣)，而且還能指定生成.app文件的目錄
  • flutter運行的時候，能夠指定--use-application-binary，flutter編譯產物，以hot-load的方式注入到指定app中(這個原理是我本身猜的，實際狀況待仔細確認)

經過上述兩步，就能夠在android studio裏，直接往iOS系統裏安裝混合app了

4.2 模擬器實現

用android studio打開flutter_module文件夾

能夠看到右上角已是能夠run的狀態了，可是點擊的話，會有以下錯誤提示：

緣由很簡單，這個flutter_module不是一個獨立的工程，須要依賴一個app，因此咱們須要先編譯出iOS app，並放到好找的位置：

點擊下圖的Edit Configurations

而後添加一個運行前編譯app的命令，點擊下圖的Run External tool

添加下面的一條：

Program裏填/usr/bin/env，Arguments裏填xcrun xcodebuild build -configuration Debug VERBOSE_SCRIPT_LOGGING=YES -project ../../iOS/HybridIOS/HybridIOS.xcodeproj -scheme HybridIOS BUILD_DIR=../build/ios -sdk iphonesimulator -arch x86_64，這裏面指定了編譯的參數

添加後如圖：

接着添加flutter編譯的參數，指定剛剛編譯出來的app做爲hotload的宿主app： --use-application-binary /Users/realank/Documents/GitHub/HybridFlutter/iOS/build/ios/Debug-iphonesimulator/HybridIOS.app 這裏須要注意，我一開始使用相對路徑，怎麼也運行不起來，說找不到對應的app，因此我使用了絕對路徑，你要換成本身的HybridFlutter/iOS/build/ios/Debug-iphonesimulator/HybridIOS.app的絕對路徑

大功告成，這時候點擊run運行，就會先編譯ipa，在運行flutter

4.3 真機

真機是同樣的原理，就是命令參數不同：

運行flutter前編譯app的命令：xcrun xcodebuild build -configuration Debug VERBOSE_SCRIPT_LOGGING=YES -project ../../iOS/HybridIOS/HybridIOS.xcodeproj -scheme HybridIOS BUILD_DIR=../build/ios -sdk iphoneos -arch arm64

真機的app和模擬機app的產物路徑不同，因此flutter參數也得變： --use-application-binary /Users/realank/Documents/GitHub/HybridFlutter/iOS/build/ios/Debug-iphoneos/HybridIOS.app

這樣，咱們就能夠選擇想要運行的是真機仍是模擬器，而後點擊run運行

5 總結

flutter混合開發，須要手動設置的地方不少，可是一旦設置好，就不須要再改動，至於最後的flutter運行參數，須要指定絕對路徑，不知道什麼緣由，好在影響不大，有空再仔細研究。但願本文會對你有幫助









相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程