Ionic实战 自动升级APP(Android版)

Posted 2020-09-26 yuan纷飞

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

<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版本软件的时候，就会提示更新内容，下载更新即可~