混合開發(fā)

新建Flutter工程flutter_module，工程類型Flutter Module
新建iOS工程NativeDemo跟flutter_module工程放入同一目錄，使其與flutter_module工程進行關聯(lián)，能夠打開flutter頁面

• 創(chuàng)建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

執(zhí)行pod install命令

• 查看NativeDemo工程與flutter_module相關依賴是否引入

flutter相關內容成功導入

• 添加跳轉Flutter頁面代碼運行NativeDemo

image.png

如果當前~/flutter環(huán)境不能使用，這個時候NativeDemo就打不開flutter頁面，如果我們想跳轉flutter頁面，就需要構建混合工程打包成framework使用。

// ~/flutter環(huán)境出錯，運行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包發(fā)布會有三個版本Debug、Release、Profile；其中Release發(fā)布版本的性能最高，因為發(fā)布版本會把調試信息等去掉，所以Debug調試版本的包并不能體現(xiàn)出其性能；而Profile版本的包同時具備調試功能與發(fā)布版本的性能；一般在發(fā)布之前會使用Profile版本進行調試。

• 這里我們先把Debug版本的framework導入NativeDemo工程使用

image.png

其中Flutter.xcframework與flutter環(huán)境相關，原生工程只要有了Flutter.xcframework就具備了flutter環(huán)境，其實就是有了flutter的api；如果想要顯示flutter_module工程的內容，就需要使用App.xcframework。

image.png

image.png

• 運行NativeDemo工程

image.png

這個時候即便~/flutter環(huán)境出現(xiàn)問題，NativeDemo混合工程依然能夠運行；只是嵌入了flutter渲染引擎會導致NativeDemo.app體積變大。

// ～/flutter環(huán)境出現(xiàn)問題
$ 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引擎環(huán)境在Debug目錄下變成了Flutter.podspec，與framework不同的是引擎環(huán)境需要自己下載。

• 把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工程代碼發(fā)生變化，就需要重新打包App.xcframework，這樣就很繁瑣，下面我們配置腳本使用混合工程自動化。

混合工程自動化

• 使用Github創(chuàng)建一個代碼倉庫

image.png

• 配置免密登陸，生成access token并配置成環(huán)境變量進行免密登陸

image.png

• 進入混合工程自動化目錄，把flutter_module與NativeDemo工程整個作為倉庫

終端執(zhí)行該命令創(chuàng)建倉庫

創(chuàng)建倉庫

• 把flutter_module與NativeDemo工程提交到服務器

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

提交成功

• 把module打包成framework并放入倉庫目錄，也就是把打包過程交給倉庫來做

Github中點擊Actions配置CI

<!-- CI腳本內容，每次提交代碼就會重新打包framework -->
name: FlutterCI #CI名稱
on: [push] #觸發(fā)條件push操作！

jobs:
  check:
    name: Test on ${{ matrix.os }}
    #運行在哪個平臺這里是MacOS平臺
    runs-on: macos-latest
    
    steps:
      - uses: actions/checkout@v1
      #三方flutter的Action，它可以在服務器配置一個Flutter環(huán)境
      - 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 }}

配置腳本

• 執(zhí)行腳本文件，Flutter目錄下成功打包framework文件

image.png

• 拉取代碼

$ git pull

成功拉取framework庫

• 配置Podfile文件，并執(zhí)行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過程）