教程站 · 微信专属分享(方案 4)接入清单
状态:骨架已就绪,落地需资质。下方 ①②③ 是硬性前置条件,齐备后约 30 分钟可上线。
一、为什么需要资质
微信规定:只有已认证的微信公众号,才能在自己的网页里调用「分享给朋友 / 分享到朋友圈」的自定义卡片。 普通浏览器(Chrome、Safari)的分享不受限——这部分(方案 1/2/3)已经上线了。 微信内置浏览器的自定义分享,必须由后端用公众号的 jsapi_ticket 给每个页面计算签名,前端才能 wx.config 成功。
二、需要准备的资质 / 信息
- 认证微信公众号(服务号或订阅号均可,但必须完成微信认证,年费 300 元那种)。
- 拿到:
AppID、AppSecret(在公众号后台「开发 → 基本配置」)。
- 拿到:
- 已备案的域名
docs.dspromo.cn(教程站域名必须已通过 ICP 备案——当前域名为腾讯云 CVM,通常已备案,需确认)。 - 微信 JS 接口安全域名:在公众号后台「公众号设置 → 功能设置 → JS 接口安全域名」里,把
docs.dspromo.cn添加进去,并按提示下载校验文件放到站点根目录。 - 部署一个后端签名接口(见
wechat-sign.example.js):提供GET /wx-jssdk-config?url=当前页URL,返回{ appId, timestamp, nonceStr, signature }。
三、落地步骤(齐备后)
- 把
wechat-sign.example.js的签名逻辑接到 docs-admin 后台(或独立小服务),配置好WX_APPID/WX_APPSECRET环境变量,并做好access_token/jsapi_ticket的缓存(7200 秒,别每次实时取,微信有频率限制)。 - 在
config.js的head里引入微信 JS-SDK:['script', { src: 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js' }] - 在
theme/index.js里增加:进入页面后请求后端签名 → 调wx.config({ debug:false, appId, timestamp, nonceStr, signature, jsApiList:['updateAppMessageShareData','updateTimelineShareData'] })→ 成功后调用wechat-share.js的setupWechatShare()(它已会自动读取页面里的og:*标签,无需重复写文案)。 - 部署 + 用微信扫一扫打开任意教程页,点右上角「···」→ 发送给朋友,看卡片标题/图是否正常。
四、已上线的部分(无需资质,现在就能用)
- ✅ favicon / apple-touch-icon(手机书架/桌面图标)
- ✅ Open Graph + Twitter Card 全站按页注入(微信/QQ/钉钉/微博 抓取链接时显示正确标题+封面)
- ✅ 站点二维码 + 首页「扫码在手机打开」横幅
- ✅ 全站「复制链接」按钮(ShareBar,右下角)
- ⬜ 微信内置浏览器自定义分享卡片(本清单内容,待资质)