混合开发
新建Flutter工程flutter_module，工程类型Flutter Module
新建iOS工程NativeDemo跟flutter_module工程放入同一目录，使其与flutter_module工程进行关联，能够打开flutter页面
- 创建
Podfile文件以及配置
$ cd /Users/wn/Desktop/NativeDemo
$ pod init
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
- 查看
NativeDemo工程与flutter_module相关依赖是否引入
- 添加
跳转Flutter页面代码运行NativeDemo
如果当前~/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
flutter包发布会有三个版本Debug、Release、Profile；其中Release发布版本的性能最高，因为发布版本会把调试信息等去掉，所以Debug调试版本的包并不能体现出其性能；而Profile版本的包同时具备调试功能与发布版本的性能；一般在发布之前会使用Profile版本进行调试。
- 这里我们先把
Debug版本的framework导入NativeDemo工程使用
其中Flutter.xcframework与flutter环境相关，原生工程只要有了Flutter.xcframework就具备了flutter环境，其实就是有了flutter的api；如果想要显示flutter_module工程的内容，就需要使用App.xcframework。
- 运行
NativeDemo工程
这个时候即便~/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
使用Cocoapods构建混合工程，Flutter引擎环境在Debug目录下变成了Flutter.podspec，与framework不同的是引擎环境需要自己下载。
- 把
Debug版本的framework放入NativeDemo工程目录下
$ pod init
# 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库
成功运行NativeDemo工程。
问题：如果flutter_module工程代码发生变化，就需要重新打包App.xcframework，这样就很繁琐，下面我们配置脚本使用混合工程自动化。
混合工程自动化
- 使用
Github创建一个代码仓库
- 配置
免密登陆，生成access token并配置成环境变量进行免密登陆
- 进入
混合工程自动化目录，把flutter_module与NativeDemo工程整个作为仓库
- 把
flutter_module与NativeDemo工程提交到服务器
$ git add .
$ git commit -m '添加工程'
$ git push
- 把
module打包成framework并放入仓库目录，也就是把打包过程交给仓库来做
Github中点击Actions配置CI
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文件
- 拉取代码
$ git pull
- 配置
Podfile文件，并执行pod命令
$ pod init
# 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过程）