效果演示
插件准备
1.File
2.Transfer
3.File Opener
4.App Version
5.In App Browser
上代码
-
app.component.ts调用检查是否升级方法
-
NativeService.ts下载安装app方法
/**
* Created by yanxiaojun617@163.com on 12-27.
*/
import {Injectable} from '@angular/core';
import {Platform, AlertController} from 'ionic-angular';
import {AppVersion} from '@ionic-native/app-version';
import {File} from '@ionic-native/file';
import {Transfer, TransferObject} from '@ionic-native/transfer';
import {FileOpener} from '@ionic-native/file-opener';
import {InAppBrowser} from '@ionic-native/in-app-browser';
import {APP_DOWNLOAD, APK_DOWNLOAD} from "./Constants";
@Injectable()
export class NativeService {
constructor(private platform: Platform,
private alertCtrl: AlertController,
private transfer: Transfer,
private appVersion: AppVersion,
private file: File,
private fileOpener: FileOpener,
private inAppBrowser: InAppBrowser) {
}
/**
* 检查app是否需要升级
*/
detectionUpgrade() {
//这里连接后台获取app最新版本号,然后与当前app版本号(this.getVersionNumber())对比
//版本号不一样就需要申请,不需要升级就return
this.alertCtrl.create({
title: '升级',
subTitle: '发现新版本,是否立即升级？',
buttons: [{text: '取消'},
{
text: '确定',
handler: () => {
this.downloadApp();
}
}
]
}).present();
}
/**
* 下载安装app
*/
downloadApp() {
if (this.isAndroid()) {
let alert = this.alertCtrl.create({
title: '下载进度：0%',
enableBackdropDismiss: false,
buttons: ['后台下载']
});
alert.present();
const fileTransfer: TransferObject = this.transfer.create();
const apk = this.file.externalRootDirectory + 'android.apk'; //apk保存的目录
fileTransfer.download(APK_DOWNLOAD, apk).then(() => {
this.fileOpener.open(apk,'application/vnd.android.package-archive');
});
fileTransfer.onProgress((event: ProgressEvent) => {
let num = Math.floor(event.loaded / event.total * 100);
if (num === 100) {
alert.dismiss();
} else {
let title = document.getElementsByClassName('alert-title')[0];
title && (title.innerHTML = '下载进度：' + num + '%');
}
});
}
if (this.isIos()) {
this.openUrlByBrowser(APP_DOWNLOAD);
}
}
/**
* 通过浏览器打开url
*/
openUrlByBrowser(url:string):void {
this.inAppBrowser.create(url, '_system');
}
/**
* 是否真机环境
* @return {boolean}
*/
isMobile(): boolean {
return this.platform.is('mobile') && !this.platform.is('mobileweb');
}
/**
* 是否android真机环境
* @return {boolean}
*/
isAndroid(): boolean {
return this.isMobile() && this.platform.is('android');
}
/**
* 是否ios真机环境
* @return {boolean}
*/
isIos(): boolean {
return this.isMobile() && (this.platform.is('ios') || this.platform.is('ipad') || this.platform.is('iphone'));
}
/**
* 获得app版本号,如0.01
* @description 对应/config.xml中version的值
* @returns {Promise<string>}
*/
getVersionNumber(): Promise<string> {
return new Promise((resolve) => {
this.appVersion.getVersionNumber().then((value: string) => {
resolve(value);
}).catch(err => {
console.log('getVersionNumber:' + err);
});
});
}
}
- Constants.ts你可以先访问这两个url看是什么鬼
export const APP_DOWNLOAD = 'http://omzo595hi.bkt.clouddn.com/download.html';//app下载地址
export const APK_DOWNLOAD = 'http://omzo595hi.bkt.clouddn.com/ionic2_tabs.apk';//apk下载完整地址
最后
后来把app升级逻辑放到单独的service中了.源码VersionService.ts
ios下载.ipa文件是不能直接打开安装的,一般的ios app升级都是跳到App Store中
我们的企业用app,一般不上应用商店,所以要制作单独的下载页面,像这个页面,app需要升级的时候跳到这个下载页面,用户手动下载安装
下载页面制作教程看这里
app下载完成不能安装?检查手机是否安装了同id的app,卸载即可
app升级版本号只能升不能降
release版本和debug版本不能同时安装,如果已经安装了release版本,再安装debug版会安装失败
