Flutter 混合開發FlutterBoost iOS 接入流程

Rx_Re發表於2019-06-05
FlutteriOS

緊接著上次的FlutterBoost Android版本接入，這次主要講iOS相關的接入

1.建立Flutter module

這個步驟前面的Android版本一樣

flutter create -t module flutter_module
複製程式碼

2.iOS開始接入

2.1 Pod整合

現在一般的iOS應用都是用cocopod整合的，一般都有對應的Podfile檔案，在對應的Podfile檔案末尾處加入以下程式碼

flutter_application_path = '../flutter_module'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
複製程式碼

最好也和Android一樣，分開兩個工程，iOS工程和flutter功能是平級的，這樣互不影響

之後再iOS工程目錄下執行 pod install 命令，會在pod下面的Development Pods檔案下面看到Flutter 和FlutterPluginRegistrant 兩個檔案。

如果出現啥錯誤，記得在工程的BuildSettings 下面檢查Enable BitCode是否為NO。

2.2新增編譯指令碼

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
複製程式碼

在BuildPhases 欄下，點選左上角的加號(+) 選擇New Run Script Phase填入以上指令碼

之後執行Build 編譯，專案應該能執行起來，如果出現執行上面的步驟。

3.混編程式碼整合

修改AppDelegate.h/m檔案

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

@interface AppDelegate : FlutterAppDelegate <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

+ (AppDelegate *)sharedAppDelegate;

@end
複製程式碼

h標頭檔案需要整合FlutterAppDelegate

#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

#import "AppDelegate.h"
#import "AppDelegate+Init.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.backgroundColor = [UIColor whiteColor];
    [self initConfigWithOptions:launchOptions];
    [self.window makeKeyAndVisible];
    [GeneratedPluginRegistrant registerWithRegistry:self];
    return YES;
}
複製程式碼

在AppDelegate.m檔案的didFinishLaunchingWithOptions方法中加入外掛整合的方法

[GeneratedPluginRegistrant registerWithRegistry:self];
複製程式碼

增加ViewController的業務跳轉

#import <Flutter/Flutter.h>
#import "ViewController.h"

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self
               action:@selector(handleButtonAction)
     forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"點我" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor redColor]];
    button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
    [self.view addSubview:button];
}

- (void)handleButtonAction {
    FlutterViewController* flutterViewController = [[FlutterViewController alloc] init];
    [self presentViewController:flutterViewController animated:false completion:nil];
}
@end
複製程式碼

這樣即可點選跳轉到Flutter預設生成的main介面

4.FlutterBoost接入

4.1 Flutter 工程接入FlutterBoost

在對應的pubspec.yaml檔案中加入依賴，pubspec.yaml就是一個配置檔案

flutter_boost:
        git:
            url: 'https://github.com/alibaba/flutter_boost.git'
            ref: '0.0.411'
複製程式碼

之後呼叫Package get，右上角即可檢視，之後還是在命令列工具下在flutte_module 根目下，執行flutter build ios 以及在iOS的根目錄下執行pod install 使iOS和flutter都新增FlutterBoost外掛。

4.2Flutter中main.dart檔案中配置

可以參考前面的Android版本

4.3 iOS工程的修改

4.3.1 新增libc++

需要 將libc++ 加入 "Linked Frameworks and Libraries" 這個主要是專案的General 的Linked Frameworks and Libraries 欄下，點選加號（+）搜尋libc++,找到libc++.tbd即可

4.3.2 修改AppDelegate.h/m檔案

#import <UIKit/UIKit.h>
#import <flutter_boost/FlutterBoost.h>

@interface AppDelegate : FLBFlutterAppDelegate <UIApplicationDelegate, XGPushDelegate>
@property (strong, nonatomic) UIWindow *window;

+ (AppDelegate *)sharedAppDelegate;

@end

複製程式碼

需要繼承FLBFlutterAppDelegate ，而對應的.m檔案可保持不變或者去掉

[GeneratedPluginRegistrant registerWithRegistry:self];
複製程式碼

都可以

4.3.3 實現FLBPlatform協議

應用程式實現FLBPlatform協議方法，可以使用官方demo中的DemoRouter

@interface DemoRouter : NSObject<FLBPlatform>

@property (nonatomic,strong) UINavigationController *navigationController;

+ (DemoRouter *)sharedRouter;

@end


@implementation DemoRouter

- (void)openPage:(NSString *)name
          params:(NSDictionary *)params
        animated:(BOOL)animated
      completion:(void (^)(BOOL))completion
{
    if([params[@"present"] boolValue]){
        FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController presentViewController:vc animated:animated completion:^{}];
    }else{
        FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController pushViewController:vc animated:animated];
    }
}


- (void)closePage:(NSString *)uid animated:(BOOL)animated params:(NSDictionary *)params completion:(void (^)(BOOL))completion
{
    FLBFlutterViewContainer *vc = (id)self.navigationController.presentedViewController;
    if([vc isKindOfClass:FLBFlutterViewContainer.class] && [vc.uniqueIDString isEqual: uid]){
        [vc dismissViewControllerAnimated:animated completion:^{}];
    }else{
        [self.navigationController popViewControllerAnimated:animated];
    }
}

@end
複製程式碼

也可以自己根據此修改。其中的openPage 方法會接收來至flutter-->native以及native-->flutter的頁面跳轉，可以根據使用者自由的書寫

4.3.5 初始化FlutterBoost

[FlutterBoostPlugin.sharedInstance startFlutterWithPlatform：router
                                                        onStart：^（FlutterViewController * fvc）{
                                                            
                                                        }];
複製程式碼

官方demo是在AppDelegate中初始化的，可以修改FLBPlatform協議實現類完成對應的操作對應的初始化做

5.頁面跳轉

Native-->Flutter

FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController presentViewController:vc animated:animated completion:^{}];
複製程式碼

Flutter-->Native

FlutterBoost.singleton.openPage("pagename", {}, true);
複製程式碼

最終都會跳轉到FLBPlatform 協議實現類的openPage 方法中，很多操作都是在FLBPlatform協議實現類中，包括頁面跳轉，關閉，以及對應的一些Flutter 和Native通訊相關的。

相關文章