美文网首页
Flutter混合开发(Add Flutter to exist

Flutter混合开发(Add Flutter to exist

作者: 笑破天 | 来源:发表于2020-08-17 16:59 被阅读0次

    原文:Adding Flutter to iOS

    一、创建一个Flutter模块

    cd some/path/
    flutter create --template module my_flutter
    

    上述命令让我们在some/path/my_flutter/目录下创建了一个Flutter模块工程,在这个目录下,我们可以向在其他Flutter独立工程一样执行一些flutter命令,如:flutter run --debug或flutter build ios。你也可以在Android Studio/IntelliJ或VS代码中使用Flutter和Dart插件运行这个模块工程。此项目包含一个模块的单视图示例版本,它是一个被嵌入到现有的app之前的版本,这有助于你的代码中的纯Flutter部分的增量测试。

    二、模块项目结构

    my_flutter模块目录结构和普通的Flutter应用程序类似:

    my_flutter/
    ├── .ios/
    │   ├── Runner.xcworkspace
    │   └── Flutter/podhelper.rb
    ├── lib/
    │   └── main.dart
    ├── test/
    └── pubspec.yaml
    

    将Dart代码添加到lib/目录中。

    将Flutter dependencies添加到my_flutter/pubspec。包括Flutter packages 和 plugins。

    .ios隐藏文件夹包含一个Xcode workspace,在那里你可以独立运行你的模块工程 。它是一个用于引导Flutter代码的包装器项目,并包含帮助脚本,以方便构建框架或使用CocoaPods将模块工程嵌入到现有的应用程序中。

    注意:将自定义的iOS代码添加到您现有的应用程序项目或插件中,而不是添加到模块的.iOS /目录中。在模块的.iOS /目录中所做的更改不会出现在使用该模块的现有iOS项目中,而是会被Flutter覆盖。
    不要对.ios/目录进行源代码控制,因为它是自动生成的。在新机器上构建模块之前,在使用flutter模块构建iOS项目之前,先在my_flutter目录下运行flutter pub get来重新生成. iOS /目录。

    三、将Flutter模块嵌入到现有App的中

    有两种方法可以将Flutter嵌入到现有的App中。

    • 1.app的CocoaPods和本地Flutter SDK。(推荐)。
    • 2.全本地管理:将Flutter engine、编译的Dart代码、Flutter plugins打包生成frameworks,然后手动嵌入frameworks,并在Xcode中更新构建设置。

    使用Flutter会增加包体积

    1、使用CocoaPods+本地Flutter SDK

    每个开发人员都有一个本地安装的Flutter SDK版本。简单地在Xcode中构建你的应用程序就能自动运行脚本嵌入你的Dart和插件代码。这种方案能然你只用Xcode就能快速迭代最新的Flutter模块。

    下面的示例假设您的现有应用程序和Flutter模块位于同级目录中。如果您有一个不同的目录结构,您可能需要调整相对路径。

    some/path/
    ├── my_flutter/
    │   └── .ios/
    │       └── Flutter/
    │         └── podhelper.rb
    └── MyApp/
        └── Podfile
    
      1. 给Podfile添加代码
    flutter_application_path = '../my_flutter'
    load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
    
      1. 给每一个用到Flutter的target添加 install_all_flutter_pods(flutter_application_path)
    target 'MyApp' do
      install_all_flutter_pods(flutter_application_path)
    end
    
      1. pod install
        当你改变my_flutter/pubspec.yaml文件里面Flutter插件依赖关系时,需要在你的Flutter模块工程目录下执行flutter pub get刷新由podhelper.rb脚本读取的插件列表。然后在原工程目录some/path/MyApp上再pod install。

    podhelper.rb脚本:把你的plugins、Flutter.framework、App.framework嵌入项目
    build configurations:分别嵌入Debug/Release/Profile模式下的Flutter

    2、使用frameworks+手动嵌入

    生成frameworks,并通过手动编辑现有的Xcode项目的方式将它们嵌入到App中。

    使用场景:您的团队成员不能在本地安装Flutter SDK和CocoaPods,或者不想使用CocoaPods管理。
    缺点:在flutter模块中,每做一次代码更改你都必须运行一次flutter build ios-framework。

    1.生成frameworks

    下面的例子假设你想生成frameworks到some/path/MyApp/Flutter/目录。

    flutter build ios-framework --output=some/path/MyApp/Flutter/
    
    some/path/MyApp/
    └── Flutter/
        ├── Debug/
        │   ├── Flutter.framework
        │   ├── App.framework
        │   ├── FlutterPluginRegistrant.framework (only if you have plugins with iOS platform code)
        │   └── example_plugin.framework (each plugin is a separate framework)
        ├── Profile/
        │   ├── Flutter.framework
        │   ├── App.framework
        │   ├── FlutterPluginRegistrant.framework
        │   └── example_plugin.framework
        └── Release/
            ├── Flutter.framework
            ├── App.framework
            ├── FlutterPluginRegistrant.framework
            └── example_plugin.framework
    

    注意:import的Flutter.framework 和 App.framework路径要保持一致,否则会导致runtime crashes(例如Profile/Flutter.framework 和 Debug/App.framework)

    Tip:Xcode 11后,可以通过添加标志--xcframework --no-universal来生成XCFrameworks而不是通用框架。

    2.将生成的frameworks嵌入并链接到Xcode中

    链接frameworks

    • 1.拖拽some/path/MyApp/Flutter/Release/ 下的frameworks到targets’ build settings > Build Phases > Link Binary With Libraries.
    • 2.在target’s build settings的Framework Search Paths添加$(PROJECT_DIR)/Flutter/Release/

    嵌入frameworks

    • 拖拽framework到targets’ build settings > Build Phases > Embed Frameworks,选择Embed & Sign
      动态库必须嵌入app以便在runtime时加载。Plugins可以生成静态或动态框架。静态框架应该链接,而不是嵌入。如果你嵌入一个静态框架到你的应用程序,你的app将不能发布到App Store,并报一个archive error:Found an unexpected Mach-O header code。

    Tip:为了适配不同模式,需要更改:
    1.在MyApp.xcodeproj/project.pbxproj里面把path = Flutter/Release/example.framework;改为path = "Flutter/$(CONFIGURATION)/example.framework";

    2.在Framework Search Paths添加$(PROJECT_DIR)/Flutter/$(CONFIGURATION)

    还可以综合方案1、2。用CocoaPods管理Flutter,手动嵌入frameworks。

    总结:混合项目 有两种方式:使用CocoaPods+本地Flutter SDK、使用frameworks+手动嵌入。

    相关文章

      网友评论

          本文标题:Flutter混合开发(Add Flutter to exist

          本文链接:https://www.haomeiwen.com/subject/wnlqjktx.html