分享按钮失效主因是误用location.href被拦截，须用window.open；微博直链需正确编码URL/title/pic；微信必须通过JS-SDK签名且URL与后端一致；QQ分享依赖备案域名及og:image标签。
分享按钮点不动？先确认是否用了 window.open 而非 location.href
很多页面加了“分享到微信”按钮但点击没反应，根本原因是直接用 location.href 跳转分享链接，被浏览器弹窗拦截器当成广告跳转给拦了。社交平台（微信、微博、QQ）的官方分享接口基本都要求新开窗口，必须用 window.open，且最好在用户主动点击事件中触发。
实操建议：
- 按钮绑定
onclick事件，里面调用window.open(url, '_blank', 'width=600,height=500') - 不要在
setTimeout或异步回调里调用window.open，否则大概率被拦截 - 微信朋友圈不支持前端直链分享，必须走 JS-SDK 签名，这点后面会讲
微博分享链接怎么拼？url、title、pic 参数不能乱放
微博开放平台提供标准的 https://service.weibo.com/share/share.php 直链分享，靠 URL 参数驱动，但参数名和编码规则很关键。比如 title 必须是 UTF-8 编码后的字符串，pic 必须是**可公开访问的绝对 URL**（不能是本地路径或相对路径）。
示例（商品页 JS 中）：
const shareUrl = 'https://service.weibo.com/share/share.php?' +
'url=' + encodeURIComponent(window.location.href) +
'&title=' + encodeURIComponent(document.title || '这款商品太值了') +
'&pic=' + encodeURIComponent('https://example.com/product.jpg');
注意：
-
pic图片必须是 HTTPS 协议，HTTP 会被微博拒绝加载 - 超过 200 字的
title可能被截断，建议控制在 120 字以内 - 微博不校验
appkey，所以无需后端参与，纯前端可实现
微信分享为什么只显示链接？JS-SDK 必须配置 jsapi_ticket 和签名
微信内置浏览器（包括微信内打开的 H5 页面）不允许前端直接构造分享参数。你看到的“分享到朋友圈/好友”按钮，实际是调用微信 JS-SDK 的 updateAppMessageShareData 和 updateTimelineShareData 方法——它们需要后端提供签名，而签名依赖 jsapi_ticket 和当前页面 URL。
关键步骤：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 后端需通过微信 access_token 换取
jsapi_ticket（有效期 2 小时，要缓存） - 前端传当前完整 URL（含 hash 后参数）给后端，后端用该 URL +
jsapi_ticket等生成签名 - 前端初始化 SDK 后，用
wx.ready()回调里调用分享方法，否则无效
容易忽略的一点：如果商品页是单页应用（如 Vue Router 的 history 模式），URL 改变但未刷新，微信会复用旧签名，导致分享失败。此时必须在路由变化后重新请求签名并调用 updateAppMessageShareData。
QQ 和 QQ 空间分享用 sharesdk 还是直链？推荐后者
腾讯已下线旧版 sharesdk，目前推荐使用 http://connect.qq.com/widget/shareqq/index.html 直链方案，类似微博，纯前端即可完成。
拼接要点：
-
url：必须是当前页面完整 URL，且域名已在 QQ 开放平台备案（否则分享后跳转 404） -
desc：描述字段，最大 200 字，UTF-8 编码 -
summary：摘要字段，部分客户端展示，建议与desc一致 -
site：站点名称，例如 “XX商城”，不能含空格或特殊字符
示例：
const qqUrl = 'http://connect.qq.com/widget/shareqq/index.html?' +
'url=' + encodeURIComponent(window.location.href) +
'&desc=' + encodeURIComponent('限量发售，手慢无') +
'&site=' + encodeURIComponent('好物优选');
注意：QQ 分享不支持设置缩略图，图片由微信/QQ 自动抓取页面 或首张 里写好 og:image。
最常被卡住的其实是微信签名时效性和 URL 一致性，后端缓存 jsapi_ticket 时没处理好并发更新，或者前端传的 URL 没带上 hash 片段，都会让分享数据变成默认链接。其他平台看似简单，但图片协议、编码、备案这些细节漏一个，分享就只出链接不出图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
