Flutter多渠道多資源配置終極解決方案,看這篇就夠了

語言: CN / TW / HK

目前已經使用本方案成功上架了goole playapp store,流程較長,後面可以配合指令碼使用。指令碼的編寫不在本篇文章展開,以機械式實操為主。

1、Flutter內渠道配置

Flutter中的渠道配置一般用於埋點統計\ 使用--dart-define 進行渠道區分\ 打包時指令 flutter build apk --dart-define=CHANNEL=channelA\ 程式碼裡獲取渠道\ String _channelName = const String.fromEnvironment('CHANNEL', defaultValue: 'develop');

2、多資源配置

Android

在專案根目錄/android/app/build.gradle下進行渠道配置

... android{ ... // 配置渠道對應appid,還支援配置其他渠道引數 productFlavors { channelA{ applicationId "com.example.channelA" } channelB{ applicationId "com.example.channelB" } } ... //配置渠道對應的安卓資源目錄 sourceSets { channelA.res.srcDirs 'src/main/res-channelA' channelB.res.srcDirs 'src/main/res-channelB' } ... } ... productFlavors還有buildConfigField manifestPlaceholders signingConfig等等配置,主要用於區分第三方SDK,配置渠道配置引數,渠道包簽名等功能,這裡不展開~

在專案根目錄/android/app/main/目錄下配置啟動頁,圖片,App名稱等資源

配置App圖示

image.png

使用Android studio開啟android目錄,使用自帶的圖示生成工具生成,選中 res-channelA的資料夾右鍵 new -> Image Asset,選中對應渠道即可自動生成

image.png

配置啟動圖,如果遇到背景圖不顯示,刪除渠道下的mipmap-anydpi-v26即可

image.png

配置App名稱App圖示\ 每個渠道建立strings.xml檔案,輸入想要的App名稱

image.png

以上配置在ChnnelB渠道下也需要同樣配置,檔名需要一致,可以在channelA拷貝過去後進行修改

最後配置AndroidManifest.xml清單檔案即可。

image.png

此外還有依賴庫分渠道依賴,主要用來區分第三方依賴庫。比如海外不需要推送sdk等需求\ 使用channelAImplementation到指定某依賴庫只在某渠道下匯入。Implementation前是渠道名。

image.png

至此Android多渠道多資源配置已經完成。

接下來需要進行debug執行配置

image.png image.png channelB同理。配置完成後選擇對應的channelA 點選執行即可。

打包指令 ``` apk flutter build apk --flavor channelA --dart-define=CHANNEL=channelA

flutter build apk --flavor channelB --dart-define=CHANNEL=channelB

aab flutter build appbundle --flavor channelA --dart-define=CHANNEL=channelA

flutter build appbundle --flavor channelB --dart-define=CHANNEL=channelB ```

IOS

由於Flutter build指令與ios target的衝突,每次執行Flutter build ios 都會使得ios專案target資源被清除。因此配置過程比較艱辛。但實測按照以下步驟應該是沒有問題的。

安裝XCode環境,懂得都懂~

使用XCode開啟ios專案,確保專案能夠正常執行。

分發target,選中Runner,在右側的TARGETS右鍵選中Duplicate

image.png

此時會生成Runner copy-Info.plist檔案,為方便管理,建議重新命名\ 修改target的plist檔案 image.png

配置圖示,啟動圖,啟動頁面等資源,為了方便管理,十分建議按這種方式去存放資原始檔\ 新建資料夾channelA

image.png

image.png

在建立的Assets-ChannelALaunch Screen-ChannelA 檔案中自定義該渠道的App圖示和啟動頁

image.png

image.png

Target與所建立的資源關聯。\ 點選General,填寫該Target的相關資訊,點選Build Phases 選擇對應資原始檔

image.png

image.png

image.png

channelB同理

新增scheme,為了我們能直接執行對應的Target

image.png

image.png

新增build scheme 選擇Runner info 依次為渠道分發三個環境

image.png

image.png

至此,ios多渠道多資源配置完畢。 選擇對應的channel執行試一下

image.png

ios打包\ flutter build ios --release切換至release環境。避免上傳TestFlight失敗\ flutter build ipa --flavor channelA 即可.\ 等等,打包出來的ios包執行閃退? 無法執行?

你以為這就結束了嗎? 不,感受flutter的多渠道的缺陷吧

當我們專案裡使用到一些ios的第三方庫時,我們能在Build phases 裡看到應用的依賴庫

image.png 當我們配置channel時直接從Runner分發一個target出來。此時該targetBuild Phases下的依賴庫和資源是與主專案一樣的。因此我們可以直接通過XCode執行,只需要修改Copy Bundle Resources下引用的App圖示和啟動圖。\ 但當我們使用flutter build ios --release時 該指令會將我們target 下所有依賴庫全部清空。此時是無法直接執行的,這也是為什麼flutter 打包出來的ios包執行會閃退的原因。看圖 flutter build iosflutter build ipa都會使target的依賴庫丟失。

image.png

image.png

缺乏依賴庫,執行報錯。

image.png

解決方案

1、根據上面步驟配置好ios渠道與資源, 需檢查Build Phases與主專案裡的依賴庫一致。 先別flutter build ios --release,拷貝一份配置檔案路徑:專案根目錄/ios/Runner.xcodeproj在其他目錄下。

2、執行flutter build ios --release,成功切換release環境後把上面準備好的配置檔案重新覆蓋回來。即可執行

image.png

image.png

3、關於打包,flutter層面的統計渠道引數,只能先在程式碼寫死。(方法很蠢 - -,但是實用,後面可以用指令碼來處理)。通過XCode來打包

image.png

image.png

image.png

image.png

image.png

目前為止,已經成功上架過幾個專案到google playapp store

後期擴充套件,使用shell指令碼+Jenkins打包。下次再說吧