浏览器唤起qq进行聊天的一些坑和解决方案 - 小裂变

小裂变-微信生态用户裂变增加专家
小裂变官网：www.xiaoliebian.com
独创微信生态一体化裂变运营，公众号裂变、小程序裂变、社群裂变、我的号裂变

说明

从浏览器唤起QQ进行聊天，是不少公司或者企业会用到的一种客服方式，然而不少时候，一些手机端浏览器并不支持直接跳转到QQ，或者不支持从App内嵌的网页中跳转到QQ页面。

正文

针对跳转唤起QQ，QQ推广的官方网站http://shang.qq.com/v3/index....，只须要扫描登陆须要被唤起的QQ号，就能够生成一段代码以下所示：

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

这里的数字“123456789”就是须要被唤起的QQ号码。

应用这种方式，能够在大部分的浏览器中唤起QQ客户端，并定位到聊天页面，只是如下几种状况中这种方式会失效：

1. 苹果手机自带的 Safari 浏览器会提示是否在AppStore中打开连接，若是选择是就会直接跳转到App Store 中，而后才能跳转到QQ，可是两次跳转会丢失参数，致使不能打开须要聊天的对象。
2. 在手机端Google浏览器中也会存在相似于 1 中的状况
3. 网页内嵌到自开发的App中，须要唤起QQ时也会出现相似与 1 的状况。

因为Safari浏览器在苹果手机端使用率很高，应业务需求，就不得不为它找一种另外的方式。

经过了解，发现app之间的联系能够经过一种叫作深度连接的技术解决，所谓的深度连接就是绕过网站的首页直接连接道分页的一种连接技术，具体想要了解的能够看看LinkedMe上的一片博文https://www.linkedme.cc/blog/...。

深度连接中的一个解决方案就是定义一个新的URL Scheme ,这个URL Scheme能够经过特定的URI方式传递参数给另外一个APP，从而改变App之间独立不通讯的局面。

单独说倒唤起QQ，或者解决Safari浏览器不能唤起QQ的问题，可使用以下的URI：

mqqwpa://im/chat？chat_type=wpa&uin=123456789&version=1&src_type=web&web_src=oicqzone.com

其中数字“123456789”一样的是须要被唤起的QQ。

<a target="_blank" href="mqqwpa://im/chat?chat_type=wpa&uin=123456789&version=1&src_type=web&web_src=oicqzone.com">
 123456789
</a>

经过屡次测试，我整理出以下手机端浏览器唤起QQ的各类不一样状况（其中no表明测试不成功，ok表明测试成功）：

这里须要提到一点，将URL Scheme 的方案用于电脑的各类浏览器从而去唤起QQ是不起任何效果，由于URL Scheme是专门为解决APP之间孤立的状况而提出来的，并不适用于电脑应用，可是在电脑端可使用QQ推广给出的的方案。

知道了如何解决App跳转到QQ的方法，可是不少时候咱们但愿有一种通用的办法能够解决上述几种状况，保证在大多数浏览器（包括电脑浏览器）只须要一套代码就能够解决问题。

我我的经过判断浏览器的userAgent区分手机端浏览器仍是电脑端浏览器，而后为它们分别提供不一样的方案：

HTML代码

<a href="javascript:void(0)" data-qq='qq'>111111111111</a>

JavaScript代码

window.onload = function () {

    var as = document.getElementsByTagName('a');

    var kefu101 = "http://wpa.qq.com/msgrd?v=3&uin=381232999&site=oicqzone.com&menu=yes";
    var kefu102 = "mqqwpa://im/chat?chat_type=wpa&uin=381232999&version=1&src_type=web&web_src=oicqzone.com";

    for (var i = 0, len = a.length; i < len; i++) {

        if (as[i].hasAttribute('data-qq')) {

            as[i].onclick = (function (i) {

                return function (e) {

                    var kefu = e.target ? e.target.getAttribute('data-qq') : e.srcElement.getAttribute('data-qq');

                    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || /(Android)/i.test(navigator.userAgent)) {

                        window.open(kefu102);
                    }else {
window.open(kefu101);
                    }
                }
            })(i);
        }
    }
};

这套方案中，手机端使用URL Scheme，电脑端使用QQ推广的方案。

我的微信：zmx119966（欢迎来交流）