Angular 5 + Cordova构建iOS应用：如何从Cordova获取应用版本信息

嘿，我来帮你解决这个问题！在你的Angular 5项目里通过Cordova获取应用版本信息其实很简单，主要依赖Cordova的官方插件来对接原生系统的版本数据，下面一步步给你说明：

步骤1：安装Cordova应用版本插件 #

首先你需要安装cordova-plugin-app-version这个插件，它能帮你获取iOS（以及Android）应用的版本号、应用名称、包名等信息。在你的Cordova项目根目录下执行命令：

cordova plugin add cordova-plugin-app-version

步骤2：在Angular组件中调用插件API #

因为Cordova的API需要等待设备初始化完成后才能调用（也就是deviceready事件触发后），所以你要确保在Angular代码里先监听这个事件，再去获取版本信息。

比如在你的根组件（app.component.ts）里这样写：

import { Component, OnInit } from '@angular/core';

// 声明window对象，避免TypeScript报错
declare var window: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  appVersion: string;
  appName: string;
  packageName: string;

  ngOnInit() {
    // 监听Cordova的deviceready事件，确保API可用
    document.addEventListener('deviceready', () => {
      this.fetchAppDetails();
    }, false);
  }

  fetchAppDetails() {
    // 获取应用版本号（对应iOS Info.plist的CFBundleShortVersionString）
    window.cordova.getAppVersion.getVersionNumber((version) => {
      this.appVersion = version;
      console.log('应用版本号:', version);
    });

    // 获取应用名称
    window.cordova.getAppVersion.getAppName((name) => {
      this.appName = name;
      console.log('应用名称:', name);
    });

    // 获取应用包名（iOS里的Bundle Identifier）
    window.cordova.getAppVersion.getPackageName((pkgName) => {
      this.packageName = pkgName;
      console.log('应用包名:', pkgName);
    });

    // 可选：获取构建版本号（对应iOS Info.plist的CFBundleVersion）
    window.cordova.getAppVersion.getBuildNumber((buildNum) => {
      console.log('构建版本号:', buildNum);
    });
  }
}

步骤3：在模板中展示版本信息 #

你可以在Angular模板（比如app.component.html）里直接绑定这些数据：

<div class="app-info">
  <h3>{{ appName }}</h3>
  <p>当前版本: {{ appVersion }}</p>
  <p>包名: {{ packageName }}</p>
</div>

注意事项 #

• 环境限制：Cordova的API只能在Cordova构建的环境中使用（iOS模拟器、真机或者Cordova浏览器平台），在普通的Angular开发服务器（ng serve）里运行时，window.cordova会是undefined，所以你可以加个判断来兼容浏览器测试：

  fetchAppDetails() {
    if (window.cordova) {
      // 真实Cordova环境下的逻辑
      // ...上面的API调用
    } else {
      // 浏览器测试时的模拟数据
      this.appName = 'My Angular App';
      this.appVersion = '1.0.0 (Browser)';
      this.packageName = 'com.example.myapp';
    }
  }
  

这样你就能轻松在Angular应用里拿到Cordova iOS应用的版本详情啦！

内容的提问来源于stack exchange，提问作者user9589284