混合开发

新建Flutter工程flutter_module，工程类型Flutter Module
新建iOS工程NativeDemo跟flutter_module工程放入同一目录，使其与flutter_module工程进行关联，能够打开flutter页面

• 创建Podfile文件以及配置

$ cd /Users/wn/Desktop/NativeDemo
$ pod init

<!-- Podfile文件 -->
flutter_application_path = '../flutter_module'
load File.join(flutter_application_path,'.iOS','Flutter','podhelper.rb')

platform :ios, '9.0'

target 'NativeDemo' do
  install_all_flutter_pods(flutter_application_path)
  use_frameworks!

end

$ pod install

执行pod install命令

• 查看NativeDemo工程与flutter_module相关依赖是否引入

flutter相关内容成功导入

• 添加跳转Flutter页面代码运行NativeDemo

image.png

如果当前~/flutter环境不能使用，这个时候NativeDemo就打不开flutter页面，如果我们想跳转flutter页面，就需要构建混合工程打包成framework使用。

// ~/flutter环境出错，运行NativeDemo提示错误
Command PhaseScriptExecution failed with a nonzero exit code

Flutter混合工程构建

下面把flutter_module打包成framework提供给NativeDemo工程使用

• 构建混合工程

// 构建混合工程
$ cd /Users/wn/Desktop/flutter_module
$ flutter build ios-framework --output=../flutter_app

image.png

flutter包发布会有三个版本Debug、Release、Profile；其中Release发布版本的性能最高，因为发布版本会把调试信息等去掉，所以Debug调试版本的包并不能体现出其性能；而Profile版本的包同时具备调试功能与发布版本的性能；一般在发布之前会使用Profile版本进行调试。

• 这里我们先把Debug版本的framework导入NativeDemo工程使用

image.png

其中Flutter.xcframework与flutter环境相关，原生工程只要有了Flutter.xcframework就具备了flutter环境，其实就是有了flutter的api；如果想要显示flutter_module工程的内容，就需要使用App.xcframework。

image.png image.png

• 运行NativeDemo工程

image.png

这个时候即便~/flutter环境出现问题，NativeDemo混合工程依然能够运行；只是嵌入了flutter渲染引擎会导致NativeDemo.app体积变大。

// ～/flutter环境出现问题
$ flutter doctor
-bash: /Users/wn/Documents/flutter/bin/flutter: No such file or directory

Cocoapods

上面我们通过framework构建了混合工程，接下来我们通过Cocoapods来构建混合工程。

• 构建混合工程

// 构建混合工程
$ cd /Users/wn/Desktop/flutter_module
$ flutter build ios-framework --cocoapods --output=../flutter_app

image.png

使用Cocoapods构建混合工程，Flutter引擎环境在Debug目录下变成了Flutter.podspec，与framework不同的是引擎环境需要自己下载。

• 把Debug版本的framework放入NativeDemo工程目录下

image.png

$ pod init

<!-- Podfile文件 -->
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'NativeDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  pod 'Flutter',:podspec => 'Debug/Flutter.podspec'
  # Pods for NativeDemo
end

$ pod install 

• 导入App.xcframework库

导入App库

成功运行NativeDemo工程。

问题：如果flutter_module工程代码发生变化，就需要重新打包App.xcframework，这样就很繁琐，下面我们配置脚本使用混合工程自动化。

混合工程自动化

• 使用Github创建一个代码仓库

image.png

• 配置免密登陆，生成access token并配置成环境变量进行免密登陆

image.png

• 进入混合工程自动化目录，把flutter_module与NativeDemo工程整个作为仓库

终端执行该命令创建仓库 创建仓库

• 把flutter_module与NativeDemo工程提交到服务器

$ git add .
$ git commit -m '添加工程'
$ git push 

提交成功

• 把module打包成framework并放入仓库目录，也就是把打包过程交给仓库来做

Github中点击Actions配置CI

<!-- CI脚本内容，每次提交代码就会重新打包framework -->
name: FlutterCI #CI名称
on: [push] #触发条件push操作！

jobs:
  check:
    name: Test on ${{ matrix.os }}
    #运行在哪个平台这里是MacOS平台
    runs-on: macos-latest
    
    steps:
      - uses: actions/checkout@v1
      #三方flutter的Action，它可以在服务器配置一个Flutter环境
      - uses: subosito/flutter-action@v1
        with:
          flutter-version: '2.5.3'
          channel: 'stable'
      #想让我们CI做的事情！
      - run: cd flutter_module && flutter build ios-framework --cocoapods --output=../NativeDemo/Flutter 
      - run: |
         git add .
         git commit -m 'update flutter framework'
     
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

配置脚本

• 执行脚本文件，Flutter目录下成功打包framework文件

image.png

• 拉取代码

$ git pull

成功拉取framework库

• 配置Podfile文件，并执行pod命令

$ pod init

<!-- Podfile文件 -->
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'NativeDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  pod 'Flutter',:podspec => '/Flutter/Debug/Flutter.podspec'
  # Pods for NativeDemo
end

$ pod install 

• 导入App.xcframework库，成功运行NativeDemo工程（同上面Cocoapods过程）