最稳妥方案是直接使用腾讯官方生成的img标签，其src为静态图片但点击时通过协议跳转，未安装QQ则自动 fallback 至群网页版；切勿修改src或用base64替代，群号需从生成页链接中提取gid参数，填错将导致404。
直接用腾讯官方提供的 img 标签嵌入最稳妥
不需要 JavaScript、不依赖用户装 QQ 客户端、兼容性最好——腾讯自己生成的那段代码本质就是一个带群 ID 的图片链接，点击后由浏览器触发 wtlogin:// 或 mqqapi:// 协议跳转。实际生效的是图片的 src 地址，不是 alt 或 title。
生成方式固定：访问 https://qun.qq.com/join.html → 登录 → 选群 → 复制「网页代码」→ 粘贴到 HTML 中任意位置即可。
- 生成的代码类似：
<img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="技术交流⑥" title="技术交流⑥">
- 这个
src实际是静态图，但腾讯后台做了协议绑定，点击时浏览器会尝试唤起 QQ；若未安装 QQ，则跳转到群首页（https://qun.qq.com/join/xxxxx） - 不要手动改
src地址，否则可能失效；也不要用 base64 图片或本地路径替代
mqqapi:// 协议链接在现代浏览器里基本不可靠
早期文档里常出现的 mqqapi://card/show_psl?src_type=internal&version=1&uin=77359308 这类写法，在 Chrome 110+、Edge 115+、Safari 16.4+ 上默认被拦截，除非用户手动允许“不安全的协议处理程序”，否则直接静默失败，控制台也不会报错。
- Firefox 从 90 版本起也禁用了非白名单协议唤起
- 移动端 Android Chrome 和 iOS Safari 同样拒绝执行，会提示“无法打开链接”或直接空白
- 即使加了
target="_blank"或用window.open()包裹，也无法绕过限制
想自定义按钮样式？用 <a> 包裹原生 img 或换用 <button> + JS 回退逻辑
原生 img 标签没法加 hover 效果或统一配色，如果需要品牌化设计，推荐以下两种做法：
立即学习“前端免费学习笔记（深入）”；
- 把腾讯给的
img套进<a href="https://qun.qq.com/join/群号">...</a>，群号从生成代码里提取（如https://qun.qq.com/join/77359308），这样点不动时至少能跳网页版 - 用
<button>+onclick尝试唤起，失败则 fallback 到网页：<button onclick="if(!window.open('mqqapi://card/show_psl?...')) window.open('https://qun.qq.com/join/77359308')">加入技术群</button> - 注意：不能只依赖
mqqapi://，必须提供https://qun.qq.com/join/xxx作为保底，否则 iOS 用户完全无法加入
群号怎么从生成代码里提取？别手输，防错位
腾讯官网生成的代码里不直接显示群号，但所有有效链接都指向同一个群。最稳的方式是抓它跳转后的 URL：
- 在
qun.qq.com/join.html页面选好群后，先别点“生成代码”，右键“加入群”按钮 → “复制链接地址” - 粘贴出来类似：
https://qun.qq.com/join.html?gid=77359308，其中77359308就是群号 - 也可用生成的
img标签的src值反查：腾讯的//pub.idqqimg.com/wpa/images/group.png是通用图，真正识别群靠的是页面上下文或 referer，所以群号必须单独传
群号填错一位，唤起或网页跳转都会 404，且无提示——这是最容易被忽略、又最难排查的问题。
