分享按钮应置于首屏可视区域内的主体内容附近，确保css可见、js已加载并初始化对应sdk；web share需用户手势触发且支持性检测；微信分享须后端签名，微博/qq等需url编码参数。
分享按钮加在哪儿才有效
HTML5 页面发布后加分享按钮，不是往 末尾随便塞个 <div> 就完事。用户看到按钮的前提是：它得在首屏可视区域、不被遮挡、不被 CSS 隐藏（比如 <code>display: none 或 visibility: hidden）、且对应的 JS 脚本已加载执行。很多“加了没反应”的问题，根源是按钮 DOM 渲染了，但分享 SDK 还没就绪，或者初始化顺序错了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把分享按钮的 HTML 放在
<main></main>或文章主体内容附近，避开<header></header>顶部导航栏下方这种容易被固定定位遮挡的位置 - 确保对应平台的 SDK（如微信 JS-SDK、微博 Web Share API）在按钮渲染前已通过
<script></script>引入并完成初始化（微信需wx.config()，微博需WB2.anyWhere()） - 如果用懒加载或 SPA 路由切换后动态插入按钮，必须手动触发 SDK 的重绑定（例如微博需再次调用
WB2.anyWhere()，微信需重新注册wx.onMenuShareTimeline()等接口）
原生 Web Share API 怎么用（Chrome/Firefox/Edge 支持）
navigator.share() 是最轻量、无需第三方 SDK 的方案，但它只支持分享文本、标题、URL，不支持图片（files 参数目前仅限 Android Chrome 实验性支持），且 Safari 完全不支持（截至 iOS 17.5）。适合快速上线基础分享，但别指望它发带图微博或微信朋友圈。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须在用户手势触发的上下文中调用（比如
onclick事件里），不能在页面加载时自动执行，否则会被浏览器拦截 - 先检测支持性：
if ('share' in navigator)，不支持时降级为手动复制链接或跳转到平台分享页 - 参数对象字段名严格：用
title、text、url，不能写成desc或link
button.addEventListener('click', async () => {
if ('share' in navigator) {
try {
await navigator.share({
title: document.title,
text: '来看看这个',
url: window.location.href
});
} catch (err) {
console.log('分享取消或失败', err);
}
}
});
微信 JS-SDK 分享到朋友圈/好友为什么总显示默认图标和描述
这是最常被问的问题。根本原因是：微信强制要求所有分享配置（title、desc、link、imgUrl）必须通过后端签名生成 config，前端直接写死或用本地 URL 会失效。而且 imgUrl 必须是 HTTPS、尺寸建议 ≥ 200×200px，否则微信自动 fallback 到页面 favicon 或首张图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 后端必须用
jsapi_ticket+nonceStr+timestamp+url（注意是当前页面完整 URL，含 hash 前的部分）生成签名，不能用任意字符串伪造 -
url字段必须与微信后台配置的「JS 接口安全域名」一致，且不能带#后面的 fragment - 分享前务必检查
wx.ready()回调是否触发，没进这个回调就调wx.onMenuShareTimeline()是无效的 - 调试用
wx.error()捕获签名失败、invalid signature、config fail 等错误信息，比猜强得多
微博、QQ、豆瓣等平台的「一键分享」链接怎么构造
这些平台都提供免 SDK 的 HTTP GET 分享跳转，本质是拼接特定参数的 URL。优点是零依赖、兼容老浏览器；缺点是无法预览缩略图、不能自定义弹窗样式、部分平台（如 QQ）已限制非白名单域名调用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 微博：用
https://service.weibo.com/share/share.php?title=xxx&url=yyy&pic=zzz，其中pic必须是绝对 HTTPS 地址 - QQ：用
https://connect.qq.com/widget/shareqq/index.html?url=xxx&title=yyy&summary=zzz，注意url必须 URL 编码 - 豆瓣：用
https://www.douban.com/share/service?name=xxx&href=yyy&image=zzz，image同样需 HTTPS 绝对路径 - 所有参数值必须
encodeURIComponent()，尤其是中文和特殊符号，否则链接 400 或截断
<a href="https://service.weibo.com/share/share.php?title=<%= encodeURIComponent(title) %>&url=<%= encodeURIComponent(location.href) %>&pic=<%= encodeURIComponent(coverImg) %>" target="_blank">分享到微博</a>微信分享的签名逻辑、Web Share 的手势限制、第三方跳转链接的编码要求——这三处最容易漏掉，改完记得清缓存再试。
