瀏覽器喚起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（歡迎來交流）