Ionic 框架介紹

　　Ionic是一個基于Angularjs、可以使用HTML5構建混合移動應用的用戶界面框架，它自稱為是“本地與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

?

轉載于:https://www.cnblogs.com/zhoupengyi/p/6200892.html

總結

以上是生活随笔為你收集整理的Ionic实战 自动升级APP(Android版)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。