分享按钮需先判断navigator.share兼容性,否则报错;微信内须用JS-SDK配置updateAppMessageShareData;微博等平台需URL编码并正确拼接参数;图片须HTTPS、尺寸合规且取自主图DOM。

分享按钮点击后没反应,检查 navigator.share 是否可用
现代浏览器(Chrome 76+、Edge 79+、Samsung Internet 15.0+)支持 Web Share API,但 Safari 和部分安卓 WebView 仍不支持。直接调用 navigator.share() 前必须判断:
if (navigator.share) {
navigator.share({
title: document.title,
text: '看看这个商品',
url: window.location.href
});
} else {
// 降级方案:跳转到各平台分享链接
}不加判断就调用会抛出 TypeError: navigator.share is not a function,尤其在 iOS Safari 或微信内置浏览器里必报错。
微信内无法调起原生分享,得用 JS-SDK 配置 updateAppMessageShareData
微信浏览器屏蔽了所有非官方分享入口,navigator.share 完全无效。必须引入微信 JS-SDK,并在页面加载后完成签名配置。关键点:
- 后端需用
access_token和当前 URL 获取jsapi_ticket,再生成签名 - 前端初始化后,必须在用户触发行为(如点击按钮)之后才能调用
updateAppMessageShareData,否则 iOS 微信会静默失败 - 分享标题/描述/图片受限制:图片必须是 HTTPS、尺寸建议 ≥ 200×200px,且域名需在公众号JS安全域名白名单中
微博、QQ 等平台用 URL Scheme 时,url 必须 encode,且不能含空格或中文未编码字符
这类平台不走 API,靠拼接跳转链接实现,例如微博分享:
https://service.weibo.com/share/share.php?title=商品名&url=https%3A%2F%2Fexample.com%2Fitem%2F123常见错误:
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
- 直接拼接未
encodeURIComponent()的中文标题 → URL 解析中断,分享内容为空 - 把整个 URL 当作参数再套一层 encode → 多余编码导致目标页打不开
- 漏掉
url参数或写成link(微博认url,QQ 认url,但 LinkedIn 要url+title,参数名不统一)
shareToWeibo(title, url) { window.open(`https://service.weibo.com/share/share.php?title=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`); }
分享数据动态取自商品详情页,别硬编码 document.title 或 location.href
电商页常有 SEO 标题(如“【新品】iPhone 15 Pro|官网直供|限时赠品”),但分享时应取真实商品名+规格,比如“iPhone 15 Pro 256GB 钛金属”。更关键的是图片:
- 不要用
<meta property="og:image">的值——它可能指向大图或轮播第一张,而分享要求单张静态图 - 优先读取商品主图 DOM 元素的
src,并确保是 HTTPS、尺寸合规(微信要求 ≥ 300×300px) - 若主图是懒加载,需监听
load事件后再取值,否则拿到的是占位图 URL


















