flutter 产物集成

2019-04-17 本文已影响245人 Andys

前言

flutter是一个真正实现了一次编码，多端运行的技术，在面对两个平台需要快速开发迭代，或节省人力成本的情况下，flutter是个很好的选择，特别是初创公司。至于flutter和其他技术的效率对比我不在这里多赘述，因为这篇文章重点不在于此。

但是针对市场上很多公司已有项目，有多少公司敢于将项目重新翻一次flutter，踩坑成本和学习成本都成为不可避免的代价！但我们可以选择部分使用flutter，于是乎，我开始寻找现有项目中加入flutter的解决方案。

想法很好，开始着手研究。我发现大体分为两种：一种是flutter官网的项目依赖，第二种是集成flutter产物。由于项目不一定是同一拨人开发native代码和flutter代码，那就有可能出现项目之间的依赖问题，以及进度，代码管理提交问题。所以我更想去了解后者，产物方式集成。这样可以实现两拨开发人员的独立性，也可以将产物发布到服务器，使用gradle来集成，那就是后话了。

然而，我一顿搜索，在我查找了官网、百度、简书、stackoverflow等等可以想到的搜索途径后，我发现没有一篇文章比较直观和简洁，总有一些文章会丢失一些关键性信息，或者含糊不清，或者实现方式比较繁琐、麻烦。我终于忍不住要自己整理一篇文章，来记录，也希望能帮到其他朋友。

值得注意的是，我采用了flutter module的方式集成，而不是flutter app，请大家注意！你可以选择使用Android Studio来创建flutter项目的时候选择 flutter module，也可以使用命令行flutter create -t module flutter_module来创建。

先附上github代码参考地址

flutter代码：http://github.com/Andy888888/flutter_aplus
native代码：http://github.com/Andy888888/flutter_aplus_native

效果图如下（蓝色导航栏界面为flutter效果）：

效果图 I

效果图 II

动图效果

动图被压缩的比较严重，牺牲了画质。因为有朋友说flutter出来的效果比较卡顿，所以主要给大家感受下流畅度（前提是不要拿debug模式来比较，我集成的是release模式产物）。

好了，废话完了，开整！

Android平台

生成aar文件

创建一个"flutter module"项目，直接点击运行会在.android/Flutter/build/outputs/目录下生成 flutter-debug.aar文件。但是，我们需要的是release文件，使用下面的命令可以生成fltter-release.aar文件

flutter build apk

我们将这个flutter-release.aar当作正常aar文件集成到我们的项目里即可

可能遇到的问题

一般flutter_module项目默认最低版本是16，要求版本不得低于16，视具体情况而定
在集成的时候，需要加入以下代码到gradle，否则报--min-O 最小版本必须大于Level26

compileOptions {
    sourceCompatibility 1.8
    targetCompatibility 1.8
}

Android Native 项目中测试aar
作为视图组件插入Activity中


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        flutterModule();
    }

    private void flutterModule() {
        View flutterView = Flutter.createView(MainActivity.this, getLifecycle(), "route2");
        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(600, 800);
        layoutParams.leftMargin = 100;
        layoutParams.topMargin = 400;
        addContentView(flutterView, layoutParams);
    }
}

作为Activity跳转

首先要在Application的onCreate中注册

FlutterMain.startInitialization(getApplicationContext());

创建一个FlutterModuleActivity

/**
 * 描述:FlutterModuleActivity.
 * <p>
 *
 * @author yanwenqiang.
 * @date 2019/4/15
 */
public class FlutterModuleActivity extends FlutterActivity implements ActivityParams {

    @Override
    public FlutterView createFlutterView(Context context) {
        String route = getIntent().getStringExtra(ROUTE);
        Log.e("路由：",route);

        WindowManager.LayoutParams matchParent = new WindowManager.LayoutParams(-1, -1);
        FlutterNativeView nativeView = this.createFlutterNativeView();
        FlutterView flutterView = new FlutterView(this, null, nativeView);
        flutterView.setInitialRoute(route);
        flutterView.setLayoutParams(matchParent);
        this.setContentView(flutterView);
        return flutterView;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this);
    }
}

跳转到FlutterModuleActivity

private void flutterActivity() {
        Intent intent = new Intent(this, FlutterModuleActivity.class);
        intent.putExtra(FlutterModuleActivity.ROUTE,
                "edit-property?{\"keyId\":\"123\",\"trustType\":2}");
        startActivity(intent);
    }

使用MethodChannel实现Flutter调用Native Code

public class FlutterModuleActivity extends FlutterActivity implements ActivityParams {
    // channel path
    private static final String CHANNEL = "flutter.io/lifecycle";
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this);

        new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
                (call, result) -> {
                    if (call.method.equals("back")) {
                        finish();
                    }
                });
    }
}

flutter 代码

// channel path
const platform = const MethodChannel('flutter.io/lifecycle');

Future<void> _back() async {
    try {
      await platform.invokeMethod('back');
    } on PlatformException catch (e) {
    }
  }

值得注意的是两端的【channel path】一定要保持一致。

iOS平台

flutter module项目生成iOS release版本 framework

flutter build ios --release

提取并添加App.framework和Flutter.framework到项目

App.framework在./ios/Flutter目录下。我们自己写的flutter代码就在这个framework里，每次修改flutter代码后，更新这个framework即可

Flutter.framework在./ios/Flutter/engine目录下。flutter的引擎，几乎不需要更换，除非官方有更新。

添加 framework

选择 Create folder references

改造AppDelegate

//
//  AppDelegate.h
//  TestFlutter
//
//  Created by 燕文强 on 2019/4/17.
//  Copyright © 2019 燕文强. All rights reserved.
//

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

@interface AppDelegate : FlutterAppDelegate <UIApplicationDelegate, FlutterAppLifeCycleProvider>

@end

//
//  AppDelegate.m
//  TestFlutter
//
//  Created by 燕文强 on 2019/4/17.
//  Copyright © 2019 燕文强. All rights reserved.
//

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate
{
    FlutterPluginAppLifeCycleDelegate *_lifeCycleDelegate;
}

- (instancetype)init {
    if (self = [super init]) {
        _lifeCycleDelegate = [[FlutterPluginAppLifeCycleDelegate alloc] init];
    }
    return self;
}

- (BOOL)application:(UIApplication*)application
didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {
    return [_lifeCycleDelegate application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)applicationDidEnterBackground:(UIApplication*)application {
    [_lifeCycleDelegate applicationDidEnterBackground:application];
}

- (void)applicationWillEnterForeground:(UIApplication*)application {
    [_lifeCycleDelegate applicationWillEnterForeground:application];
}

- (void)applicationWillResignActive:(UIApplication*)application {
    [_lifeCycleDelegate applicationWillResignActive:application];
}

- (void)applicationDidBecomeActive:(UIApplication*)application {
    [_lifeCycleDelegate applicationDidBecomeActive:application];
}

- (void)applicationWillTerminate:(UIApplication*)application {
    [_lifeCycleDelegate applicationWillTerminate:application];
}

- (void)application:(UIApplication*)application
didRegisterUserNotificationSettings:(UIUserNotificationSettings*)notificationSettings {
    [_lifeCycleDelegate application:application
didRegisterUserNotificationSettings:notificationSettings];
}

- (void)application:(UIApplication*)application
didRegisterForRemoteNotificationsWithDeviceToken:(NSData*)deviceToken {
    [_lifeCycleDelegate application:application
didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication*)application
didReceiveRemoteNotification:(NSDictionary*)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
    [_lifeCycleDelegate application:application
       didReceiveRemoteNotification:userInfo
             fetchCompletionHandler:completionHandler];
}

- (BOOL)application:(UIApplication*)application
            openURL:(NSURL*)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id>*)options {
    return [_lifeCycleDelegate application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication*)application handleOpenURL:(NSURL*)url {
    return [_lifeCycleDelegate application:application handleOpenURL:url];
}

- (BOOL)application:(UIApplication*)application
            openURL:(NSURL*)url
  sourceApplication:(NSString*)sourceApplication
         annotation:(id)annotation {
    return [_lifeCycleDelegate application:application
                                   openURL:url
                         sourceApplication:sourceApplication
                                annotation:annotation];
}

- (void)application:(UIApplication*)application
performActionForShortcutItem:(UIApplicationShortcutItem*)shortcutItem
  completionHandler:(void (^)(BOOL succeeded))completionHandler NS_AVAILABLE_IOS(9_0) {
    [_lifeCycleDelegate application:application
       performActionForShortcutItem:shortcutItem
                  completionHandler:completionHandler];
}

- (void)application:(UIApplication*)application
handleEventsForBackgroundURLSession:(nonnull NSString*)identifier
  completionHandler:(nonnull void (^)(void))completionHandler {
    [_lifeCycleDelegate application:application
handleEventsForBackgroundURLSession:identifier
                  completionHandler:completionHandler];
}

- (void)application:(UIApplication*)application
performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
    [_lifeCycleDelegate application:application performFetchWithCompletionHandler:completionHandler];
}

- (void)addApplicationLifeCycleDelegate:(NSObject*)delegate {
    [_lifeCycleDelegate addDelegate:delegate];
}

@end

创建FlutterModuleViewController

//
//  FlutterModuleViewController.h
//  TestFlutter
//
//  Created by 燕文强 on 2019/4/17.
//  Copyright © 2019 燕文强. All rights reserved.
//

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

@interface FlutterModuleViewController : FlutterViewController

@end

//
//  FlutterModuleViewController.m
//  TestFlutter
//
//  Created by 燕文强 on 2019/4/17.
//  Copyright © 2019 燕文强. All rights reserved.
//

#import "FlutterModuleViewController.h"

@interface FlutterModuleViewController ()

@end

@implementation FlutterModuleViewController

- (void)viewWillAppear:(BOOL)animated{
    // 页面进入后隐藏自带导航栏
    [self.navigationController setNavigationBarHidden:YES animated:YES];
    [super viewWillAppear:animated];
    
    // 支持侧滑返回
    self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;
    
    // flutter与Native交互
    FlutterMethodChannel *lifecycleChannel = [FlutterMethodChannel
                                            methodChannelWithName:@"flutter.io/lifecycle"
                                            binaryMessenger:self];
    [lifecycleChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        if([call.method isEqualToString:@"back"]){
            [self.navigationController popViewControllerAnimated:YES];
        }
    }];
}

-(void) viewWillDisappear:(BOOL)animated{
    [self.navigationController setNavigationBarHidden:NO animated:YES];
    [super viewWillDisappear:animated];
}

- (UIView *)splashScreenView{
# warning 重写splashScreenView来处理Native跳转到Flutter页面时，会出现LaunchScreen
    CGRect rect = [UIScreen mainScreen].applicationFrame;
    UIView *view = [[UIView alloc]initWithFrame:rect];
    view.backgroundColor=UIColor.redColor;
    
    return view;
}

@end

跳转到FlutterModuleViewController

- (IBAction)click:(id)sender {
    FlutterModuleViewController *flutterViewController = [[FlutterModuleViewController alloc] initWithProject:nil nibName:nil bundle:nil];
    [flutterViewController setInitialRoute:@"edit-property?{\"keyId\":\"123\",\"trustType\":2}"];
    [self.navigationController pushViewController:flutterViewController animated:YES];
}

运行时记得关闭BitCode

祝你flutter玩的开心！

flutter 产物集成

前言

Android平台

生成aar文件

可能遇到的问题

Android Native 项目中测试aar

作为视图组件插入Activity中

作为Activity跳转

iOS平台

flutter module项目生成iOS release版本 framework

提取并添加`App.framework`和`Flutter.framework`到项目

改造AppDelegate

创建FlutterModuleViewController

跳转到FlutterModuleViewController

运行时记得关闭BitCode

祝你flutter玩的开心！

猜你喜欢

热点阅读

flutter 产物集成

前言

Android平台

生成aar文件

可能遇到的问题

Android Native 项目中测试aar

作为视图组件插入Activity中

作为Activity跳转

iOS平台

flutter module项目生成iOS release版本 framework

提取并添加App.framework和Flutter.framework到项目

改造AppDelegate

创建FlutterModuleViewController

跳转到FlutterModuleViewController

运行时记得关闭BitCode

祝你flutter玩的开心！

猜你喜欢

热点阅读

提取并添加`App.framework`和`Flutter.framework`到项目