跟老姚学前端,课程体系更完善,10%基础 + 90%实战演练,快人一步学编程

扫一扫浏览

该链接会唤起手机QQ,若无法正常跳转请先升级QQ的解决办法

未结贴
0 5839
岁月的路站长未认证 2020-07-10 14:12:27
收藏

背景介绍

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

正文

针对跳转唤起QQ,QQ推广的官方网站,只需要扫描登录需要被唤起的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之间的联系可以通过一种叫做深度链接的技术解决,所谓的深度链接就是绕过网站的首页直接链接道分页的一种链接技术。
深度链接中的一个解决方案就是定义一个新的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=123456&site=oicqzone.com&menu=yes";
	var kefu102 = "mqqwpa://im/chat?chat_type=wpa&uin=123456&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);
		}
	}
};

文章内容来源:http://www.info110.com/209908.html

最近热帖 HOT TOPIC
【全套视频】thinkphp5视频教程 97448
父元素flex之后,子元素高度自适应问题 11829
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 11402
如何收废品才能赚钱,有什么技巧?揭秘垃圾回收行业的一些规则 11174
thinkphp5隐藏默认模块的一些问题 10846
api接口文档插件easydoc的基本用法,快速搞定接口文档 10671
PHP如何判断字符串是否为json格式 10524
校园跑腿市场目前怎么样?校园跑腿系统给学生带来了哪些便捷? 10502
omnicore rpc api中文手册【usdt】 10443
教你如果处理高并发数据不同步的问题php篇 10165
月度热议HOT COMMENTS
【全套视频】thinkphp5视频教程 77
tpframe 后续版本你希望有的功能是什么(分享贴) 12
权限那里怎么一登录别的账号就报错啊 9
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 5
tpframe6.0马上就要跟大家见面了,一次全新的升级 5
透析thinkphp5升级版开发框架tpframe 3
新增的管理员没有权限操作CMS模块。 3
爆料早知道: