微信分享需后端签名和域名备案，Twitter等须encodeURIComponent()编码，Web Share API强制HTTPS+用户触发；按钮失效多因DOM时机、CSS遮挡或Open Graph标签缺失。
直接加按钮没用，必须匹配平台当前接口规范，否则点不动、内容错、移动端失效——微信必须后端签名，Twitter 必须 encodeURIComponent() 编码，Web Share API 必须 HTTPS + 用户点击触发。
微信分享按钮为什么点了没反应
根本不是前端代码写得不对，而是缺了后端签名和域名备案这两个硬门槛。前端调用 wx.updateAppMessageShareData() 之前，必须先完成 wx.config()，而这个 config 的 signature 是由后端用 jsapi_ticket、nonceStr、timestamp 和**当前完整 URL**（含协议、域名、路径、query）拼接后 SHA1 加密生成的。
- 浏览器地址栏是
https://example.com/article?id=123，后端签名时就不能用/article?id=123或漏掉https:// - 公众号后台「JS接口安全域名」里没填当前域名，
wx.config()会直接失败，控制台报config:invalid signature - SPA 路由切换后，URL 变了但没重新调用
wx.config()和wx.updateAppMessageShareData()，分享内容仍是旧页面的 - 开发调试务必用真机扫码，iOS 微信对重定向后的 URL 签名验证极严，
location.href改变后不重签就白搭
Twitter/Facebook/LinkedIn 分享链接总乱码或截断
问题出在 encodeURIComponent() 没用对地方，或者参数名已过时。这些平台不解析 HTML 页面，只认你拼进 URL 的 query 参数，一个空格、一个中文没编码，整个链接就废。
-
text和url必须分别encodeURIComponent()，不能只编一个；url还得是完整可访问地址（https://example.com/page，不能是/page） - Twitter 用
https://twitter.com/intent/tweet?url=...&text=...，via和hashtags是可选附加项，别漏掉&连接 - LinkedIn 已不认
title或summary参数，它只抓取页面里的<meta property="og:title">，所以必须配好 Open Graph 标签 - Facebook 的
sharer.php?u=仍可用，但u参数必须是绝对 URL，且需提前在og:url里声明，否则爬虫可能抓错
Web Share API 在 Chrome 里能用，但在 iOS Safari 点不开
这不是 bug，是平台策略差异。navigator.share() 在 Safari（截至 iOS 17.5）完全不支持，且所有浏览器都强制要求：必须 HTTPS、必须用户点击触发、url 必须同源（或相对路径），三者缺一不可。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 不能在
fetch().then()或setTimeout()里调用，否则抛NotAllowedError -
url: '/demo.html'可以，url: 'https://other.com/page'会被静默忽略 - iOS Safari 不支持，Android Chrome 支持但
files字段仅实验性启用，别指望发图 - 降级方案必须手动写：
if ('share' in navigator) { ... } else { window.open('https://twitter.com/intent/tweet?...') }，不能只依赖一种方式
按钮加进模板后看不见或点不了
不是 JS 没加载，很可能是 DOM 渲染时机或 CSS 遮挡问题。HTML 模板生成后，按钮元素虽然存在，但可能被隐藏、未初始化、或 SDK 还没 ready。
- 按钮 HTML 必须放在首屏可视区域内的主体内容附近，避开
position: fixed导航栏下方这种易遮挡位置 - 微信 SDK 脚本要放在按钮 DOM 之后，或确保
wx.ready()回调里再绑定事件；微博 SDK 要等WB2.anyWhere()执行完 - 用懒加载或模板引擎动态插入按钮时，不能只渲染 HTML，还得手动重绑事件或重调 SDK 初始化方法
- 检查按钮是否被
display: none、visibility: hidden、pointer-events: none或父容器 overflow 隐藏
最常被忽略的是：分享卡片没图没描述，从来不是按钮的问题，而是 <meta property="og:image"> 这类标签没配，或者图片 URL 不是 HTTPS、尺寸小于 200×200px。平台爬虫不执行 JS，只读静态 meta，这块漏了，前面所有按钮逻辑都白做。
