分享按钮点不动主要因浏览器安全策略、平台接口限制及实现细节问题：需确保用户真实点击触发window.open()、微信必须用js-sdk签名、各平台url参数名与编码规则不同、按钮须符合可访问性规范且添加rel="noopener noreferrer"。
分享按钮为什么点不动？检查是否漏了 window.open() 的协议限制
现代浏览器默认阻止跨域弹窗，直接用 window.open() 调用第三方分享 URL（比如微博、微信）常被拦截。这不是代码写错了，而是安全策略生效——尤其当触发动作不是用户直接点击（比如绑在 setTimeout 或异步回调里）时更易失败。
- 必须确保分享按钮的
onclick事件由真实鼠标/触摸点击触发，不能由dispatchEvent模拟 - 微信不支持纯前端跳转分享，
https://share.weibo.com/v2/share/add?title=xxx这类 URL 可以用window.open()，但微信需调用其 JS-SDK，否则打开空白页或报错invalid signature - 所有分享链接必须是
https://开头，http://在 Chrome/Firefox 中会被静默拒绝
微博、QQ、豆瓣的分享链接怎么拼？参数名和编码有坑
各平台分享 URL 结构看似相似，但参数名、是否需要 URL 编码、必填字段差异很大。比如微博用 url，QQ 用 url 但要求必须带协议，豆瓣却用 href；标题字段微博是 title，豆瓣却是 title + description 两个才生效。
- 微博：
https://service.weibo.com/share/share.php?url=<code>encodeURIComponent(location.href)&title=encodeURIComponent('内容') - QQ：
https://connect.qq.com/widget/shareqq/index.html?url=<code>encodeURIComponent(location.href)&title=encodeURIComponent('标题')&desc=encodeURIComponent('摘要') - 豆瓣：
https://www.douban.com/share/service?href=<code>encodeURIComponent(location.href)&name=encodeURIComponent('标题')&comment=encodeURIComponent('描述') - 所有参数值必须用
encodeURIComponent()包裹，不能只对中文编码，特殊符号如&、=也得编
微信分享为什么总提示“请在微信客户端打开”？JS-SDK 签名是硬门槛
微信禁止任何非官方 SDK 的分享行为，所谓“一键分享按钮”在微信内实际无效——你点下去，要么跳到微信外浏览器（此时又无法调起分享面板），要么直接提示“请在微信客户端打开”。真正能发到朋友圈/好友的，必须走 wx.config() + wx.ready() 流程，且依赖后端生成签名。
- 前端无法独立完成：需要后端用
jsapi_ticket和当前页面 URL 计算签名，返回给前端调用wx.config() -
wx.share()已废弃，必须用wx.updateAppMessageShareData()（对好友）和wx.updateTimelineShareData()（对朋友圈） - 测试时务必用真机扫码访问，开发者工具模拟无效；URL 必须与后台配置的 JS 接口安全域名完全一致（含
https://和路径前缀）
按钮样式和可访问性容易被忽略的细节
很多实现把分享按钮做成纯图片或 iconfont，但屏幕阅读器无法识别，键盘 Tab 也无法聚焦。更隐蔽的问题是：分享链接本身没有 rel="noopener"，导致新窗口可能被恶意脚本控制原页面。
- 按钮必须是
<button type="button"></button>或带role="button"的元素，禁用<a href="#"></a>冒充按钮 - 所有
window.open()调用都应加上rel="noopener noreferrer"，例如：<a href="javascript:void(0)" onclick="window.open(url, '_blank', 'rel=noopener noreferrer')"></a> - 不同平台图标建议用 SVG 内联，避免字体加载失败后显示方块；图标旁保留文字“分享到微博”等，不能仅靠图标传达功能
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
