Flutter踩坑日记:接入现有iOS项目

之前搞的Flutter版工具链已经弄完了,感兴趣的朋友可以围观下,Android版本dio库(v2.0.14)发送网络请求老是报错,去官方提了issue还没回,于是今天搞一下把Flutter模块接入到已有项目中。

首先Flutter官方已经出了wiki,教大家怎么接入。懒得看官方原文的可以看看这个简易版快速集成,先来看看效果。

一、创建Flutter模块

一般用Flutter或者React Native的团队大部分原因都是因为需要跨平台,所以在已有项目目录的上一级创建Flutter模块,譬如你的工作目录在some/path/MyApp,那么你需要在some/path下执行,这样Flutter可以单独交给一个虚拟团队维护,各自独立。

$ cd some/path/

$ flutter create -t module my_flutter

文件结构如下:

some/path/

? my_flutter/

? ? lib/main.dart

? ? .ios/

? MyApp/

? ? ? MyApp.xcodeproj

? ? ? Podfile

? ? MyApp/

? ? ? AppDelegate.h

? ? ? AppDelegate.m (or swift)

二、利用Cocoapods添加依赖

没用过Cocoapods的童鞋可以google搜一下,之前写过很多Cocoapods的文章由于博客主机商跑路都没了,说多了都是泪

1.在Podfile文件加入以下代码:

flutter_application_path = '../my_flutter/'

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

注意my_flutter的路径,因为我们是以xcodeproj文件的上一级创建的,所以需要加../,这个和React Native引入依赖路径是一样的,都需要注意这个问题。

2.执行pod install

注:如果报错

[!] InvalidPodfilefile: No such file or directory @ rb_sysopen - ./my_flutter/.ios/Flutter/podhelper.rb.

需要在my_flutter文件夹下执行以下flutter run,把.ios.androidflutter配置生成出来。

3.禁用bitcode,设置环境变量

找到你的targetBuild Settings->Build Options->Enable Bitcode设置为NO,另外在Preprocessor Macros添加FLUTTER_BUILD_MODE=DebugFLUTTER_BUILD_MODE=Release,如果还有其他环境需要根据情况选择DebugRelease

Flutter踩坑日记:接入现有iOS项目

4.添加run script

找到你的targetBuild Phases -> + -> New Run Script Phase,并且在bashzsh配置FLUTTER_ROOT,否则打包会出错找不到flutter。涉及多人开发还需要安装路径位置,否则团队小伙伴每个人的路径不一样。

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

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

注:把这个script放到Target Dependencies phasescript的后面。

5.添加assets资源

官网说需要添加Flutter.framework资源,但是这个Cocoapods已经帮忙引入了,所以就不需要了,如果没有被引入进去那就手动引入下。这里只需要添加flutter_assets就行了,记得选Creat folder references引入方式。Flutter 1.0.0版本路径是my_flutter->build->flutter_assets

6.修改AppDelegate

Objective-C:

AppDelegate.h

#import <UIKit/UIKit.h>

#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate

@property (nonatomic,strong) FlutterEngine *flutterEngine;

@end

AppDelegate.m

#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins

#include "AppDelegate.h"

@implementation AppDelegate

// This override can be omitted if you do not have any Flutter Plugins.

- (BOOL)application:(UIApplication *)application

? ? didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

? self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];

? [self.flutterEngine runWithEntrypoint:nil];

? [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];

? return [super application:application didFinishLaunchingWithOptions:launchOptions];

}

@end

Swift:

AppDelegate.swift

import UIKit

import Flutter

import FlutterPluginRegistrant // Only if you have Flutter Plugins.

@UIApplicationMain

class AppDelegate: FlutterAppDelegate {

? var flutterEngine : FlutterEngine?;

? // Only if you have Flutter plugins.

? override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

? ? self.flutterEngine = FlutterEngine(name: "io.flutter", project: nil);

? ? self.flutterEngine?.run(withEntrypoint: nil);

? ? GeneratedPluginRegistrant.register(with: self.flutterEngine);

? ? return super.application(application, didFinishLaunchingWithOptions: launchOptions);

? }

}

到这里,我们的Flutter就算已经引入工程了

三、跳转Flutter页面

Objective-C:

ViewController.m

#import <Flutter/Flutter.h>

#import "AppDelegate.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:@"Press me" forState:UIControlStateNormal];

? ? [button setBackgroundColor:[UIColor blueColor]];

? ? button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);

? ? [self.view addSubview:button];

}

- (void)handleButtonAction {

? ? FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];

? ? FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];

? ? [self presentViewController:flutterViewController animated:false completion:nil];

}

@end

Swift:

ViewController.swift

import UIKit

import Flutter

class ViewController: UIViewController {

? override func viewDidLoad() {

? ? super.viewDidLoad()

? ? let button = UIButton(type:UIButtonType.custom)

? ? button.addTarget(self, action: #selector(handleButtonAction), for: .touchUpInside)

? ? button.setTitle("Press me", for: UIControlState.normal)

? ? button.frame = CGRect(x: 80.0, y: 210.0, width: 160.0, height: 40.0)

? ? button.backgroundColor = UIColor.blue

? ? self.view.addSubview(button)

? }

? @objc func handleButtonAction() {

? ? let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.flutterEngine;

? ? let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)!;

? ? self.present(flutterViewController, animated: false, completion: nil)

? }

}

剩下的就是写Flutter页面逻辑了以及Flutter模块需要调用Native API(后面专门写一篇文章)。

写完Flutter页面,如果要跳转到指定页面使用Flutter的路由就可以了

Objective-C:

[flutterViewController setInitialRoute:@"route1"];

Swift:

flutterViewController.setInitialRoute("route1")

四、运行

my_flutter手动flutter run一下,或者直接开启热加载,然后就可以在原有的iOS项目中用Xcoderun起来了。

$ flutter attach --isolate-filter='debug'

Waiting for a connection from Flutter...

Done.

Syncing files to device...? ? ? 1.1s

??? To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".

An Observatory debugger and profiler is available at: http://127.0.0.1:43343/

For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

Connected view:

? debug isolate (isolates/642101161)

五、发布

执行flutter build ios以创建release版本(flutter build默认为--release

Flutter踩坑日记:接入现有iOS项目

上一篇:Android进阶:自定义视频播放器开发(下)


下一篇:mybatis 的模糊查询,别名,添加后返回自增列的值,mapper中sql字段的提取 configration节点中子节点顺序