Ionic實戰 自動升級APP(Android版)

標籤：sso   構建   cordova   listener   外掛程式   require   download   log   html5   

 

 

Ionic 架構介紹
　　Ionic是一個基於Angularjs、可以使用HTML5構建混合行動裝置 App的使用者介面架構，它自稱為是“本地與HTML5的結合”。該架構提供了很多基本的移動使用者介面範例，例如像列表（lists）、標籤頁欄（tab bars）和觸發開關（toggle switches）這樣的簡單條目。它還提供了更加複雜的可視化布局樣本，例如在下面顯示內容的滑出式菜單。 Ionic 自動升級APP
一、準備工作
　　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
二、相關代碼，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 {                     // 取消更新                 }             });         }     }])

　　上面是一個簡單實現方式，一些資料都在這裡寫死了，你可以將一些資料從服務端擷取，比如最新版本號碼，最新版的下載路徑，這裡提供一個思路。

 　　項目地址：https://github.com/zxj963577494/ionic-AutoUpdateApp

　　 只需執行ionic build android即可

來自：http://www.cnblogs.com/zxj159/p/4421578.html

Ionic實戰 自動升級APP(Android版)