Flutter 中如何優雅的實現多渠道打包(埋點統計系列)


在這里插入圖片描述

我是 Zero,腦圖先奉上

  • 先贊后看,更新永不斷👏
    在這里插入圖片描述

只要你關注 Flutter,這篇文章你絕對用得着,==> 強烈建議➕收藏

多渠道打包介紹

多渠道打包的主要作用是滿足產品的運營需求,統計渠道和活動效果。
在之前原生(Android、iOS)開發 App 有各種工具來輔助我們完成多渠道打包。
在我們開發過程中也需要為渠道功能負責,原生的開發工具就基本滿足我們調試渠道包內容,但是在 Flutter 上需要更多的配置才可以完成,下文將一一介紹從配置=>調試=>打包的全部流程和細節。

多渠道配置

Flutter v1.17 開始,Flutter 命令工具增加了自定義參數的功能 --dart-define,我們可以用這個命令參數在打包或運行 App 時設置參數即可。

首先確定 Flutter 版本,我的版本是 v1.22.6

flutter run --dart-define=APP_CHANNEL=ZeroFlutter

當然你可以傳遞多組參數

flutter run --dart-define=APP_CHANNEL=ZeroFlutter --dart-define=OTHER_VAR=Dart

在 Dart 代碼中你需要這樣寫,一定是和命令參數是對應的

// main.dart
class EnvironmentConfig {
  static const APP_CHANNEL = String.fromEnvironment('APP_CHANNEL');
  static const OTHER_VAR = String.fromEnvironment('OTHER_VAR');
}

運行查看結果

  • 先修改 Flutter 項目對應的代碼
// my_home_page.dart
Text(
  'App 渠道:${EnvironmentConfig.APP_CHANNEL}',
  style: Theme.of(context).textTheme.bodyText1,
),
Text(
  '其他參數:${EnvironmentConfig.OTHER_VAR}',
  style: Theme.of(context).textTheme.bodyText1,
),
  • 然后運行項目
flutter run --dart-define=APP_CHANNEL=ZeroFlutter --dart-define=OTHER_VAR=Dart
  • 查看結果

image.png
這里可以看到已經把對應的參數內容顯示出來了,接下來就是具體業務層怎么來使用的問題了,下面內容也會介紹使用場景,繼續往下看👇

多渠道調試

我們已經初步看到效果了,但是在開發過程中我們不可能一直在命令行運行看效果,如果可以配合 IDE 進行多渠道調試開發那就很棒了,下面分別介紹一下 VS CodeAndroid Studio 的配置方法。

VS Code 配置

  • 先創建一個 launch.json 啟動文件

Kapture 2021-04-08 at 21.51.39.gif

  • 然后配置啟動參數項目
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter",
            "request": "launch",
            "type": "dart",
	          // 這里是新加的命令參數
            "args": [
                "--dart-define",
                "APP_CHANNEL=Flutter",
                "--dart-define",
                "OTHER_VAR=Dart"
            ]
        },
	      // 這里是配置多個渠道
        {
            "name": "Mi",
            "request": "launch",
            "type": "dart",
            "args": [
                "--dart-define",
                "APP_CHANNEL=Mi",
                "--dart-define",
                "OTHER_VAR=安卓之光"
            ]
        }
    ]
}

然后這里就出現了配置的渠道信息,我們分別切換 FlutterMi 運行看看效果

image.png
image.pngimage.png

Android Studio 配置

  • 先配置上命令參數

img_06.gif

  • 添加 Mi 渠道配置參數

先復制一下 Flutter 配置,然后修改名字為 Mi,同時修改命令參數配置為 Mi安卓之光
image.png
到這里 Android Studio 的配置就基本完畢了,我們切換運行看看效果
img_08.png
img_04.pngimg_05.png
到這里已經完成了 IDE 的配置,【詳細的配置文件可以訪問 GitHub 在項目內獲取】,講了這么多怎么還不說打包📦的事情,別着急我需要給你配置一個精良的裝備,后面我們的打包就是一個命令的事情。

配置原生打包腳本

Android

  • 更改 Gradle 配置

通常 Android 的多渠道是給 AndroidManifest.xml 寫一個 <meta-data/> ,如果要保持原來原生的統計方式不變,那么首先我們需要獲渠道 命令參數(--dart-define=APP_CHANNEL=ZeroFlutter --dart-define=OTHER_VAR=Dart)的內容,則需要更改 Gradle 配置

// android/app/build.gradle
/// 獲取渠道參數使用,這里設置一下默認值
def dartEnvironmentVariables = [
    APP_CHANNEL: 'main',
    OTHER_VAR: 'other',
]

if (project.hasProperty('dart-defines')) {
    dartEnvironmentVariables = dartEnvironmentVariables + project.property('dart-defines')
        .split(',')
        .collectEntries { entry ->
            def pair = URLDecoder.decode(entry).split('=')
            [(pair.first()): pair.last()]
        }
}
  • 如何使用(重命名 apk)
// android/app/build.gradle
android{
    // 重命名 apk
    applicationVariants.all { variant ->
        variant.outputs.all { output ->
            if(variant.buildType.name == "release"){
                // 獲取版本
                def versionName = variant.versionName
                def versionCode = variant.versionName
             	// 設置新名稱
                def newApkName ="app_v${defaultConfig.versionName}_${defaultConfig.versionCode}_channel_${dartEnvironmentVariables.APP_CHANNEL}.apk"
                outputFileName = new File(newApkName)
            }
        }
    }
}
  • 執行打包
flutter build apk --dart-define=APP_CHANNEL=ZeroFlutter --dart-define=OTHER_VAR=Dart
// 打包后 apk 的輸出路徑
✓ Built build/app/outputs/flutter-apk/app-release.apk (15.4MB).
// 打開打包后的 apk
open build/app/outputs/apk/release/

img_09.png
這里看到已經將打包后的 APK 重命名為 app_v1.0.0_1_channel_ZeroFlutter.apk,方便我們區分發布到不同的應用商店。

iOS

這里 iOS 打包需要先執行 build 命令,然后再去 Xcode 上進行打包上傳

flutter build ios --dart-define=APP_CHANNEL=ZeroFlutter --dart-define=OTHER_VAR=Dart

打包腳本優化

此時如果我們再執行Mi 渠道打包命令,則會發現之前打包好的 app_v1.0.0_1_channel_ZeroFlutter.apk 不見了,因為被清理了,所以我們每打包好一個后將 apk 移動到一個渠道包文件夾中,然后繼續執行下一個渠道的打包。

flutter build apk --dart-define=APP_CHANNEL=Mi --dart-define=OTHER_VAR=安卓之光

優化后的腳本如果下:

  • 渠道打包腳本
# fapk_channel.sh
flutter build apk --dart-define=APP_CHANNEL=$1 --dart-define=OTHER_VAR=$2
cd build/app/outputs/apk/release/
cp -R *.apk /Users/zero/apk/$1/
cd /Users/zero/apk/$1/
open .
  • 批量打包
fapk_channel.sh ZeroFlutter Dart
fapk_channel.sh Mi 安卓之光

img_10.gif
這樣打包就可以全自動完成啦,啟動腳本后,就可以去喝杯咖啡啦,喝完咖啡也打包好了。
打包完畢后我們就可以分別對渠道包測試完畢后就上傳到對應的應用商店啦

使用場景

數據統計

在運營側,需要統計出每個應用商店(渠道)的下載、安裝、使用、日活、周活、月活、活動效果等情況,所以按照渠道區分是非常有必要的,如下圖就是我們 App 日活渠道分布的情況。
img_11.png
在開發側,我們需要區分每個渠道的異常情況,打包時對應的符號文件也是不同的,比如 Bugly 可以這樣配置就完成不同渠道符號文件的配置。

// android/app/build.gradle
bugly {
    appId = 'ZeroFlutter'
    appKey = 'GitHub:https://github.com/yy1300326388'
    // 這里配置渠道參數即可
    appChannel = "${dartEnvironmentVariables.APP_CHANNEL}"
}

img_12.png再比如我們需要設置友盟渠道信息,可以直接通過 Dart 代碼調用 Api 設置即可。

/// 初始化友盟,直接將 EnvironmentConfig.APP_CHANNEL 傳入渠道參數
UmengSdk.initCommon(kUmengAndroidAppkey, kUmengIosAppkey, EnvironmentConfig.APP_CHANNEL);

然后在后台就可以看到統計數據了,方便我們進一步運營和開發
img_13.png

渠道分發

每個應用商店的要求各不相同,有的卡文案配置,有的卡版權信息,有的卡權限使用,針對不同的渠道可能要做不同的處理,我們可以增加一個判斷來處理不同的邏輯,或者是用 mixin

EnvironmentConfig.APP_CHANNEL == 'Mi'
? Text(
  "小米渠道顯示",
  style: Theme.of(context).textTheme.bodyText1,
)
: SizedBox()

這里我們分別運行 ZeroFlutterMi 渠道看看效果
image.pngimg_01.png

總結

到這里本文就完畢了,我們主要聊了命令參數的使用配置,以及在開發過程當中渠道包的 IDE 配置和調試技巧,最后聊了一下渠道包的使用場景。
本文是 《Flutter 中的埋點統計-數據思維定勝負》專欄的第一篇,之后將持續分享以下 Flutter 的內容,可以持續✅關注我,內容更新后會第一時間收到通知。

Flutter 中的埋點統計文章規划目錄

  • Flutter 多渠道打包詳解
  • Flutter 全局路由監控
  • Flutter 全局異常捕獲
  • Flutter 最新的全局無痕埋點(進階高級 Flutter 必學內容)

源碼倉庫

用到的腳本示例代碼均在 GitHub 上了

🔗 參考鏈接

關於我

  • 15 年~18 年,使用 Android 原生做智能硬件相關的 App 研發
  • 18 年 5 月,一次偶然的機會接觸到了 Flutter ,然后開始自學,可以看 weather_flutter 是我練習 Flutter 的入門實戰項目(我現在依然覺得他非常適合 Flutter 入門練習使用)
  • 18 年 8 月,頂着巨大的壓力(Flutter 當時還沒有 Release 1.0)開始使用 Flutter 開發企業級項目,並且開發維護了十幾個 Flutter 插件包(因為當時插件資源非常的匱乏)
  • 截止目前主導並參與上線了 4 款企業級Flutter App,當前正在負責的一款 App 累計用戶 120W+,使用 Flutter 得到了極佳的體驗

👏 歡迎點贊➕關注➕轉發,有任何問題隨時在下面👇評論,我會第一時間回復哦


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM