Skip to content

教程站 · 微信专属分享(方案 4)接入清单 ​

状态:骨架已就绪,落地需资质。下方 ①②③ 是硬性前置条件,齐备后约 30 分钟可上线。

一、为什么需要资质 ​

微信规定:只有已认证的微信公众号,才能在自己的网页里调用「分享给朋友 / 分享到朋友圈」的自定义卡片。 普通浏览器(Chrome、Safari)的分享不受限——这部分(方案 1/2/3)已经上线了。 微信内置浏览器的自定义分享,必须由后端用公众号的 jsapi_ticket 给每个页面计算签名,前端才能 wx.config 成功。

二、需要准备的资质 / 信息 ​

  1. 认证微信公众号(服务号或订阅号均可,但必须完成微信认证,年费 300 元那种)。
    • 拿到:AppID、AppSecret(在公众号后台「开发 → 基本配置」)。
  2. 已备案的域名 docs.dspromo.cn(教程站域名必须已通过 ICP 备案——当前域名为腾讯云 CVM,通常已备案,需确认)。
  3. 微信 JS 接口安全域名:在公众号后台「公众号设置 → 功能设置 → JS 接口安全域名」里,把 docs.dspromo.cn 添加进去,并按提示下载校验文件放到站点根目录。
  4. 部署一个后端签名接口(见 wechat-sign.example.js):提供 GET /wx-jssdk-config?url=当前页URL,返回 { appId, timestamp, nonceStr, signature }。

三、落地步骤(齐备后) ​

  1. 把 wechat-sign.example.js 的签名逻辑接到 docs-admin 后台(或独立小服务),配置好 WX_APPID / WX_APPSECRET 环境变量,并做好 access_token / jsapi_ticket 的缓存(7200 秒,别每次实时取,微信有频率限制)。
  2. 在 config.js 的 head 里引入微信 JS-SDK: ['script', { src: 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js' }]
  3. 在 theme/index.js 里增加:进入页面后请求后端签名 → 调 wx.config({ debug:false, appId, timestamp, nonceStr, signature, jsApiList:['updateAppMessageShareData','updateTimelineShareData'] }) → 成功后调用 wechat-share.js 的 setupWechatShare()(它已会自动读取页面里的 og:* 标签,无需重复写文案)。
  4. 部署 + 用微信扫一扫打开任意教程页,点右上角「···」→ 发送给朋友,看卡片标题/图是否正常。

四、已上线的部分(无需资质,现在就能用) ​

  • ✅ favicon / apple-touch-icon(手机书架/桌面图标)
  • ✅ Open Graph + Twitter Card 全站按页注入(微信/QQ/钉钉/微博 抓取链接时显示正确标题+封面)
  • ✅ 站点二维码 + 首页「扫码在手机打开」横幅
  • ✅ 全站「复制链接」按钮(ShareBar,右下角)
  • ⬜ 微信内置浏览器自定义分享卡片(本清单内容,待资质)

大圣云推 · 软件使用教程 · 管理员可登录后台在线更新

分享这篇教程: