whatsapp使用指南

html5html

-whatsapp可以用h5吗 -链接

whatsapp可以用h5吗

我知道你可以和别人分享信息,这在Android和iOS上很有用:

<a href="whatsapp://send?text=Hello world this is a message and a link http://www.example.com/image.jpg">Share with whatsapp</a>

不外,我想通过我的网站上的按钮共享一个图像,就像有人会从他的手机(画廊)共享一个图像一样。这有大概吗?

我们想到的一个解决方案是通过Ajax将照片上载到服务器,将链接返回到上载的照片,然后使用问题中描述的方法发送一条包含照片链接的消息。这与直接使用WhatsApp发送图像差别,由于收件人只会收到一个链接,但我猜疑是否有一种方法可以使用网页将图像从图库发送到另一个应用程序,由于这会引起一些严峻的担心。
大抵上,流程是这样的(请记着,这需要进行一些测试才能准确地找到一个在全部平台或!至少大多数平台上都能很好地工作的解决方案):
在您的网站上创建图像上载。在大多数平台上,只要页面上有 <input type="file" accept="image/*"> 就可以创建一个按钮,当单击该按钮时,该按钮将打开一个对话框,从手机的图库中选择图像。您可以找到一个 full example here 或使用一个库,比方 Plupload 包含很多上载方法,包括您需要的HTML5。
创建一个简单的服务器端上载。这取决于您的语言宁静台,但是您需要做的只是将图像存储在某个地方并返回一个链接以相应它。假如您不想在服务器上存储这些图像,可以将其转发到 Imgur API 并上载到服务器上。
将用户重定向到包含图像链接的 whatsapp:// 链接。

window.location = 'whatsapp://send?text='+encodeURIComponent(imageURL);

不外,如今需要在差别的平台上进行一些测试。您大概无法以这种方法重定向到

whatsapp://

链接(由于它好像是一个安全漏洞),因此您大概需要诱骗它(这是一个坏主意,但为了完备性,我将其包括在内;该

data-action

部分来自

this answer

):

var fakeLink = document.createElement('a'); fakeLink.setAttribute('href', 'whatsapp://send?text='+encodeURIComponent(imageURL)); fakeLink.setAttribute('data-action', 'share/whatsapp/share'); fakeLink.click();

最后,假如这两种方法都不起作用,那么最好的措施是在用户完成上传后创建一个链接,以便“确认”发送,该链接实际上包含在

whatsapp://

字段中的上述

href

链接。

要测试的因素许多,有些是特定于实现的,以是我不得不在没有太多代码的环境下保持它的!含糊性——假如在实现这个时碰到其他问题,请在解释中提到它。

我实验了许多方法,我有一个 winner (拜见测试3),这是每个方法的结果:

(我以为测试3也实用于你,由于假如访问你网站的人没有你的联系人列表,那么这是容许它的唯一选择。)

在全部测试中,数字必须完备,国度和地域代码没有任何初始零。例:

  • +55(011)99999-9999(NOT)
  • +5511999999999(是)

在测试1和2上,它仅在国度/地域代码上使用加号:+5511999999999

测试1:

<a href="whatsapp://send?abid=phonenumber&text=Hello%2C%20World!">Send Message</a>

这样,您的联系人列表中必须有 phonenumber 。它对我不起作用,由于我盼望可以或许向我的联系人列表中大概没有的号码发送消息。

假如您的联系人列表中没有该号码,则会打开Whatsapp列出您全部已注册的联系人,因此您可以选择一个。

这是分享内容的好选择。

测试2:

<a href="intent://send/phonenumber#Intent;scheme=smsto;package=com.whatsapp;action=Android.intent.action.SENDTO;end">Send Message</a>

假如您的联系人列表中有该号码,此方法仅实用于Android 。假如您没有,Android会打开您的SMS应用程序,因此您可以约请该联系人使用Whatsapp。

测试3 (得胜者)

<a href="https://api.whatsapp.com/send?phone=15551234567">Send Message</a>

这是唯一对我有效的方法。

  • 它实用于桌面上的Android,iOS和Web应用程序,
  • 您可以使用联系人列表中没有的 号码开始对话

假如您盼望有一个书签以便于使用,您可以使用以下方法:

javascript: (function() { var val= Prompt("Enter phone number",""); if (val) location="https://api.whatsapp.com/send?phone="+escape('972' + val)+""; })()

您需要将国度/地域代码(或删除它)变动为您。目的国度/地域并将其粘贴到chrome/firefox链接的地点字段中

值得留意的是:

假如安装了whatsapp客户端,只需跳转

window.location.href = "https://wa.me/号码" ;

假如有区号则只需!在前面直接加区号,比方加香港区号:

https://wa.me/852XXXXXXXX
if (window.navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { window.location.href = "https://wa.me/号码"; setTimeout(function () { window.location.href = "https://itunes.apple.com/us/app/whatsapp-messenger/id310633997?mt=8"; window.location.href = "https://itunes.apple.com/us/app/whatsapp-messenger/id310633997?mt=8"; }, 2000); } elseif (window.navigator.userAgent.match(/android/i)) { window.location.href = "https://wa.me/号码";; setTimeout(function () { window.location.href = "https://play.google.com/store/apps/details?id=com.whatsapp"; }, 2000) }

要么可以到 http://www.conversabit.com/wasap.js/ 提供的小插件主动适配

html:
<span data-whatsapp="5215585420898">This will be clickable on mobile</span>
javascript:
wasap.init()

插件还能配合vue应用,详细察看官网

本文网址: http://www.5bufan.com/p/202062144058_1252_892827131/home