注意:無特殊說明,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升級流程如下:
流程說明:
- 通常我們會訪問后台接口獲取是否有新的版本,如果有新的版本則彈出提示框,判斷當前版本是否為“強制升級”,如果是則只提供用戶一個“升級”的按鈕,否則提供用戶“升級”和“取消”按鈕。
- 彈出提示框后用戶選擇是否升級,如果選擇“取消”,提示框消失,如果選擇“升級”,跳轉到app store進行升級。
Android 升級流程
相比ios的升級過程,Android就稍顯復雜了,流程圖如下:
流程說明:
- 訪問后台接口獲取是否有新的版本,這里和IOS是一樣的,有則彈出升級提示框,判斷當前版本是否為“強制升級”,如果是則只提供用戶一個“升級”的按鈕,否則提供用戶“升級”和“取消”按鈕。
- 彈出提示框后有用戶選擇是否升級,如果選擇“取消”,提示框消失,如果選擇“升級”,判斷是跳轉到應用市場進行升級還是通過下載apk升級。
- 如果下載apk升級,則開始下載apk,下載完成后跳轉到apk安裝引導界面。
- 如果跳轉到應用市場升級,判斷是否指定了應用市場,比如只在華為應用市場上架了,那么此時需要指定跳轉到華為應用市場,即使你在很多應用市場都上架了,也應該根據用戶手機安裝的應用市場指定一個應用市場,讓用戶選擇應用市場不是一個好的體驗,而且用戶也不知道應該去哪個市場更新,如果用戶選擇了一個你沒有上架的應用市場,那就更尷尬了。
- 指定應用市場后直接跳轉到指定的應用市場的更新界面。
介紹完了升級流程,主角終於出場了。
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:https://github.com/781238222/flutter-do/tree/master/flutter_app_upgrade
交流
如果你對Flutter還有疑問或者技術方面的疑惑,歡迎加入Flutter交流群(微信:laomengit)。
同時也歡迎關注我的Flutter公眾號【老孟程序員】,公眾號首發Flutter的相關內容。
Flutter地址:http://laomengit.com 里面包含160多個組件的詳細用法。