強大的Flutter App升級功能


注意:無特殊說明,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),
    ...
)

通過titleStylecontentStyle設置其樣式,可以設置字體大小、顏色、粗體等。

設置“取消”和“升級按鈕”文本和樣式:

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:https://github.com/781238222/flutter-do/tree/master/flutter_app_upgrade

交流

如果你對Flutter還有疑問或者技術方面的疑惑,歡迎加入Flutter交流群(微信:laomengit)。

同時也歡迎關注我的Flutter公眾號【老孟程序員】,公眾號首發Flutter的相關內容。

Flutter地址:http://laomengit.com 里面包含160多個組件的詳細用法。


免責聲明!

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



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