HTML网页怎么插入微信分享按钮？接口调用准备流程-html教程-PHP中文网

微信分享按钮不能直接用HTML实现，因为其分享功能必须通过JS-SDK调用，而SDK要求严格完成三步校验：公众号配置安全域名、后端生成签名、前端URL与签名时完全一致，缺一不可。

html网页怎么插入微信分享按钮？接口调用准备流程

微信分享按钮为什么不能直接用 HTML 写出来？

因为微信的分享功能（比如“发送给朋友”“分享到朋友圈”）不开放给普通网页直接调用，必须走 JS-SDK，而 SDK 的使用前提是完成后端签名准备。你写个按钮本身没问题，但点击后没反应——这不是前端漏写了 JS，而是根本没通过微信校验。

JS-SDK 接口调用前必须做的三件事

缺一不可，顺序也不能乱，否则 config: invalid signature 错误会反复出现：

公众号后台开通“JS接口安全域名”，填的是你网页实际访问的完整域名（如 https://example.com），不带路径，且必须备案、ICP 和 HTTPS
后端用 access_token + jsapi_ticket 生成签名（signature），不是前端拼接出来的，更不是用 AppSecret 直接算
前端初始化时传入的 url 必须和当前页面 URL 完全一致（含 hash 前的部分，不含 # 及之后），建议用 location.href.split('#')[0] 获取

前端调用 shareTimeline / shareAppMessage 的关键点

微信官方已废弃 onMenuShareTimeline 等旧接口，现在统一走 updateAppMessageShareData 和 updateTimelineShareData，而且必须在 ready 回调里设置：

wx.ready(function () {
  wx.updateAppMessageShareData({
    title: '页面标题',
    desc: '分享描述',
    link: 'https://example.com/path',
    imgUrl: 'https://example.com/icon.png'
  });
  wx.updateTimelineShareData({
    title: '朋友圈标题',
    link: 'https://example.com/path',
    imgUrl: 'https://example.com/icon.png'
  });
});

注意：imgUrl 必须是 HTTPS、尺寸建议 120×120 以上；link 若带 query 参数，后端签名时也得带上，否则校验失败。