iOS中集成flutter和趟坑小结

2019-06-05 本文已影响89人偏偏就是祢

官方混编文档

https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps#ios

由于在国内访问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

iOS中集成flutter和趟坑小结

官方混编文档

目录

一、Flutter架构

二、配置Flutter开发环境

1. 获取 Flutter 工程

2. 在bash_profile文件中配置 Flutter 环境变量