检测是否安装了 WhatsApp

Question

请使用 Android 或桌面浏览器访问此 WhatsApp test page 并单击 Send 按钮。如果没有安装 WhatsApp，它会显示一条消息。

该页面上的代码检测是如何工作的？我尝试了以下但没有任何反应。

try {
  location.href = 'whatsapp://send/?phone=62812345678&text=test';
} catch (e) {
  console.log(e);
}

Answer 1

查看该页面，似乎至少在 Chrome 上，他们以编程方式打开了 src 为 whatsapp://send/?phone=<number>&text=test 的 iframe。然后他们开始 1000 毫秒超时，之后“看起来你没有安装 WhatsApp！”显示文字。此超时由 blur 事件处理程序取消，这意味着他们的检查基于您的设备在加载 URL 时打开 WhatsApp，这模糊了 window.

超时后触发的功能似乎也检查超时时间是否超过 1250 毫秒。我怀疑这可以处理 phone 的浏览器在更改应用程序时停止执行 JS 计时器的情况。

在 IE 上，他们使用 window.navigator.msLaunchUri，它接受 noHandlerCallback。

通过打开浏览器的开发工具并搜索 WhatsAppApiOpenUrl 来亲眼看看。在 Chrome，可以从开发工具的菜单中找到搜索：

这是一些示例代码。

const detectWhatsapp = (phone, text) => {
  const uri = `whatsapp://send/?phone=${encodeURIComponent(
    phone
  )}&text=${encodeURIComponent(text)}`;

  const onIE = () => {
    return new Promise((resolve) => {
      window.navigator.msLaunchUri(
        uri,
        () => resolve(true),
        () => resolve(false)
      );
    });
  };

  const notOnIE = () => {
    return new Promise((resolve) => {
      const a =
        document.getElementById("wapp-launcher") || document.createElement("a");
      a.id = "wapp-launcher";
      a.href = uri;
      a.style.display = "none";
      document.body.appendChild(a);

      const start = Date.now();
      const timeoutToken = setTimeout(() => {
        if (Date.now() - start > 1250) {
          resolve(true);
        } else {
          resolve(false);
        }
      }, 1000);

      const handleBlur = () => {
        clearTimeout(timeoutToken);
        resolve(true);
      };
      window.addEventListener("blur", handleBlur);

      a.click();
    });
  };

  return window.navigator.msLaunchUri ? onIE() : notOnIE();
};

请注意，它会在每次调用时添加一个事件侦听器。如果您要将其投入生产，请在承诺解决后使用 window.removeEventListener 删除 handleBlur。它还会在正文中附加一个 DOM 节点，如果这对您很重要的话。

用法示例：

detectWhatsapp('<your number here>', 'test').then(hasWhatsapp =>
  alert(
     'You ' + 
        (hasWhatsapp ? 'have WhatsApp' : "don't have WhatsApp")
  )
)

Answer 2

这是我在 Android 上的测试：

Built-in Browser (Webview) and Firefox 如果安装了 WA 您可以使用 iframe 自动打开 WhatsApp
Chrome and Opera 需要用户点击操作

但幸运的是我只需要这个简单的代码来检测是否安装了 whatsapp

document.querySelector('#openWA').addEventListener('click', function() {
  var f = Date.now(),
    j = setTimeout(function() {
      if (Date.now() - f > 1250)
        return;
      alert('WA not installed')
    }, 1e3);
})

<a href="whatsapp://send/?phone=62812345678&amp;text=test" id="openWA">Send to WhatsApp</button>

<!-- Auto open on WebView and Firefox -->
<iframe id="launcher" src="whatsapp://send/?phone=62812345678&amp;text=test" style="display: none;"></iframe>

Answer 3

如果您有 jquery，如果 whats app 没有打开，请根据上面的代码使用 whatsapp web 而不是 iframe 启动器打开一个新页面：

$('a[href^="whatsapp://send?"]').click(function() {
    var button = this,
     f = Date.now(),
    j = setTimeout(function() {
        if (Date.now() - f > 1025){
            return;
        }else{
            var newLink = button.getAttribute('href').replace("whatsapp://send?", "https://web.whatsapp.com/send?");
            button.setAttribute('href', newLink); 
            button.setAttribute('target', "_blank"); 
            $(button).closest('div').append('<a class="hide new" href="' + newLink + '" target="_blank" ></a>');
            $(button).closest('div').find('a.new')[0].click();
        }
    }, 1e3);        

})

检测是否安装了 WhatsApp

Detect if WhatsApp is installed

javascript

whatsapp