最近項目收尾，提出了一些新的需求，希望每次更新都能如QQ，WeChat一樣，在有新版本的時候，自動對其進行下載更新，根據實際的應用環境，此功能確實應該實現，於是查閱了相關資料，實現了此功能~，現對此進行總結如下，若有錯誤見解請批評性指出~
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插件
直接引用即可：<script src="lib/ngCordova/dist/ng-cordova.js"></script>
二、相關代碼，app.js
1 angular.module('mpApp', ['ionic', 'mpControllers', 'mpServices','mpFilters']) 2 .run(function($ionicPlatform,$rootScope,$ionicActionSheet, $timeout,$cordovaAppVersion, $ionicPopup, $ionicLoading, $cordovaFileTransfer, $cordovaFile, $cordovaFileOpener2,$http) { 3 $ionicPlatform.ready(function() { 4 if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { 5 cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 6 cordova.plugins.Keyboard.disableScroll(true); 7 8 } 9 if (window.StatusBar) { 10 StatusBar.styleDefault(); 11 }; 12 if (window.cordova && window.cordova.InAppBrowser) { 13 window.open = window.cordova.InAppBrowser.open; 14 } 15 setTimeout(function () { 16 // navigator.splashscreen.hide(); 17 }, 100); 18 19 20 21 //啟用極光推送服務 22 try { 23 window.plugins.jPushPlugin.init(); 24 window.plugins.jPushPlugin.setDebugMode(true); 25 26 } catch (exception) { 27 console.log(exception); 28 } 29 30 /* 31 var onReceiveNotification = function (event) { 32 try { 33 console.log('接收新的推送通知'); 34 //var alert = event.aps.alert;//通知內容 35 window.plugins.jPushPlugin.setBadge(event.aps.badge); 36 console.log("JPushPlugin:onReceiveNotification key aps.alert:" + alert); 37 } 38 catch (exeption) { 39 console.log(exception) 40 } 41 42 var onTagsWithAlias =function(event){ 43 alert("onTagsWithAlias方法執行"); 44 window.plugins.jPushPlugin.getRegistrationID(function(id){ 45 //將獲取到的id存入服務端 46 alert(id);這里就可以獲取到注冊的ID了 47 }); 48 ) 49 //打開通知 50 var onOpenNotification = function (event) { 51 try { 52 console.log('打開通知消息'); 53 window.plugins.jPushPlugin.setBadge(0); 54 window.plugins.jPushPlugin.resetBadge(); 55 window.plugins.jPushPlugin.setApplicationIconBadgeNumber(0); 56 $state.go('app.bookshelf'); 57 } 58 catch (exeption) { 59 console.log(exception) 60 } 61 }; 62 63 document.addEventListener("jpush.receiveNotification", onReceiveNotification, false); 64 document.addEventListener("jpush.openNotification", onOpenNotification, false); 65 */ 66 //檢測更新 67 checkUpdate(); 68 document.addEventListener("menubutton", onHardwareMenuKeyDown, false); 69 70 71 }); 72 // 菜單鍵 73 function onHardwareMenuKeyDown() { 74 $ionicActionSheet.show({ 75 titleText: '檢查更新', 76 buttons: [ 77 { text: '關於' } 78 ], 79 destructiveText: '檢查更新', 80 cancelText: '取消', 81 cancel: function () { 82 // add cancel code.. 83 }, 84 destructiveButtonClicked: function () { 85 //檢查更新 86 checkUpdate(); 87 }, 88 buttonClicked: function (index) { 89 90 } 91 }); 92 $timeout(function () { 93 hideSheet(); 94 }, 2000); 95 }; 96 97 // 檢查更新 98 function checkUpdate() { 99 //從服務端獲取最新版本 100 var ApiUrl ="http://www.xxx.com/ver.json";//版本信息存放在服務器上的地址 101 var serverAppVersion = ""; //最新版本信息 102 $http.get(ApiUrl) 103 .success(function (data) { 104 //獲取版本 105 serverAppVersion = data.version[0].value; 106 serverAppContent = data.version[0].content; 107 cordova.getAppVersion.getVersionNumber().then(function (version) { 108 //如果本地與服務端的APP版本不符合 109 if (version != serverAppVersion) { 110 //兩種更新方式 111 showUpdateConfirm(serverAppVersion,serverAppContent); 112 } 113 }); 114 }) 115 .error(function (data, status, headers, config) { 116 $ionicLoading.show({template: '讀取版本信息失敗！', noBackdrop: true, duration: 2000}); 117 }); 118 119 } 120 121 // 顯示是否更新對話框 122 function showUpdateConfirm(version,content) { 123 var confirmPopup = $ionicPopup.confirm({ 124 title: '版本升級'+version, 125 template: content, //從服務端獲取更新的內容 126 cancelText: '取消', 127 okText: '升級' 128 }); 129 confirmPopup.then(function (res) { 130 if (res) { 131 $ionicLoading.show({ 132 template: "已經下載：0%" 133 }); 134 var url = "http://www.xxx.com/xxx.apk"; //可以從服務端獲取更新APP的路徑 135 var filename = url.split("/").pop(); 136 var targetPath = cordova.file.externalRootDirectory + filename;//APP下載存放的路徑，可以使用cordova file插件進行相關配置 137 //var targetPath = cordova.file.externalDataDirectory + filename; 138 var trustHosts = true 139 var options = {}; 140 $cordovaFileTransfer.download(url, targetPath, options, trustHosts).then(function (result) { 141 // 打開下載下來的APP 142 $cordovaFileOpener2.open(targetPath, 'application/vnd.android.package-archive' 143 ).then(function () { 144 // 成功 145 }, function (err) { 146 // 錯誤 147 }); 148 $ionicLoading.hide(); 149 }, function (err) { 150 alert('下載失敗'); 151 $ionicLoading.hide(); 152 }, function (progress) { 153 //進度，這里使用文字顯示下載百分比 154 $timeout(function () { 155 var downloadProgress = (progress.loaded / progress.total) * 100; 156 $ionicLoading.show({ 157 template: "已經下載：" + Math.floor(downloadProgress) + "%" 158 }); 159 if (downloadProgress > 99) { 160 $ionicLoading.hide(); 161 } 162 }) 163 }); 164 } else { 165 // 取消更新 166 } 167 }); 168 } 169 170 171 })
三、服務器存放版本文件內容，ver.json
1 { 2 "version":[{ 3 "value":"1.0.1", 4 "content":"1.增加自動升級功能;</br>2.優化圖片上傳;</br>3.優化暫停任務可從相冊選擇;</br>4.上傳圖片顯示進度條" 5 }] 6 }
四、每次打包，修改打包配置文件config.xml
1 <widget id="com.ionicframework.mjlms" version="1.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
五、總結
至此，整個的功能實現完畢，如果安卓手機端安裝的是1.0.1版本，當新功能添加完畢，需要重新打包，則修改config.xml文件的版本為1.0.2，同時更新服務器上的ver.json文件，然后將最新的apk放到對應地址~當再次在手機上打開1.0.1版本軟件的時候，就會提示更新內容，下載更新即可~