如何在Ionic 3应用中打开WhatsApp并跳转至指定联系人？

你的问题出在WhatsApp的URI格式不正确，Android和iOS平台的WhatsApp跳转协议是有区别的，直接用whatsapp:号码的格式并不被官方支持。下面是针对Ionic 3的可行解决方案：

核心要点：正确的URI格式 #

WhatsApp针对不同平台定义了专属的跳转规则：

• Android平台：使用 whatsapp://send?phone=+[国际区号][电话号码]（即使不需要发送消息，这个格式也会直接打开对应联系人的聊天界面）
• iOS平台：使用 whatsapp://chat?phone=+[国际区号][电话号码]

注意：号码必须是完整的国际标准格式，开头必须带+和国家代码（比如印度的+91），不能包含空格、括号或其他特殊字符。

方案一：使用Ionic Native的InAppBrowser插件（推荐） #

这个方案能更好地处理错误情况（比如用户未安装WhatsApp），步骤如下：

1. 安装依赖插件
   在项目根目录执行以下命令完成插件安装：

   ionic cordova plugin add cordova-plugin-inappbrowser
   npm install @ionic-native/in-app-browser --save
   

2. 配置AppModule
   在src/app/app.module.ts中导入并注册InAppBrowser：

   import { InAppBrowser } from '@ionic-native/in-app-browser';
   
   @NgModule({
     ...
     providers: [
       ...
       InAppBrowser,
       ...
     ]
   })
   export class AppModule {}
   

3. 编写跳转逻辑
   在你的页面组件中，导入Platform和InAppBrowser，实现跳转方法：

   import { Component } from '@angular/core';
   import { Platform } from 'ionic-angular';
   import { InAppBrowser } from '@ionic-native/in-app-browser';
   
   @Component({
     selector: 'page-home',
     templateUrl: 'home.html'
   })
   export class HomePage {
   
     constructor(private platform: Platform, private iab: InAppBrowser) {}
   
     openWhatsAppContact(phoneNumber: string) {
       // 格式化号码为国际标准格式
       const formattedNumber = phoneNumber.startsWith('+') ? phoneNumber : `+${phoneNumber}`;
       let url: string;
   
       if (this.platform.is('android')) {
         url = `whatsapp://send?phone=${formattedNumber}`;
       } else if (this.platform.is('ios')) {
         url = `whatsapp://chat?phone=${formattedNumber}`;
       } else {
         alert('当前平台不支持此功能');
         return;
       }
   
       // 使用系统应用打开WhatsApp
       const browser = this.iab.create(url, '_system');
       // 监听打开失败的情况，提示用户安装WhatsApp
       browser.on('loaderror').subscribe(() => {
         alert('请先安装WhatsApp应用');
       });
     }
   
     // 调用示例
     goToTargetContact() {
       this.openWhatsAppContact('911234567890'); // 替换为你的目标号码
     }
   }
   

方案二：直接使用window.open（简化版） #

如果你不想引入额外插件，也可以直接使用window.open，但要注意只能在真实设备上测试（浏览器环境无法触发应用跳转）：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(private platform: Platform) {}

  openWhatsApp(phoneNumber: string) {
    const formattedNumber = `+911234567890`; // 替换为你的目标号码
    let url: string;

    if (this.platform.is('android')) {
      url = `whatsapp://send?phone=${formattedNumber}`;
    } else if (this.platform.is('ios')) {
      url = `whatsapp://chat?phone=${formattedNumber}`;
    } else {
      alert('平台不支持');
      return;
    }

    window.open(url, '_system');
  }
}

测试注意事项 #

• 必须在真实Android/iOS设备或者对应的模拟器上测试，浏览器预览无法触发应用跳转。
• 确保目标号码已经注册了WhatsApp账号，否则打开后会提示找不到联系人。

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