Flutter 混合開發(fā)FlutterBoost iOS 接入流程

緊接著上次的FlutterBoost Android版本接入竭钝,這次主要講iOS相關(guān)的接入

1.創(chuàng)建Flutter module

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

flutter create -t module flutter_module

2.iOS開始接入

2.1 Pod集成

現(xiàn)在一般的iOS應(yīng)用都是用cocopod集成的梨撞,一般都有對應(yīng)的Podfile文件,在對應(yīng)的Podfile文件末尾處加入以下代碼

flutter_application_path = '../flutter_module'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

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

之后再iOS工程目錄下執(zhí)行 pod install 命令庇茫,會在pod下面的Development Pods文件下面看到Flutter 和FlutterPluginRegistrant 兩個文件幽勒。

如果出現(xiàn)啥錯誤,記得在工程的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填入以上腳本

之后執(zhí)行Build 編譯锈颗,項目應(yīng)該能運行起來,如果出現(xiàn)執(zhí)行上面的步驟咪惠。

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的業(yè)務(wù)跳轉(zhuǎn)

#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

這樣即可點擊跳轉(zhuǎn)到Flutter默認生成的main界面

4.FlutterBoost接入

4.1 Flutter 工程接入FlutterBoost

在對應(yīng)的pubspec.yaml文件中加入依賴击吱,pubspec.yaml就是一個配置文件

flutter_boost:
        git:
            url: 'https://github.com/alibaba/flutter_boost.git'
            ref: '0.0.411'

之后調(diào)用Package get,右上角即可查看遥昧,之后還是在命令行工具下在flutte_module 根目下覆醇,執(zhí)行flutter build ios 以及在iOS的根目錄下執(zhí)行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 永脓,而對應(yīng)的.m文件可保持不變或者去掉

[GeneratedPluginRegistrant registerWithRegistry:self];

都可以

4.3.3 實現(xiàn)FLBPlatform協(xié)議

應(yīng)用程序?qū)崿F(xiàn)FLBPlatform協(xié)議方法,可以使用官方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

也可以自己根據(jù)此修改鞋仍。其中的openPage 方法會接收來至flutter-->native以及native-->flutter的頁面跳轉(zhuǎn)常摧,可以根據(jù)用戶自由的書寫

4.3.5 初始化FlutterBoost

[FlutterBoostPlugin.sharedInstance startFlutterWithPlatform:router
                                                        onStart:^(FlutterViewController * fvc){
                                                            
                                                        }];

官方demo是在AppDelegate中初始化的,可以修改FLBPlatform協(xié)議實現(xiàn)類完成對應(yīng)的操作對應(yīng)的初始化做

5.頁面跳轉(zhuǎn)

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);

最終都會跳轉(zhuǎn)到FLBPlatform 協(xié)議實現(xiàn)類的openPage 方法中威创,很多操作都是在FLBPlatform協(xié)議實現(xiàn)類中落午,包括頁面跳轉(zhuǎn),關(guān)閉肚豺,以及對應(yīng)的一些Flutter 和Native通信相關(guān)的实辑。

版本升級1.9.1

iOS的pod文件需要修改

flutter_application_path = 'path/to/my_flutter/'
  load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

  target 'MyApp' do
    install_all_flutter_pods(flutter_application_path)
  end
  target 'MyAppTests' do
    install_all_flutter_pods(flutter_application_path)
  end

并且需要去掉下面的腳本

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

具體詳情可以查看GitHub Flutter官方文檔

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末肥惭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拭荤,老刑警劉巖嗽冒,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件憔辫,死亡現(xiàn)場離奇詭異荞下,居然都是意外死亡,警方通過查閱死者的電腦和手機隐岛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門猫妙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人聚凹,你說我怎么就攤上這事割坠。” “怎么了妒牙?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵彼哼,是天一觀的道長。 經(jīng)常有香客問我湘今,道長敢朱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮拴签,結(jié)果婚禮上孝常,老公的妹妹穿的比我還像新娘。我一直安慰自己蚓哩,他們只是感情好构灸,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著岸梨,像睡著了一般喜颁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上曹阔,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天半开,我揣著相機與錄音,去河邊找鬼赃份。 笑死寂拆,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的芥炭。 我是一名探鬼主播漓库,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼恃慧,長吁一口氣:“原來是場噩夢啊……” “哼园蝠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起痢士,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤彪薛,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后怠蹂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體善延,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年城侧,在試婚紗的時候發(fā)現(xiàn)自己被綠了易遣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡嫌佑,死狀恐怖豆茫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情屋摇,我是刑警寧澤揩魂,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站炮温,受9級特大地震影響火脉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一倦挂、第九天 我趴在偏房一處隱蔽的房頂上張望畸颅。 院中可真熱鬧,春花似錦方援、人聲如沸重斑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽窥浪。三九已至,卻和暖如春笛丙,著一層夾襖步出監(jiān)牢的瞬間漾脂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工胚鸯, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留骨稿,地道東北人。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓姜钳,卻偏偏與公主長得像坦冠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子哥桥,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內(nèi)容