Ionic 框架介紹
Ionic是一個基於Angularjs、能夠使用HTML5構建混合移動應用的用戶界面框架,它自稱爲是「本地與HTML5的結合」。該框架提供了不少基本的移動用戶界面範例,例如像列表(lists)、標籤頁欄(tab bars)和觸發開關(toggle switches)這樣的簡單條目。它還提供了更加複雜的可視化佈局示例,例如在下面顯示內容的滑出式菜單。
Ionic 自動升級APP
1、準備工做
1.Cordova插件:
cordova plugin add https://github.com/whiteoctober/cordova-plugin-app-version.git // 獲取APP版本
cordova plugin add org.apache.cordova.file // 文件系統
cordova plugin add org.apache.cordova.file-transfer //文件傳輸系統
cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2 //文件打開系統
2.AngularJS Cordova插件
ngCordova
2、相關代碼,app.js
複製代碼
.run(['$ionicPlatform', '$rootScope','$ionicActionSheet', '$timeout','$cordovaAppVersion', '$ionicPopup', '$ionicLoading','$cordovaFileTransfer', '$cordovaFile', '$cordovaFileOpener2', function ($ionicPlatform, $rootScope,$ionicActionSheet, $timeout, $cordovaAppVersion, $ionicPopup, $ionicLoading, $cordovaFileTransfer, $cordovaFile, $cordovaFileOpener2) {
$ionicPlatform.ready(function ($rootScope) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
//檢測更新
checkUpdate();
document.addEventListener("menubutton", onHardwareMenuKeyDown, false);
});
// 菜單鍵
function onHardwareMenuKeyDown() {
$ionicActionSheet.show({
titleText: '檢查更新',
buttons: [
{ text: '關於' }
],
destructiveText: '檢查更新',
cancelText: '取消',
cancel: function () {
// add cancel code..
},
destructiveButtonClicked: function () {
//檢查更新
checkUpdate();
},
buttonClicked: function (index) {
}
});
$timeout(function () {
hideSheet();
}, 2000);
};
// 檢查更新
function checkUpdate() {
var serverAppVersion = "1.0.0"; //從服務端獲取最新版本
//獲取版本
$cordovaAppVersion.getAppVersion().then(function (version) {
//若是本地與服務端的APP版本不符合
if (version != serverAppVersion) {
showUpdateConfirm();
}
});
}
// 顯示是否更新對話框
function showUpdateConfirm() {
var confirmPopup = $ionicPopup.confirm({
title: '版本升級',
template: '1.xxxx;</br>2.xxxxxx;</br>3.xxxxxx;</br>4.xxxxxx', //從服務端獲取更新的內容
cancelText: '取消',
okText: '升級'
});
confirmPopup.then(function (res) {
if (res) {
$ionicLoading.show({
template: "已經下載:0%"
});
var url = "http://192.168.1.50/1.apk"; //能夠從服務端獲取更新APP的路徑
var targetPath = "file:///storage/sdcard0/Download/1.apk"; //APP下載存放的路徑,能夠使用cordova file插件進行相關配置
var trustHosts = true
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts).then(function (result) {
// 打開下載下來的APP
$cordovaFileOpener2.open(targetPath, 'application/vnd.android.package-archive'
).then(function () {
// 成功
}, function (err) {
// 錯誤
});
$ionicLoading.hide();
}, function (err) {
alert('下載失敗');
}, function (progress) {
//進度,這裏使用文字顯示下載百分比
$timeout(function () {
var downloadProgress = (progress.loaded / progress.total) * 100;
$ionicLoading.show({
template: "已經下載:" + Math.floor(downloadProgress) + "%"
});
if (downloadProgress > 99) {
$ionicLoading.hide();
}
})
});
} else {
// 取消更新
}
});
}
}])html
上面是一個簡單實現方式,一些數據都在這裏寫死了,你能夠將一些數據從服務端獲取,好比最新版本號,最新版的下載路徑,這裏提供一個思路。android
項目地址:https://github.com/zxj963577494/ionic-AutoUpdateAppgit
只需執行ionic build android便可github
來自:http://www.cnblogs.com/zxj159/p/4421578.htmlapache