实现 App 自动检测更新（Vue3 + Ionic + Cordova + Capacitor）

{
  "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"
  }
}

二. 实现 App 自动检测更新的实践

1. 需要安装的插件

1.1 capacitor

// @capacitor/app
npm install @capacitor/app
npx cap sync

// @capacitor/device
npm install @capacitor/device
npx cap sync

1.2 cordova

// 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

2. 封装 app-update-main.ts（应用检查更新 - 入口）

此文件包含了获取服务器 apk信息、获取当前 apk信息、判断是否执行 apk更新的相关方法

2.1 定义应用信息的全局变量

用 const 定义全局变量，否则 ts 会报错（比如使用 let）

// 全局变量 - 应用信息（默认）- 需要使用 const定义，否则会报错
const appInfomation = {
  currentPlatform: '', // 当前平台
  currentVersion: '', // 当前app版本
  serverAndroidVersion: '', // 服务器最新app版本 - Android
  serverAndroidAppUpdateUrl: '', // 服务器最新app下载地址 - Android
  serverIosVersion: '', // 服务器最新app版本 - IOS
  serverIosAppUpdateUrl: '', // 服务器最新app下载地址 - IOS
  apkName: '', // 服务器android安装包的名字
};

2.2 获取服务器上最新的应用信息

此处省略了获取服务器信息的接口调用过程，仅展示获取接口数据后，应该将 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;

2.3 获取当前设备信息

需要获取设备信息的原因：

Android / Ios 的下载路径、安装过程等，都不太相同，需要根据设备平台进行定制

此处采用 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; // 当前设备平台

2.4 获取当前应用信息

需要获取当前应用信息的原因：

是为了获取版本号，与服务器上最新的版本号进行对比，看看是否需要更新

此处使用 capacitor 中的 App插件，它可以返回当前应用的版本号

/**
 * 获取用户当前正在使用的app版本
 */
async function getCurrentAppInfo():

最低0.47元/天解锁文章