Angular中点击按钮如何直接唤起移动端邮件应用？

你提到的cordova-app-alunch应为拼写笔误，目前Cordova生态主流的第三方应用唤起插件为cordova-plugin-app-launcher，以下分别给出基于该插件的实现方式，以及不需要额外插件的更轻量兼容方案。

基于cordova-plugin-app-launcher的实现 #

首先确认插件已正确安装，安装命令为：

cordova plugin add cordova-plugin-app-launcher

核心唤起逻辑 #

不要硬编码指定某一款邮件应用的包名（不同厂商系统自带邮件包名不统一，多数用户也会安装第三方邮件客户端），直接用系统通用的mailto协议唤起即可，系统会自动拉取设备上所有已安装的支持邮件协议的应用供用户选择：

// 绑定check mail按钮点击事件
document.querySelector('#checkMailBtn').addEventListener('click', () => {
  // 插件未加载完成时直接走降级逻辑
  if (!window.plugins?.launcher) {
    openMailByNative()
    return
  }
  window.plugins.launcher.launch(
    { uri: 'mailto:' },
    () => console.log('邮件应用唤起成功'),
    () => openMailByNative() // 唤起失败走降级
  )
})

平台配置注意事项 #

• iOS端：需要在项目config.xml中添加协议白名单，否则iOS 10+系统会拦截唤起请求，配置如下：

<platform name="ios">
  <config-file parent="LSApplicationQueriesSchemes" target="*-Info.plist">
    <array>
      <string>mailto</string>
    </array>
  </config-file>
</platform>

• 安卓端：不需要额外配置权限，插件默认就有访问应用列表的权限。

无插件轻量替代方案 #

mailto是全平台移动端系统原生支持的协议，Cordova内置Webview默认支持识别该协议，绝大多数场景下不需要安装任何第三方插件就能实现唤起，兼容性比插件方案更稳定，不会出现插件版本和Cordova版本、系统版本不匹配的问题。
直接写通用跳转逻辑即可，也就是上面代码里的降级方法：

function openMailByNative() {
  window.location.href = 'mailto:'
}

注意：如果使用WKWebView作为iOS端Webview引擎，只需要在config.xml中添加一行配置允许mailto协议跳转即可：

<allow-navigation href="mailto:*" />

这个方案的优势：

• 零插件依赖，不增加安装包体积
• 系统自动展示所有已安装的邮件应用供用户选择（包括QQ邮箱、网易邮箱、Gmail、企业邮箱等第三方应用），不会出现唤起了用户没登录的系统自带邮件的问题
• 适配所有Cordova版本，不需要跟进插件更新维护

特殊场景兼容 #

如果需要直接打开邮件应用收件箱、而非默认的写邮件页面，可以针对安卓端做主流应用的兼容判断，用插件的canLaunch方法检测已安装的邮件应用后直接唤起对应包名即可，常用邮件应用包名参考：

const mailAppPackages = [
  'com.android.email', // AOSP原生邮件
  'com.google.android.gm', // Gmail
  'com.tencent.androidqqmail', // QQ邮箱
  'com.netease.mobimail', // 网易邮箱大师
  'com.microsoft.office.outlook', // 微软Outlook
]

不建议做“未检测到邮件应用就拦截操作”的逻辑，不少用户会通过微信、企业微信等内置邮件提醒入口查收验证码，唤起失败时只需要给个弱提示“请手动打开您常用的邮件应用查收验证码”即可，不要阻断用户操作。

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