Flutter与原生混编-framework方式

时间:2021-7-3 作者:qvyue

距离上次写Flutter【iOS 学习Flutter (网络库dio简单封装,数据解析)】已经过去快一年了,哈哈。
最近有时间搞了一下混编方案以及通过pod来管理+一些简单的交互demo
使用的是framework导入的方式,这样多人开发不需要每个人的电脑都有Flutter环境,相对官方方式友好度较高
本文用到的2个仓库:flutter_pod,flutter_podDemo

以iOS为例下面一步步来记录一下

Flutter编译后得到产物

  • 首先肯定先创建一个文件夹,然后在文件夹里创建一个Flutter模版项目,通过命令flutter create -t module flutter_module,(图中有些文件是后面的流程产生的或者自己记录的,跟这一步没有关系,不用在意)。
    Flutter与原生混编-framework方式
    image.png
  • 可以显示一下隐藏文件,里面有个.ios,如果build遇到一些什么bundle id,证书的问题,可以在这个Runner项目里改一改。
  • 这里我们假设一下,Flutter里用到了插件,随便加一个shared_preferences插件
    Flutter与原生混编-framework方式
    image.png
  • 通过以下命令编译得到产物(我们需要的东西)。
flutter build ios --debug
flutter build ios --release --no-codesign
/// 还有一些参数可以自己了解一下,后面脚本文件里也会有用到的,可以参考参考
Flutter与原生混编-framework方式
image.png
  • 这里用了别人的一个脚本文件(move_file.sh),不过改了增加了一些东西,作用就是通过脚本创建一个文件夹,将编译后的这些库统一拷贝到一起(ios_frameworks),然后增加了一些指令参数判断,sh move_file [debug/release] [sim]跑一下就行了,可以去github仓库里看具体的脚本文件。如下图,ios_frameworks里的东西就是我们需要的了。
    Flutter与原生混编-framework方式
    image.png

pod集成产物(跟弄私有库没啥大区别)

  • 既然得到了需要的产物,那么接下来就是原生项目集成了,采取的是pod集成,方便快捷。
  • flutter_pod文件夹里创建.podspec文件,pod spec create flutter_pod
    Flutter与原生混编-framework方式
    image.png
  • 编辑.podspec文件,按情况来
Pod::Spec.new do |s|
  s.name             = 'flutter_pod'
  s.version          = '1.0.0'
  s.summary          = 'flutter_pod'

  s.description      =  'MIT', :file => 'LICENSE' }
  s.author           = { 'huangjian0414' => 'xxx@gmail.com' }
  s.source           = { :git => 'https://github.com/huangjian0414/flutter_pod', :tag => s.version }
  
  s.ios.deployment_target = '9.0'
  
  s.static_framework = true
  p = Dir::open("ios_frameworks")
  arr = Array.new
  arr.push('ios_frameworks/*.framework')
  s.ios.vendored_frameworks = arr
end
  • flutter_pod同级目录创建原生demo项目,不是必须这个路径,这里为了方便本地pod
    Flutter与原生混编-framework方式
    image.png
  • podfile里增加如下行,再pod install一下,即导入了flutter生成的库。

pod ‘flutter_pod’, :path => ‘../flutter_pod’

Flutter与原生混编-framework方式
image.png

使用

  • 调整一下AppDelegate,来使用一下看看
/// .h
#import 
#import 

@interface AppDelegate : FlutterAppDelegate 

@property (strong, nonatomic) UIWindow *window;
@end

/// .m
#import "AppDelegate.h"
#import "ViewController.h"
#import 

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.window setBackgroundColor:[UIColor whiteColor]];
    ViewController *con = [[ViewController alloc] init];
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:con];
    [self.window setRootViewController:nav];
    [self.window makeKeyAndVisible];
    
    [GeneratedPluginRegistrant registerWithRegistry:self];
    
    return YES;
}

@end
  • ViewController里增加一个按钮跳转Flutter界面
    Flutter与原生混编-framework方式
    image.png
  • 效果如下
    Flutter与原生混编-framework方式
    May-17-2021 20-03-29.gif

    这样就完成了一个简单的集成了

可能遇到的问题

  • 更换一下Runner工程的bundle id
    Flutter与原生混编-framework方式
    image.png
  • 如果build的时候如下架构报错,项目设置无效架构

    Flutter与原生混编-framework方式
    image.png

    将framework通过cocoapods管理一下,流程就不说了,比较简单,网上也多

    • 弄好之后就可以pod 'flutter_pod',:git =>'https://github.com/xxx/flutter_pod',:tag => '0.1.0'导入了
      Flutter与原生混编-framework方式
      image.png

    优化

    • 打包出来的Flutter.framework release包,过大。xcrun bitcode_strip Flutter -r -o Flutter移除bitcode代码,本文已放入move_file.sh里处理。

    老项目flutter build 可能Warning

    Flutter与原生混编-framework方式
    image.png
    • AndroidManifest.xml里增加俩行

android:name=”flutterEmbedding”
android:value=”2″ />

Flutter与原生混编-framework方式
image.png
  • 或者如下错误,根据提示删除重跑就行了

    Flutter与原生混编-framework方式
    image.png

带一点混编交互跳转吧,demo里反正也有

  • Flutter按钮点击跳转原生,使用MethodChannel通信

    Flutter与原生混编-framework方式
    image.png

    Flutter与原生混编-framework方式
    image.png

    Flutter与原生混编-framework方式
    image.png
  • 原生跳“Flutter指定界面,点击Flutter界面按钮,事件交给原生,并回调数据给Flutter
    Flutter与原生混编-framework方式
    image.png

    Flutter与原生混编-framework方式
    image.png

    Flutter与原生混编-framework方式
    image.png

都是一些简单的demo,实际项目自行研究,本文只做一点混编的分享,ps:我还并没有做过实际的Flutter项目,哈哈哈

demo效果如下,本文所有东西都在文首的2个仓库里。
Flutter与原生混编-framework方式
May-20-2021 10-59-57.gif

补充:demo里文档补充了点安卓混编,没搞过安卓简单研究了一下,可参考参考。安卓demo

如有错误,大佬带我。

end

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。