原生分享首选 Web Share API（navigator.share），需 HTTPS 和用户手势触发，支持 title/text/url；微信必须用 JS-SDK 配合后端签名；Twitter/Facebook/LinkedIn 可用 URL Scheme；og 标签仅影响链接预览，不控制分享行为。
直接用 Web Share API 实现原生分享（Chrome / Edge / Safari 16.4+）
现代浏览器已支持 navigator.share()，无需第三方 SDK，不依赖网络请求，用户点击即调用系统级分享面板。这是最轻量、最隐私友好的方案。
- 仅需 HTTPS 环境（本地
http://localhost也允许） - 必须在用户手势（如
click）中触发，不能 onload 自动调用 - 支持分享
title、text、url，但不支持图片（files参数目前仅 Android Chrome 支持） - 需包裹
try...catch，因为 iOS Safari 旧版本或 Firefox 仍不支持
document.getElementById('share-btn').addEventListener('click', async () => {
if (navigator.share) {
try {
await navigator.share({
title: '网页标题',
text: '分享文案',
url: window.location.href
});
} catch (err) {
console.log('分享被取消或不支持：', err);
}
} else {
// 降级：显示自定义按钮或跳转到分享链接
fallbackShare();
}
});
微信内分享必须走 JS-SDK，且需后端签名
微信浏览器禁用 navigator.share()，且所有自定义分享（朋友圈/好友）必须通过 wechat-js-sdk + 后端签名，静态页无法绕过。
- 前端无法独立完成：需后端用
access_token和jsapi_ticket对当前 URL 签名，返回signature、nonceStr、timestamp - 静态页可发起 AJAX 请求获取签名（前提是后端提供 CORS 接口），但该接口本身需鉴权，不是纯静态能解决的
- 常见错误是直接在本地 HTML 里填死
appId和假签名——微信会静默失败，控制台无报错，只看到“配置失败” - 调试必须用真实微信客户端扫码访问，开发者工具模拟无效
Twitter / Facebook / LinkedIn 等用标准分享链接（无 SDK）
这些平台仍开放简单 URL Scheme 分享，无需注册 App 或引入 SDK，适合纯静态页。注意参数编码和平台限制：
-
Twitter：用https://twitter.com/intent/tweet?url=...，支持text、hashtags，但不支持via（已废弃） -
Facebook：用https://www.facebook.com/sharer/sharer.php?u=...，仅接受u参数，其他如quote不生效 -
LinkedIn：用https://www.linkedin.com/sharing/share-offsite/?url=...，必须带协议头，否则 400 - 所有 URL 必须
encodeURIComponent，尤其是中文和特殊符号
<a href="https://twitter.com/intent/tweet?url=<code>encodeURIComponent(window.location.href)</code>&text=<code>encodeURIComponent('分享文案')</code>" target="_blank">推特分享</a>
不要硬塞 Meta 标签就以为能自动分享
很多教程说加 <meta property="og:title" content="..."> 就能让微信或微博抓取，这是误解。
立即学习“前端免费学习笔记（深入）”；
-
og:标签只对「链接被粘贴到聊天框时」的预览生效，不影响点击分享按钮的行为 - 微信内置浏览器几乎忽略
og:，坚持用自己缓存的标题（除非调用 JS-SDK 设置updateAppMessageShareData） - 微博分享链接时会读取
og:，但必须部署在公网可访问域名下，本地file://或未备案域名会被屏蔽 - 加了
og:image但图片路径是相对路径或跨域资源，会导致预览图空白——务必用绝对 HTTPS 路径
