打开 ionic 3/4 数字的 whatsapp 聊天答案

【问题标题】：Open whatsapp chat for a number ionic 3/4打开 ionic 3/4 数字的 whatsapp 聊天
【发布时间】：2021-03-26 09:20:26
【问题描述】：

我开发了一个应用程序，它应该使用this plugin 打开一个whatsapp 聊天。

我使用 ionic CLI ionic cordova plugin add https://github.com/ranjitpandit/whatsapp-phonegap-plugin.git 安装它，并使用如下：

home.page.ts

...

declare var cordova;

...
constructor(public platform: Platform) {}

chat() {

    this.platform.ready().then(() => {

      cordova.plugins.Whatsapp.send('+263783187321');

    });

}

然后在 home.page.html 中我做了这个：

<ion-row>
    <ion-col size="12" no-padding>
      <img src="assets/imgs/chat.jpg" (click)="chat()" class="chat" />
    </ion-col>
</ion-row>

问题是当我点击图片时它没有打开 Whatsapp 聊天窗口。什么都没发生。请帮忙。谢谢

【问题讨论】：

你能在cordova.plugins.Whatsapp.send('+263783187321'); 处放一个断点，看看此时插件是否已初始化？这似乎是个问题。
是的，我使用了 chrome 开发工具来查看它的内容。它只是写“发送 Whatsapp”

标签： angular ionic3 ionic4

【解决方案1】：

这就是 2019 年 Ionic 4 的工作方式

在 config.xml 添加：

<access launch-external="yes" origin="whatsapp://*" />

在您的 html 中：

<a href="whatsapp://send?phone=YOUR_NUMBER">Link<a>

【讨论】：

完美解决方案！
添加这个：工作！！
这里不行！

【解决方案2】：

这很简单，但有一个窍门。

<a ion-button href="whatsapp//send?phone=54119998888">SEND</a>

但您必须允许 config.html 中的“whatsapp”，否则它将被阻止（通过安全性）。所以包括这个：

<access origin="whatsapp//*" launch-external="yes" />

注意不要包含“https://*”，因为它不起作用...

【讨论】：

@Anuj 只需创建一个变量，例如 let wa = "whatsapp//send?phone=" + client_phone;然后使用括号：SEND

【解决方案3】：

我在 ionic 论坛上搜索并以 15 票找到了这个。

通过访问此 URL“https://api.whatsapp.com/send?phone=573{电话号码}” 欲了解更多信息 - 请查看：https://faq.whatsapp.com/en/26000030/?category=5245251540

【讨论】：

这是我的问题的解决方案。经过进一步研究，我将此添加到 config.xml

【解决方案4】：

这适用于我的 pwa（2020 年 1 月）

config.xml

<access launch-external="yes" origin="whatsapp://*" />

然后在你的html中

<a href="https://wa.me/whatsappnumber?text=Hello%20world">Link</a>
 or
<ion-button href="https://wa.me/whatsappnumber?text=Hola%20Mundo">

你应该使用国际格式（当然没有空格）

1 xxx xxx xxxx 美国
52 1 xxx xxx xxxx 墨西哥
54 9 xxx xxx xxxx 阿根廷

在移动设备中它在服务模式下不起作用，但在 prod 中它可以

【讨论】：

【解决方案5】：

这个简单的方法在我的 PWA 中适用于我的 web 和移动（android）版本，而无需在配置文件中添加访问权限：

JS：

window.open(`https://api.whatsapp.com/send?phone=${phoneNumber}`

或

HTML：

<a href=`https://api.whatsapp.com/send?phone=${phoneNumber}`>Link</a>

【讨论】：

【解决方案6】：

如果你想在你的js中调用它，你可以模拟一个<a>元素并动态点击它：

      var  element = document.createElement('a') as HTMLElement;
      element.setAttribute('href', 'https://wa.me/5959333033226?text=Hello%20How%20are%20you');
      element.setAttribute('style', 'display:none;');
      element.click();

你也可以在你的 html 上做：

<a href="https://wa.me/5959333033226?text=Hello%20How%20are%20you">Link</a>

在你的 config.xml 中设置这个 conf

<access launch-external="yes" origin="whatsapp://*" />

【讨论】：

【解决方案7】：

Official WhatsApp Sharing Documentation。他们似乎建议您使用wa.me。 那么让我们试试吧！https://wa.me/?text=mytest。我明白了……

我们找不到您要查找的页面

经过彻底测试，我发现以下 URL 格式是唯一允许您使用任何参数或参数组合的 URL 格式：

https://api.whatsapp.com/send?text=YourShareTextHere

https://api.whatsapp.com/send?phone=123

https://api.whatsapp.com/send?text=YourShareTextHere&phone=123

你总是可以自己测试！

如果您有兴趣观看跟踪这些 URL 的项目，请关注我们！：https://github.com/bradvin/social-share-urls#whatsapp

【讨论】：

【解决方案8】：

如果您使用的是 JavaScript 或 TypeScript，请通过：

chat() {
this.platform.ready().then(() => {
  window.open("https://api.whatsapp.com/send/?phone=[PHONENUMBER]&text=Hi,%20Test%20Message&app_absent=0");
});}

或如果您使用的是 HTML，请通过：

<ion-row>
<ion-col size="12" no-padding>
  <a href="https://api.whatsapp.com/send/?phone=[PHONENUMBER]&text=Hi,%20Test%20Message&app_absent=0&app_absent=0">Chat</a>
</ion-col>

【讨论】：

【解决方案9】：

添加一个函数

 cally(ph) {
    window.open('https://api.whatsapp.com/send?phone=' + ph);
  }

然后在您的 html 中，您可以使用 ion fab 使其整洁

<ion-fab vertical="center" horizontal="end" slot="fixed" (click)="cally('+2349136442229')">
            <ion-fab-button>
              <ion-icon name="logo-whatsapp"></ion-icon>
            </ion-fab-button>
          </ion-fab>

【讨论】：