目录
2. 封装 app-update-main.ts（应用检查更新 - 入口）
3. 封装 app-update-auxiliary.ts（应用检查更新 - 辅助）
自动检测更新的场景：
接口返回服务器上存储的应用信息示例（此处用 Rap2 模拟接口）：
{
"data": {
// Android 最新应用下载地址
"androidUrl": "https://www.xxx.com.cn/Android/others/tongfu/tongfu-prod.apk",
// Android 包名
"apkName": "baoan.apk",
// ios 最新应用下载地址
"iosUrl": "itms-services://?action=download-manifest&url=https://www.xxx.com.cn/iOS/others/tongfu/tongfu-prod.plist",
// Android 最新应用版本号
"verAndroid": "1.0.6",
// ios 最新应用版本号
"verIos": "1.0.6"
}
}// @capacitor/app
npm install @capacitor/app
npx cap sync// @capacitor/device
npm install @capacitor/device
npx cap sync
// File
npm install cordova-plugin-file
npm install @ionic-native/file
ionic cap sync// File Transfer
npm install cordova-plugin-file-transfer
npm install @ionic-native/file-transfer
ionic cap sync// File Opener
npm install cordova-plugin-file-opener2
npm install @ionic-native/file-opener
ionic cap sync
此文件包含了 获取服务器 apk信息、获取当前 apk信息、判断是否执行 apk更新的相关方法
用 const 定义 全局变量，否则 ts 会报错（比如使用 let）
// 全局变量 - 应用信息（默认）- 需要使用 const定义，否则会报错
const appInfomation = {
currentPlatform: '', // 当前平台
currentVersion: '', // 当前app版本
serverAndroidVersion: '', // 服务器最新app版本 - Android
serverAndroidAppUpdateUrl: '', // 服务器最新app下载地址 - Android
serverIosVersion: '', // 服务器最新app版本 - IOS
serverIosAppUpdateUrl: '', // 服务器最新app下载地址 - IOS
apkName: '', // 服务器android安装包的名字
};此处省略了 获取服务器信息的 接口调用 过程，仅展示获取接口数据后，应该将 2.1 中的变量填充上什么信息
// 获取服务器上的应用信息
const serverAppInfo = await getServerAppInfo();
console.log("获取服务器上的应用信息", serverAppInfo);
// 服务器上的安卓应用版本
appInfomation.serverAndroidVersion = serverAppInfo.data.verAndroid;
// 服务器上的安卓应用下载地址
appInfomation.serverAndroidAppUpdateUrl = serverAppInfo.data.androidUrl;
// 服务器上的苹果应用版本
appInfomation.serverIosVersion = serverAppInfo.data.verIos;
// 服务器上的苹果应用下载地址
appInfomation.serverIosAppUpdateUrl = serverAppInfo.data.iosUrl;
// 服务器上的应用下载名
appInfomation.apkName = serverAppInfo.data.apkName; 需要获取设备信息的原因：
此处采用 capacitor 中的 Device插件，它可以返回当前设备平台是 android 还是 ios
import { Device } from '@capacitor/device';
/**
* 获取当前的设备所属平台
*/
const getDeviceInfo = async (): Promise<string> => {
const info = await Device.getInfo();
return info.platform;
};
// 填充全局变量 - 应用信息
appInfomation.currentPlatform = nowPlatform; // 当前设备平台需要获取当前应用信息的原因：
此处使用 capacitor 中的 App插件，它可以返回当前应用的版本号
/**
* 获取用户当前正在使用的app版本
*/
async function getCurrentAppInfo(): Promise<any> {
// 调用获取应用信息的API
const appInfo: AppInfo = await App.getInfo();
return appInfo;
}
// 填充全局变量 - 应用信息
appInfomation.currentVersion = currentAppInfo.version; // 当前应用版本号需要 处理版本号 的原因：
处理版本号的方法：
/**
* 处理版本号(1.0.0处理为10000)
* @param num 版本号
*/
function handleVersion(num: string): number {
console.log('处理后的版本号', num.split('.').join('0'));
return Number(num.split('.').join('0'));
} if (appInfomation) {
if (appInfomation.currentPlatform === 'android') {
updateApp(appInfomation.currentVersion, appInfomation.serverAndroidVersion, appInfomation.serverAndroidAppUpdateUrl, appInfomation.currentPlatform, appInfomation.apkName);
} else if (appInfomation.currentPlatform === 'ios') {
updateApp(appInfomation.currentVersion, appInfomation.serverIosVersion, appInfomation.serverIosAppUpdateUrl, appInfomation.currentPlatform);
} else {
console.log('获取版本信息失败!');
}
}
/**
* 判断是否进行更新，判断使用哪种平台提示
* @param currentVersion 当前应用版本
* @param serverVersion 服务器上的应用版本
* @param serverAppUpdateUrl 服务器上的应用下载地址
* @param currentPlatform 当前设备平台
* @param apkName 服务器上 android 安装包的名字【可选】
*/
export function updateApp(currentVersion: string, serverVersion: string, serverAppUpdateUrl: string, currentPlatform: string, apkName?: string) {
// 是否更新
let ifUpdate = false;
if (currentVersion && serverVersion) {
ifUpdate = handleVersion(currentVersion) < handleVersion(serverVersion);
}
// 如果需要进行更新
if (ifUpdate) {
// this.platform.ready().then(() => {
if (currentPlatform === 'android') {
// 触发 Anroid 平台的提示
presentAlert(currentVersion, serverVersion, serverAppUpdateUrl, currentPlatform, apkName);
} else {
// 触发 Ios 平台的提示
presentAlert(currentVersion, serverVersion, serverAppUpdateUrl, currentPlatform);
}
}
}提示框使用 Ionic 提供的 alertController
提示框处理逻辑如下：
import { alertController } from '@ionic/vue';
import { apkDownloadAndOpen } from '@/utils/apk-file-transfer'
/**
* 更新提示、判断执行下载安装包的方法
* @param currentVersion 当前应用版本
* @param serverVersion 服务器上的应用版本
* @param serverAppUpdateUrl 服务器上的应用下载地址
* @param currentPlatform 当前设备平台
* @param apkName 服务器上 android 安装包的名字【可选】
*/
async function presentAlert(currentVersion: string, serverVersion: string, serverAppUpdateUrl: string, currentPlatform: string, apkName?: string) {
const alert = await alertController.create({
header: '发现新版本, 是否更新?',
cssClass: 'update-pop',
message: '<div class="versions">当前版本号：' + currentVersion + '</div><div class="versions">待更新版本号：' + serverVersion + '</div>',
buttons: [
{
text: '取消',
handler: () => {
console.log('用户暂不更新应用');
}
},
{
text: '立即更新',
handler: () => {
if (currentPlatform === 'android' && apkName) {
// 下载app
console.log('准备执行 android 下载')
// window.open('serverAppUpdateUrl')
apkDownloadAndOpen(serverAppUpdateUrl, apkName, currentPlatform, false, false);
// this.fileTransferService.downloadFile(serverAppUpdateUrl, apkName, false, true);
} else {
console.log('准备执行 ios/web 下载')
// // this.browser.create(serverAppUpdateUrl);
// this.browser.create(serverAppUpdateUrl, '_system', { usewkwebview: 'no' });
}
}
}
],
});
alert.present();
}此文件包含了 apk下载、计算下载进度、下载完成后打开apk文件的相关方法
所谓文件名，就是之前传的 apkName（形如 baoan.apk，要根据这个后缀，判断文件媒体类型）
/**
* 根据文件名称获取文件媒体类型
* @param fileName 文件名称
*/
export function getFileMimeType(fileName: string) {
// 文件名后缀
const fileSuffix = getFileSuffix(fileName);
// 文件类型
let mimeType = '';
switch (fileSuffix) {
case 'txt':
mimeType = 'text/plain';
break;
case 'docx':
mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
break;
case 'doc':
mimeType = 'application/msword';
break;
case 'pptx':
mimeType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
break;
case 'ppt':
mimeType = 'application/vnd.ms-powerpoint';
break;
case 'xlsx':
mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
break;
case 'xls':
mimeType = 'application/vnd.ms-excel';
break;
case 'zip':
mimeType = 'application/x-zip-compressed';
break;
case 'rar':
mimeType = 'application/octet-stream';
break;
case 'pdf':
mimeType = 'application/pdf';
break;
case 'jpg':
mimeType = 'image/jpeg';
break;
case 'png':
mimeType = 'image/png';
break;
case 'apk':
mimeType = 'application/vnd.android.package-archive';
break;
default:
mimeType = 'application/' + fileSuffix;
break;
}
return mimeType;
}Android 和 Ios 存放文件的基本路径是不一样的
获取基本路径需要通过 cordova 插件 —— File
/**
* 获取存放文件的基础路径 android/ios
* @param currentPlatform 当前平台
*/
export function getFileBasePath(currentPlatform: string) {
let baseUrl = ''
if (currentPlatform === 'android') {
baseUrl = (window as any).cordova.file.externalDataDirectory;
// baseUrl = 'files';
} else if (currentPlatform === 'ios') {
baseUrl = (window as any).cordova.file.dataDirectory;
// baseUrl = 'NoCloud/';
} else {
return '';
}
return baseUrl;
}
// 获取存放文件的基础路径 - 最后拼出来的路径是带 .apk 的
const filePath = getFileBasePath(currentPlatform) + fileName;下载安装包（.apk）需要通过 cordova 插件 —— FileTransfer
下载时，报错代码（Code3）：
/**
* 下载文件
* @param fileTransfer 当前文件传输对象
* @param url 下载地址
* @param filePath 文件下载后的本地存放路径
* @param mimeType 文件媒体类型
*/
export function fileDownload(fileTransfer: any, url: any, filePath: string, mimeType: string): any {
fileTransfer.download(url, filePath, function(entry: any) {
console.log("下载完成，文件位于: " + entry.toURL());
// 关闭下载进度提示框
closeProgressPop();
// 打开询问用户是否打开刚下载的应用的提示框
openFilePop(filePath, mimeType, '应用下载完成，是否立即更新？');
}, function (err: any) {
console.log('下载失败，报错信息：', err)
}, true)
}计算文件下载进度 需要通过 cordova 插件 —— FileTransfer 中的 onprogress 属性
踩坑记录：
计算文件下载进度方法，添加在：
/**
* 计算文件下载进度
*/
export function calProgress(fileTransfer: any) {
// 下载进度
let progressValue = 0;
// 计算下载进度，不可以用回调，会失去效果
fileTransfer.onprogress = function(progressEvent: any) {
if (progressEvent.lengthComputable) {
progressValue = progressEvent.loaded / progressEvent.total;
} else {
progressValue++;
}
// 将 0.01321... 这种下载进度转换为整数
const showNumber = Math.floor(progressValue * 100);
// 填充已下载文字提示信息
document.getElementsByClassName('downed')[0].innerHTML = `已完成：${showNumber}%`;
// 填充进度条外框样式 - style会失效，因此在此处修改
document.getElementsByClassName('progress')[0]['style'].width = '100%';
document.getElementsByClassName('progress')[0]['style'].height = '4px';
document.getElementsByClassName('progress')[0]['style'].background = '#eee';
// 填充进度条进度样式 - style会失效，因此在此处修改
document.getElementsByClassName('blue')[0]['style'].display = 'block';
document.getElementsByClassName('blue')[0]['style'].width = `${showNumber}%`;
document.getElementsByClassName('blue')[0]['style'].height = '100%';
document.getElementsByClassName('blue')[0]['style'].background = '#1890ff';
};
}此进度框最好写在 全局变量 里，因为用他的地方比较杂，如下：
// 下载进度框
let alertPop: any;
/**
* 初始化下载进度框
*/
export async function createProgressPop() {
alertPop = await alertController.create({
message: '<p class="title">正在下载更新，请稍等...</p><div class="progress"><span class="blue"></span></div><p class="downed">已完成：0%</p>',
backdropDismiss: false
});
await alertPop.present();
}
/**
* 关闭下载进度框
*/
export function closeProgressPop() {
if (alertPop) {
alertPop.dismiss();
alertPop = null;
}
}显而易见，这个方法在下载成功之后执行
/**
* 询问是否打开文件的提示框
* @param filePath 文件本地路径
* @param fileMimeType 文件媒体类型
* @param msg 询问文本
*/
export async function openFilePop(filePath: string, fileMimeType: string, msg = '是否直接打开文件？') {
const alert = await alertController.create({
message: msg,
buttons: [
{
text: '取消',
role: 'cancel',
handler: () => {
console.log('用户暂不打开文件');
}
}, {
text: '打开',
handler: () => {
// 打开文件
openFile(filePath, fileMimeType);
}
}
]
});
await alert.present();
}打开文件 需要通过 cordova 插件 —— FileOpen2
/**
* 打开文件
* @param filePath 文件本地路径
* @param fileMimeType 文件媒体类型
*/
export function openFile(filePath: string, fileMimeType: string) {
(window as any).cordova.plugins.fileOpener2.open(filePath, fileMimeType).then(
() => {
console.log('文件打开成功！');
}).catch(() => {
alert('文件打开失败，请重试!');
}
);
}Android 系统：
Ios 系统：