混合工程:当项目工程比较庞大的时候,开发者都有一套自己的开发环境。原生开发人员如果不想配置Flutter开发环境的话,那么还可以一起混编嘛?如果想在原生的项目中引入一个Flutter的页面。

混合工程集成

依赖环境

这个可以参考之前的文章混合开发,但是这个有一个弊端,这就要求本地需要配置flutter的环境。如果开发者本身没有配置这些环境变量,这就用不了(比如把本地的flutter修改一个名字)。所以就需要一个集成方式不依赖于flutter的环境配置,以下介绍两种不依赖开发环境的集成方式
image.png

framework集成

  • my_flutter(moudle,需要集成到原生中的dart代码)
  • MyFlutter(原生iOS项目)

使用命令集成,来到my_flutter文件目录下,然后使用如下命令:

  1. flutter build ios-framework --output=../flutter_framework

等待一段时间,如下就算成功了
image.png
我们可以看到生成了一个flutter_framework的文件夹,这个文件夹中分别有

  • Debug(开发环境,可以用来调试代码)
  • Release(发布环境,不可以调试, 效率高)
  • Profile(即有release的性能又有debug的调试功能)

image.png

  • App.xcframework:页面(可以有多份)
  • Flutter.xcframework:flutter环境(原生只含有一份即可)

打开iOS原生项目MyFlutter(此时的pod尚未配置任何有关flutter的信息),选中TARGRT-> General->加入Debug中的两个文件
image.png
运行之后:
image.png
这种,即使Native的开发者不配置flutter的环境,也可以调起flutter的代码,下面再介绍一种使用CocoaPods集成的方式

CocoaPods集成

跟上面的framework集成的命令差不多,只是多了一句--cocoapods

  1. flutter build ios-framework --cocoapods --output=../flutter_framework_cocoapods

image.png
成功之后文件目录如下,这个时候能够看出flutter是一个podspec的方式
image.png
把Debug文件拷贝到MyFlutter项目中,然后配置pod 文件

  1. # Uncomment the next line to define a global platform for your project
  2. platform :ios, '9.0'
  3. target 'MyFlutter' do
  4. # Comment the next line if you don't want to use dynamic frameworks
  5. use_frameworks!
  6. pod 'Flutter',:podspec => 'Debug/Flutter.podspec'
  7. # Pods for MyFlutter
  8. end

执行pod install之后,打开项目添加App.xcframework文件,此时可正常调用flutter文件。对于App.xcframework根据项目需要的话后期要不断的修改,原生开发者要不断的更换该文件,那么有没有一种便捷的方式,dart文件修改之后push上去,原生开发者直接pull下来使用呢?

自动化工程

新建仓库

下面的示例CI比较简单,算是抛砖引玉。首先需要一个git的仓库。来到我们的个人仓库,创建一个个人仓库[FlutterCI](https://github.com/liuNaiNai/FlutterCI),提交my_flutterMyFlutter代码
image.png
提交错误,提示我需要一个个人令牌来替代知道的账号密码认证,接着来创建个人令牌,setting->developer settings
image.png
image.png
点击创建,然后再次提交本地代码的时候,在需要输入账户密码的地方粘贴这个个人令牌即可

添加Actions

image.png
CI脚本,执行了之后就会在原生的项目MyFlutter内生成一个Flutter相关的文件,然后拉下来就可以使用了。注意:脚本是使用CocoaPod集成的,原生就需要配置CocoaPod。

  1. name: FlutterCI #CI名称
  2. on: [push] #触发条件push操作!
  3. jobs:
  4. check:
  5. name: Test on ${{ matrix.os }}
  6. #运行在哪个平台这里是MacOS平台
  7. runs-on: macos-latest
  8. steps:
  9. - uses: actions/checkout@v1
  10. #三方flutter的Action,它可以在服务器配置一个Flutter环境
  11. - uses: subosito/flutter-action@v1
  12. with:
  13. flutter-version: '2.5.3'
  14. channel: 'stable'
  15. #想让我们CI做的事情!
  16. - run: cd flutter_module && flutter build ios-framework --cocoapods --output=../MyFlutter/Flutter
  17. - run: |
  18. git add .
  19. git commit -m 'update flutter framework'
  20. - name: Push changes
  21. uses: ad-m/github-push-action@master
  22. with:
  23. github_token: ${{ secrets.GITHUB_TOKEN }}