官方混编文档
https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps#ios
目录
- Flutter架构
- 配置Flutter开发环境（Mac 为例）
- iOS现有项目接入flutter
- flutter切换依赖的iOS工程
一、Flutter架构
790890-8cc7de95aa2763b4.png
二、配置Flutter开发环境
1. 获取 Flutter 工程
我们可以将Flutter克隆到本地
- sudo git clone -b beta https://github.com/flutter/flutter.git $HOME/flutter
2. 在bash_profile文件中配置 Flutter 环境变量
由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，可以把镜像地址添加到环境变量中，为了方便后续使用，需要将项目根目录下bin路径加入环境变量PATH中，打开~/.bash_profile文件，修改环境变量即可
- 如果已有bash_profile则 执行命令 open -e ~/.bash_profile 在底部添加环境变量，如无bash_profile 则执行命令touch ~/.bash_profile添加环境变量
export ANDROID_HOME=/Users/wsh/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/wsh/flutter/bin:$PATH
- 然后生效环境变量，终端 执行 source ~/.bash_profile
3. flutter doctor 检测本机环境
因为flutter依赖的东西比较多，如果我们想要保证flutter环境没问题，需要执行 flutter doctor 检测确保当前环境。
在终端中执行 flutter doctor 命令，查看有哪些没安装成功的，最好按照提示安装成功
三、iOS现有项目接入flutter
1.创建Flutter模块
- cd到项目同级目录，执行flutter命令创建
cd /Users/wsh/Desktop/youpin
flutter create -t module flutter_library
2.设置 Flutter 的脚本
- 点击project--->target--->build phases,点击+增加Run Script 项，并添加下面两行脚本命令
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
3.在info.plist添加配置
添加io.flutter.embedded_views_preview为YES
4.我们用cocopods集成了flutter
- 在Podfile最后面添加下面这段
flutter_application_path = '../BI_Client_Flutter'
eval(File.read(File.join(flutter_application_path, 'Flutter_ios', 'podhelper.rb')), binding)
- 上面这个路径少了一个子路径 .ios ,这个是因为后面flutter项目中我们依赖的iOS工程换成了我们自己现有的
系统默认的路径.png
我们定义的路径.png
- 这个podhelper.rb也改了路径，如下图改成了下下图的样子：
屏幕快照 2019-05-31 下午3.42.59.png
屏幕快照 2019-05-31 下午3.42.46.png
-
注意上面的Generated.xcconfig其实是.ios/Flutter目录下Generated.xcconfig的替身，这是因为这个文件是系统生成的，如果自己生成里面的路径是绝对的
-
后续改造在第四部分继续
5.给flutter工程一个原生的容器
- 我创建了一个继承FlutterViewController的容器
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface ViewController : FlutterViewController
@end
@interface ViewController ()
@property (nonatomic, strong) UIButton *loginBtn;
@property (nonatomic, strong) FlutterEngine *flutterEngine;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[GeneratedPluginRegistrant registerWithRegistry:[self pluginRegistry]];
__weak __typeof(self) weakSelf = self;
// 要与main.dart中一致
NSString *channelName = @"com.123";
FlutterMethodChannel *messageChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:self];
[messageChannel setMethodCallHandler:^(FlutterMethodCall* _Nonnull call, FlutterResult _Nonnull result) {
// call.method 获取 flutter 给回到的方法名，要匹配到 channelName 对应的多个 发送方法名，一般需要判断区分
// call.arguments 获取到 flutter 给到的参数，（比如跳转到另一个页面所需要参数）
// result 是给flutter的回调， 该回调只能使用一次
NSLog(@"flutter 给到我：\nmethod=%@ \narguments = %@",call.method,call.arguments);
if([call.method isEqualToString:@"iOSFlutter"]) {
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"flutter回调" message:[NSString stringWithFormat:@"%@",call.arguments] delegate:self cancelButtonTitle:@"确定"otherButtonTitles:nil];
[alertView show];
// 回调给flutter
if (result) {
result(@1000);
}
} else {
result(FlutterMethodNotImplemented);
}
}];
}
@end
- 这个 [GeneratedPluginRegistrant registerWithRegistry:[self pluginRegistry]]; 我们遇到过坑
* 1.我们引入 flutter_webview_plugin，其实我们需要注册plugins.flutter.io/webview，我们需要创建GeneratedPluginRegistrant，并在里面注册，不然一直报错
6.工程的名字需要修改成Runner，不然会报错
7.打包编译的时候可能
iOS Archive-> Could not find an option named "track-widget-creation"
需要我们在flutter的根目录下执行 flutter build ios
四、Flutter切换依赖的iOS工程
-
如果我们想在flutter中flutter run运行项目，我们将我们自己iOS工程制作了替身放到了flutter工程目录下以此替换.ios目录下的iOS工程
屏幕快照 2019-05-31 下午3.48.23.png
网友评论