Ionic Angular中如何使用cordova-plugin-app-launcher启动邮件应用

1. 安装插件及依赖 #

在项目根目录执行以下命令安装必备依赖：

• 安装Cordova原生插件核心包

ionic cordova plugin add cordova-plugin-app-launcher

• 安装Ionic Native适配包，提供TypeScript类型支持，避免编译阶段报错

npm install @ionic-native/app-launcher

2. 全局模块注册 #

打开项目src/app/app.module.ts文件完成插件注册：

• 顶部引入插件模块

import { AppLauncher } from '@ionic-native/app-launcher/ngx';

• 将AppLauncher加入@NgModule的providers数组

@NgModule({
  // 保留原有declarations、imports等配置不变
  providers: [
    // 保留原有服务配置不变
    AppLauncher
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 组件业务逻辑编写 #

打开绑定了(click)="openEmailApp()"事件的对应组件的TS文件，编写启动逻辑：

• 顶部引入所需依赖

import { AppLauncher, AppLauncherOptions } from '@ionic-native/app-launcher/ngx';
import { Platform, AlertController } from '@ionic/angular';

• 构造函数注入依赖

constructor(
  private appLauncher: AppLauncher,
  private platform: Platform,
  private alertCtrl: AlertController
) {}

• 实现openEmailApp方法，优先使用mailto协议唤起系统邮件应用选择器，自动适配设备上所有已安装的邮件类App

async openEmailApp() {
  // 非真机环境直接拦截提示
  if (!this.platform.is('cordova')) {
    const alert = await this.alertCtrl.create({
      header: '提示',
      message: '请在真机环境下运行该功能',
      buttons: ['确定']
    });
    await alert.present();
    return;
  }

  // 配置启动参数
  const options: AppLauncherOptions = {
    // 可配置默认收件人，不需要预设收件人直接填mailto:即可
    uri: 'mailto:target@example.com'
  };

  // 安卓可选配置：如果需要固定拉起某款邮件应用，可添加包名配置；不配置则自动弹出应用选择器
  if (this.platform.is('android')) {
    // 示例：固定拉起Gmail可打开下方注释
    // options.packageName = 'com.google.android.gm';
  }

  try {
    // 先检测当前设备是否支持启动目标应用
    const canLaunch = await this.appLauncher.canLaunch(options);
    if (canLaunch) {
      await this.appLauncher.launch(options);
    } else {
      const alert = await this.alertCtrl.create({
        header: '提示',
        message: '当前设备未安装可用的邮件应用',
        buttons: ['确定']
      });
      await alert.present();
    }
  } catch (err) {
    console.error('启动邮件应用失败：', err);
  }
}

4. 平台适配注意事项 #

• iOS端：打开项目根目录config.xml，在<platform name="ios">节点下添加跳转白名单配置，否则iOS 10+系统会拦截应用跳转请求：

<config-file parent="LSApplicationQueriesSchemes" target="*-Info.plist">
  <array>
    <string>mailto</string>
    <string>googlegmail</string>
    <string>ms-outlook</string>
    <string>readdle-spark</string>
  </array>
</config-file>

• 安卓端：无需额外配置权限，mailto协议会自动拉起系统应用选择面板，展示所有支持邮件发送的已安装应用供用户选择。

补充：如果不需要指定跳转特定邮件应用，也可以直接用<a href="mailto:xxx@xx.com">标签实现跳转，但该方式在部分定制安卓ROM上存在适配问题，使用插件的兼容性表现更稳定。

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