Ionic应用如何检测iOS版本并控制消息显示

嘿，作为Ionic新手遇到版本差异的兼容问题太正常了，我来一步步帮你实现iOS版本检测，满足低于10时显示提示、高于10时不显示的需求：

第一步：安装必要的插件 #

要获取设备系统信息，我们需要用到cordova-plugin-device插件，先执行以下命令安装：

ionic cordova plugin add cordova-plugin-device
npm install @ionic-native/device

第二步：在应用中配置Device服务 #

打开src/app/app.module.ts，导入Device模块并添加到providers数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

// 导入Device模块
import { Device } from '@ionic-native/device/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Device, // 添加到providers
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

第三步：在页面中注入Device并实现版本检测逻辑 #

在你需要处理提示的页面组件中，先注入Device服务，然后编写一个判断iOS版本的辅助函数，最后修改你现有的错误处理逻辑：

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { Device } from '@ionic-native/device/ngx';

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.page.html',
  styleUrls: ['./your-page.page.scss'],
})
export class YourPagePage {
  constructor(
    private alertController: AlertController,
    private device: Device // 注入Device服务
  ) {}

  // 辅助函数：判断iOS版本是否低于10
  private isIosVersionBelow10(): boolean {
    // 先判断当前平台是不是iOS
    if (this.device.platform !== 'iOS') {
      return false; // 非iOS平台不触发
    }
    // 拆分版本号，比如"9.3.5"拆成[9,3,5]，"10.1"拆成[10,1]
    const versionParts = this.device.version.split('.').map(part => parseInt(part, 10));
    // 比较主版本号是否小于10
    return versionParts[0] < 10;
  }

  // 你的现有错误处理函数（修改后）
  handleError(err: string) {
    if (err == "has no access to assets") {
      // 只有iOS版本低于10时才显示提示
      if (this.isIosVersionBelow10()) {
        this.presentAlert('no access');
      }
    } else if (err == "no image...") {
      // 这里可以保留你原有的其他错误处理逻辑
    }
  }

  // 你的presentAlert方法（如果还没写，参考这个）
  async presentAlert(message: string) {
    const alert = await this.alertController.create({
      header: '提示',
      message: message,
      buttons: ['确定']
    });
    await alert.present();
  }
}

关键逻辑说明 #

• this.device.platform：获取当前设备平台，只有是iOS时才进行版本判断
• this.device.version：获取iOS系统的版本字符串，比如"9.2"、"11.4"
• 版本比较时，我们拆分版本号为数字数组，只需要比较主版本号（第一个元素）是否小于10即可满足你的需求

这样修改后，当操作触发"has no access to assets"错误时，就会自动检测iOS版本，只有10以下的系统才会弹出提示啦！

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