HTML如何设置微信分享_html微信分享链接卡片配置【最全】

微信分享卡片必须通过JS-SDK调用updateAppMessageShareData/updateTimelineShareData设置，不依赖meta标签；图片需HTTPS、≥300×300px且分享时可匿名访问；iOS缓存分享数据，安卓需每次重设。

美观卡片不会在微信内分享链接时自动出现。特定 metadata 及签名配置须由 JS-SDK 注入；未接入 JS-SDK，仅凭 <meta> 标签不会产生任何效果。

为什么添加了 <meta name="description"> 仍然不显示摘要？

微信客户端不会读取 HTML 的 <meta> 标签并不能生成分享卡片。后端签发的 JS-SDK 权限与前端调用的内容才会获得信任 updateAppMessageShareData / updateTimelineShareData 接口。

• 标题、描述和图片等全部视觉字段，都必须通过 JS 调用设置，并且只能在用户触发分享动作之前生效
• <meta> 仅对 QQ、微博、浏览器直链等非微信环境有效
• 否则微信可能退回默认图标；图片尺寸建议达到 ≥ 300×300px，并且传输协议必须为 HTTPS

JS-SDK 初始化失败最常见的三个原因

常见错误信息：config: invalid signature 或 permission denied，根本原因都在签名环节。

• 后端生成 jsapi_ticket 时若不设置缓存，就会在每次请求中重新拉取（有效期2小时），进而出现频率超限或签名过期
• 签名使用的 nonceStr 和 timestamp 若未交给前端，或者前端组装 URL 时没有执行「键名升序 + & 拼接」规则（比如将 jsapi_ticket 写成 jsapi_tiket）
• 调用 wx.config() 的 jsApiList 中遗漏了 updateAppMessageShareData（强制要求已适用于安卓 8.0.30+ 和 iOS 微信 7.0.12+）

updateAppMessageShareData 和 updateTimelineShareData 应该如何选择？

「分享到朋友圈」由后者控制；前者对应「发送给朋友」及「分享到聊天」卡片。二者调用必须独立完成，同一组参数不能重复使用。

立即学习“前端免费学习笔记（深入）”；

• 朋友圈卡片不支持 desc 字段，只会显示 title 和 imageUrl；好友分享则必须提供 desc，不然摘要会为空
• 两个接口都必须在 wx.ready 应在回调内部运行，并于每次分享发生前完成重置（例如监听 beforeunload 或在路由发生变化后重新 set）
• 如果页面属于单页应用（SPA），location.href 签名校验会因使用 base URL 而失败，必须改为包含 hash 的当前真实 URL

分享行为对比：iOS vs 安卓的关键区别

首次配置的分享数据会被 iOS 微信缓存，即使后续没有调用 updateAppMessageShareData 旧内容也可能继续生效；安卓却会在页面每次打开时清除数据，因此必须主动调用。

• 不能依据 iOS 单端表现便认定 OK，测试必须在两台设备上分别完成
• 安卓环境下分享没有响应时，应先排查异步加载是否导致 wx.ready 分享数据又在触发之后遭到覆盖（比如图片 URL 异步返回时才再次 set，实际时机已经错过）
• 不要把不断随版本变化的微信内置浏览器 UA 作为依赖 navigator.userAgent 进行兼容性判断，应以 JS-SDK 返回的 ready / error 状态作为依据

分享按钮被用户点击的一瞬间，微信客户端才会抓取并缓存卡片图片，并非“设完就生效”，这一点最容易遗漏。图片 URL 若被后端施加权限控制（如携带临时 token），分享发生时必须仍允许匿名访问该 URL；不满足此条件，卡片将出现空白图。