效果演示
插件准备
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版会安装失败
网友评论
platform.ready().then(() => {
if(platform.is('cordova')){
storageService.write('platform', device.platform);
//获取版本号和设备
appVersion.getVersionNumber().then(res=>{
storageService.write('versionNumber', res);
alert(res);
},error=>{
alert(error)
});
}
});
> release版本和debug版本不能同时安装,如果已经安装了release版本,再安装debug版会安装失败
这个请求权限的方法会报错.
所以我换了一种方式
import { AndroidPermissions } from '@ionic-native/android-permissions';
constructor(
private androidPermissions: AndroidPermissions)
platform.ready().then(() => {
androidPermissions.requestPermissions(
[
androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE,
androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE
]
);
})
}
判断权限
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE).then();
https://github.com/yanxiaojun617/ionic2_tabs/blob/master/plugins/com.synconset.imagepicker/src/android/androidtarget.gradle
https://github.com/yanxiaojun617/ionic2_tabs/blob/master/plugins/com.synconset.imagepicker/src/android/ignorelinterrors.gradle
import { FileOpener } from '@ionic-native/file-opener';
const fileTransfer: TransferObject = this.transfer.create();
const apk = this.file.externalRootDirectory + 'android.apk';
// alert(apk);
fileTransfer.download('...', apk).then(() => {
// window['install'].install(apk.replace('file://', ''));
this.fileOpener.open(apk,'application/vnd.android.package-archive').then...
});
// 检查APP版本
this.appVersion.getVersionNumber().then( function(version){
window.localStorage.setItem('appVersion',version);
this.version = version ;
alert(version);
}).catch(err => {
this.toastCtrl.presentToast('请重新尝试开启APP1');
alert(JSON.stringify(err));
});
});
我这样写直接进alert(JSON.stringify(err));报错，在app.component.ts里面的constructor写的
if(title){
title.innerHTML = '下载进度：' + num + '%'
}
参考externalStoragePermissionsAuthorization方法申请权限
ionic3 自带更新插件了
apk.replace('file://', ''),
'application/vnd.android.package-archive'
);
getVersionNumber:cordova_not_available
请问 这是什么原因？？？
求大神帮忙！！
ionic cordova plugin add C:\Users\simo\Desktop\centOS/phonegap-plugin-install-master.zip
> cordova plugin add C:\Users\simo\Desktop\centOS/phonegap-plugin-install-master.zip --save
✖ Running command - failed!
[ERROR] Cordova encountered an error.
You may get more insight by running the Cordova command above directly.
[ERROR] An error occurred while running cordova plugin add
C:\Users\simo\Desktop\centOS/phonegap-plugin-install-master.z... (exit code 1):
Error: Invalid Plugin! C:\Users\simo\Desktop\centOS\phonegap-plugin-install-master.zip needs a valid
package.json
报错说需要有效package.json
Error: Failed to fetch plugin https://github.com/weelion/phonegap-plugin-install
.git via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Error: cmd: Command failed with exit code 4294963228 Error output:
npm ERR! addLocal Could not install C:\Users\ADMINI~1\AppData\Local\Temp\npm-684
8-ea133d5a\git-cache-f4911f53\9be022e7f19fcfadc787517823bb2b3e9ddba2dd
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "install" "https://github.com/weelion/phoneg
ap-plugin-install.git" "--save"
npm ERR! node v7.7.4
npm ERR! npm v4.1.2
npm ERR! code EISDIR
npm ERR! errno -4068
npm ERR! syscall read
npm ERR! eisdir EISDIR: illegal operation on a directory, read
npm ERR! eisdir This is most likely not a problem with npm itself
npm ERR! eisdir and is related to npm not being able to find a package.json in
npm ERR! eisdir a package you are trying to install.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Administrator\ruiche-app\node_modules\npm-debug.log，
是什么原因，其它插件是安装成功了，就上面的那个安装不上，谢谢
1.没有sdk会保存到根据根目录.我在小米4测试过.
2.没遇到过啊.你要调试看apk路径是否正确
1， const apk = this.file.externalRootDirectory + 'android.apk'; //apk保存的目录，这个目录对于没有SD卡的手机是不是不能用,因为我在一个没有SD卡的手机上测试报错，但一个有Sd卡的手机可以更新下载；
2，执行到 window['install'].install(apk.replace('file://', ''));这里时提示我解析包异常，可能的原因是什么 ?
再次感谢啊
});这里会有问题吗？ 运行时报Uncaught （in promise）：【object Onject】
cnpm i @ionic-native/file