強大的Flutter App升級功能

老孟程式設計師發表於2020-03-18
FlutterAPP

注意：無特殊說明，Flutter版本及Dart版本如下：

  • Flutter版本： 1.12.13+hotfix.5
  • Dart版本： 2.7.0

應用程式升級功能是App的基礎功能之一，如果沒有此功能會造成使用者無法升級，應用程式的bug或者新功能老使用者無法觸達，甚至損失這部分使用者。

對於應用程式升級功能的重要性就無需贅言了，下面介紹下應用程式升級功能的幾種方式，從平臺方面來說：

  • IOS平臺，應用程式升級功能只能通過跳轉到app store進行升級。
  • Android平臺，既可以通過跳轉到應用市場進行升級，也可以下載apk包升級。

從強制性來說可以分別強制升級和非強制升級：

  • 強制升級：就是使用者必須升級才能繼續使用App，如果不是非常必要不建議使用如此強硬的方式，會造成使用者的反感。
  • 非強制升級就是允許使用者點選“取消”，繼續使用App。

下面分別介紹IOS和Android升級流程。

IOS升級流程

IOS升級流程如下：

流程說明：

  1. 通常我們會訪問後臺介面獲取是否有新的版本，如果有新的版本則彈出提示框，判斷當前版本是否為“強制升級”，如果是則只提供使用者一個“升級”的按鈕，否則提供使用者“升級”和“取消”按鈕。
  2. 彈出提示框後使用者選擇是否升級，如果選擇“取消”，提示框消失，如果選擇“升級”，跳轉到app store進行升級。

Android 升級流程

相比ios的升級過程，Android就稍顯複雜了，流程圖如下：

流程說明：

  1. 訪問後臺介面獲取是否有新的版本，這裡和IOS是一樣的，有則彈出升級提示框，判斷當前版本是否為“強制升級”，如果是則只提供使用者一個“升級”的按鈕，否則提供使用者“升級”和“取消”按鈕。
  2. 彈出提示框後有使用者選擇是否升級，如果選擇“取消”，提示框消失，如果選擇“升級”，判斷是跳轉到應用市場進行升級還是通過下載apk升級。
  3. 如果下載apk升級，則開始下載apk，下載完成後跳轉到apk安裝引導介面。
  4. 如果跳轉到應用市場升級，判斷是否指定了應用市場，比如只在華為應用市場上架了，那麼此時需要指定跳轉到華為應用市場，即使你在很多應用市場都上架了，也應該根據使用者手機安裝的應用市場指定一個應用市場，讓使用者選擇應用市場不是一個好的體驗，而且使用者也不知道應該去哪個市場更新，如果使用者選擇了一個你沒有上架的應用市場，那就更尷尬了。
  5. 指定應用市場後直接跳轉到指定的應用市場的更新介面。

介紹完了升級流程，主角終於出場了。

App升級功能使用介紹

只需在主頁的initState方法中呼叫升級檢測方法：

@override
  void initState() {
    AppUpgrade.appUpgrade(
      context,
      _checkAppInfo(),
      iosAppId: 'id88888888',
    );
    super.initState();
  }複製程式碼

_checkAppInfo方法訪問後臺介面獲取是否有新的版本的資訊，返回Future<AppUpgradeInfo> 型別，AppUpgradeInfo包含title、升級內容、apk下載url、是否強制升級等版本資訊。

iosAppId引數用於跳轉到app store。

_checkAppInfo()方法通常是訪問後臺介面，這裡直接返回新版本資訊，程式碼如下：

Future<AppUpgradeInfo> _checkAppInfo() {
  return Future.value(AppUpgradeInfo(
    title: '新版本V1.1.1',
    contents: [
      '1、支援立體聲藍芽耳機，同時改善配對效能',
      '2、提供螢幕虛擬鍵盤',
      '3、更簡潔更流暢，使用起來更快',
      '4、修復一些軟體在使用時自動退出bug',
      '5、新增加了分類檢視功能'
    ],
    apkDownloadUrl: '',
    force: false,
  ));複製程式碼

好了，基本的升級功能就完成了，彈出提示框的效果如下：

點選“以後再說”，提示框消失，點選“立即體驗”，自動區分不同平臺。

訪問後臺介面獲取新版本的資訊一般需要當前App的包名和版本，查詢方法如下：

await FlutterUpgrade.appInfo複製程式碼

返回的型別是AppInfo：

  • versionName：版本號，比如1.0.0。
  • versionCode：Android獨有版本號，對應Android build.gradle中的versionCode，ios返回“0”。
  • packageName：包名，對應Android build.gradle中的applicationId，ios的BundleIdentifier。

iOS平臺升級

iOS平臺直接跳轉到app store相關頁面，iosAppId一定要設定對，否則app store會找不到應用程式。

Android平臺下載apk

Android平臺則會判斷是否設定了apk下載url，如果設定了則下載apk則直接下載，效果如下：

當下載完成時直接跳轉到apk安裝引導介面，效果如下：

使用者點選允許，出現如下介面：

點選繼續安裝即可，上面的安裝引導介面是系統介面，不同的手機或者不同的Android版本會略有不同。

Android平臺跳轉應用市場

如果不提供apk下載地址，點選“立即體驗”，則會跳轉到應用市場，不指定應用市場則會彈出提示框，讓使用者選擇應用市場，效果如下：

提示框內將會包含手機內安裝的所有的應用市場，使用者選擇一個然後跳轉到對應應用市場的詳情介面，如果當前應用未在此市場上架則會出現“找不到的介面”。

通常情況下會指定應用市場，這就需要知道使用者手機內安裝的應用市場，查詢方法如下：

_getInstallMarket() async {
  List<String> marketList = await FlutterUpgrade.getInstallMarket();
}複製程式碼

外掛內建了國內常用的應用市場，包括小米、魅族、vivo、oppo、華為、zte、360助手、應用寶、pp助手、豌豆莢，如果你需要檢測其他的應用市場，比如google play，只需新增googl play的包名即可：

_getInstallMarket() async {
  List<String> marketList = await FlutterUpgrade.getInstallMarket(marketPackageNames: ['google play 包名']);
}複製程式碼

方法返回手機安裝的應用市場，根據安裝的應用市場指定跳轉應用市場，如果你要指定內建的應用市場，可以根據包名獲取內建的應用市場的相關資訊：

AppMarketInfo _marketInfo = AppMarket.getBuildInMarket(packageName);複製程式碼

指定華為應用市場：

AppUpgrade.appUpgrade(
  context,
  _checkAppInfo(),
  iosAppId: 'id88888888',
  appMarketInfo: AppMarket.huaWei
);複製程式碼

指定沒有內建的應用市場方法如下：

AppUpgrade.appUpgrade(
  context,
  _checkAppInfo(),
  iosAppId: 'id88888888',
  appMarketInfo: AppMarketInfo(
    '應用市場名稱（選填）','應用市場包名','應用市場類名'
  ),
);複製程式碼

提示框樣式定製

如果預設的升級提示框不滿足你的需求，那麼你可以定製你的升級提示框。

title及升級內容文字樣式設定：

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    titleStyle: TextStyle(fontSize: 30),
    contentStyle: TextStyle(fontSize: 18),
    ...
)複製程式碼

通過titleStyle和contentStyle設定其樣式，可以設定字型大小、顏色、粗體等。

設定“取消”和“升級按鈕”文字和樣式：

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    cancelText: '以後再說',
    cancelTextStyle: TextStyle(color: Colors.grey),
    okText: '馬上升級',
    okTextStyle: TextStyle(color: Colors.red),
    ...
)複製程式碼

預設“取消”按鈕文字是"以後再說"，預設“升級”按鈕的文字是“立即體驗”。

設定“升級”按鈕的背景顏色，需要2種顏色，2種顏色左到右線性漸變，如果想設定純色，只需將2種顏色設定為同一個顏色即可，預設顏色是系統的primaryColor:

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    okBackgroundColors: [Colors.blue, Colors.lightBlue],
    ...
)複製程式碼

設定進度條的顏色：

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    progressBarColor: Colors.lightBlue.withOpacity(.4),
    ...
)複製程式碼

設定升級提示框的圓角半徑，預設是20：

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    borderRadius: 15,
    ...
)複製程式碼

由於環境的原因，目前原始碼還無法釋出到github及pub上，後續會開源，當然也可以關注我的公眾號，回覆“flutter 升級”即可獲得原始碼。

歡迎加入Flutter的微信交流群(微信：laomengit)，一起學習，一起進步，生活不止眼前的苟且，還有詩和《遠方》。

非常希望您關注我個人的公眾號，裡面有各種福利等著大家哦。

相關文章