pc端和移动端使用QQ在线客服进行聊天的一些坑和解决方案

最近有一个需求：在H5页面上添加QQ在线客服聊天的功能，之后就是在tx官网提供的代码遇到的一些问题以及解决方案，希望能对做该功能的提供一些帮助。

tx官方通讯组件注册：

复制tx官网提供的代码：
href=“http://wpa.qq.com/msgrd?v=3&uin=客服的qq号码&site=qq&menu=yes”>

遇到的问题：

在pc端、移动端安卓中可以打开qq并联系客服，但是在移动端ios下打开的却是app Store ，苹果手机自带的 Safari 浏览器会提示是否在AppStore中打开链接，如果选择是就会直接跳转到App Store 中，然后才能跳转到QQ，但是两次跳转会丢失参数，导致不能打开需要聊天的对象。

解决方案：

区分当前系统是否是在pc端还是在移动端
HTML代码：涂改区域填写客服的qq号码

效果：移动端效果需要在手机上展示

移动端联系客服 pc端联系客服

js代码：

if (
/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) ||
/(Android)/i.test(navigator.userAgent)
) {
this.shows = true;
}

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

H5页面使用qq客服功能相关推荐

h5调起QQ客服的坑（PC端、移动端）
废话:最近运营要求研发增加qq客服功能,于是这个任务就交给了我这个前端小白,查了一下资料,跟着他们做,发现都不正确,自己研究之后,写下这个博客,希望大家不要踩坑! 不是任何一个QQ都直接加进那段代码里 ...
网站在线QQ客服功能
在线QQ客服功能 http://connect.qq.com/intro/wpa <a target="_blank" href="http://wpa.qq.co ...
网站/页面即时聊天客服功能
网站/页面即时聊天客服功能实现效果截图这是后台页面这是访客页面前后端数据交互格式 JSON 前端框架 VUE Element UI JavaScript 后端技术 mysql 5.6 php 5 ...
腾讯提供的QQ在线样式——QQ客服功能，非浮动的！
经常在一些网站上看到qq客服的功能,一点击就会把相应的qq调出来. 先把相关代码贴出: 如下:href=tencent://message/?uin=429443535&Site=www.ct ...
页面即时聊天客服功能
项目最近需要增加一个在线客服的功能,需要快速上线,只有几天时间,找了找网上的api,有个比较不错的 https://crisp.chat/en/ 后台服务长这样使用非常简单,在仪表台页面找到网站管理 ...
实现QQ客服功能：qq的Tencent://Message/协议
网页中打开qq联系客服: <a target="blank" href="tencent://message/?uin=97792****&Site=咨询& ...
js、html唤起唤起qq客服，加群功能
文章目录一.唤起qq 二.加群功能唤起qq实际就是对qq推广工具的使用一.唤起qq 实际就是唤起指定的qq聊天窗口,如果没有该好友,会提示你添加 qq客服手机唤起: <a target= ...
微信小程序客服功能，并在聊天页面获取用户头像昵称
1.页面内容利用定位设置button为透明按钮触发客服功能 <view class='list'> <button type='default' open-type="c ...
代码实现网页右侧固定的qq客服，微信，手机号，置顶的功能
实现网页右侧固定的qq客服,微信,手机号,置顶的功能 html代码部分图片路径改成自己的 <div id="right">& ...

H5页面使用qq客服功能