weixin_share_tag

User 69e88e27

发布于：2025-08-29

微信分享功能

weixin_share_tag 是一个 Liquid 标签，用于在站点页面中集成 微信网页分享功能。标签会自动注入微信 JS-SDK 的配置和分享信息，让用户可以直接分享到微信好友和朋友圈。

启用 微信网页分享 功能后，用户通过微信浏览器访问页面时，可以直接点击「发送给朋友」「分享到朋友圈」，并展示来自站点和页面的分享标题、描述、图片等信息。

模板开发使用

1. 在布局中插入标签

在 layout/theme.liquid 文件中（通常在 <head> 中），加入：

{% weixin_share_tag 
   app_id: site.settings.weixin_app_id, 
   app_secret: site.settings.weixin_app_secret, 
   debug: site.settings.weixin_debug, 
   enabled: site.settings.weixin_enabled 
%}

2. 提供后台配置参数

在 config/settings_schema.json 中，定义相关配置项, 以方便由模板创建的站点在后台管理中配置相关的微信分享参数：

微信 AppID（必填）
微信 AppSecret（必填）
启用微信分享（勾选后生效）
开启调试模式（调试时勾选，会在签名无效、配置错误等时弹窗提示）

....other
{
  "name": "t:schema.settings.weixin_share.title",
  "settings": [
    {
      "id": "weixin_app_id",
      "type": "text",
      "label": "开发者ID(AppID)",
      "info": "<a href='https://mp.weixin.qq.com/cgi-bin/frame'>微信公众号/设置与开发/开发接口管理</a>中获取"
    },
    {
      "id": "weixin_app_secret",
      "type": "text",
      "label": "开发者密码(AppSecret)",
      "info": ""
    },
    {
      "id": "weixin_enabled",
      "type": "checkbox",
      "label": "是否启用微信分享",
      "default": false,
      "info": "提供站点页面微信分享的能力</br>1. 请在微信公众号中配置ip白名单（ip: ${service_ip}）, 配置后将有一段时间的生效延迟。</br>2. 检查是否开启微信分享权限，微信公众号/设置与开发/开发接口管理: <a href='https://mp.weixin.qq.com/cgi-bin/frame'>网页服务/分享接口</a>。</br>3. 分享链接是否为卡片：从卡片形式进入分享卡片形式，链接形式进入分享链接形式；网页初始链接分享可由公司的服务号中或收藏后进行卡片分享（此规则为微信分享限制）。"
    },
    {
      "id": "weixin_debug",
      "type": "checkbox",
      "label": "是否开启debug提示",
      "default": false,
      "info": "请仅在配置阶段开启此选项；开启后在访问前端站点时若未正确配置微信分享将自动提示错误信息"
    }
  ]
}

微信分享配置说明

1. AppID 和 AppSecret 获取方式

登录微信公众平台。
进入 开发 > 基本配置。
在这里可以找到：
- AppID（应用ID）
- AppSecret（应用密钥）
⚠️ 注意：必须是 认证过的服务号 才能使用分享接口。

2. IP 白名单配置

微信要求服务器调用 AccessToken 接口的 IP 必须在白名单中。

登录微信公众平台 → 开发 > 基本配置。
在 IP 白名单 中添加 IP
模版配置在info中${service_ip} 会自动替换为你当前站点服务器的出口 IP，可在站点配置中查看
白名单配置保存后，通常需要等待 几小时左右 才会生效。

3. 检查分享权限

检查是否开启微信分享权限，微信公众号/设置与开发/开发接口管理网页服务/分享接口

服务号必须要认证才有接口使用权限

4. 分享效果说明

分享内容来源

标题：页面标题（title）+ 站点名称
描述：页面描述（description）
图片：页面设置的 icon 或 image_src，若没有则回退为站点 favicon 或系统 logo
链接：当前页面 URL

这些内容会自动从页面或站点的 Meta 标签 中提取（如 title, description, image_src），若没有则回退到站点 favicon 或系统默认 logo。

分享形式

卡片分享：从公众号菜单、收藏等入口进入页面 → 分享时显示带标题、描述、缩略图的卡片。
链接分享：直接复制页面链接打开 → 分享时可能仅显示链接（这是微信的规则限制）。

常见问题（FAQ）

1. 为什么分享按钮看不到？

分享按钮由微信浏览器提供，标签只负责配置分享内容。

2. 分享信息不正确？

请检查页面 Meta 标签（title、description、image_src），或在站点配置 favicon。

3. 报错 “不在 IP 白名单内”？

请确认已在微信公众号后台配置了 ${service_ip} 的服务器 IP。

4. 为什么分享形式不同？

微信规定：从公众号入口进入的链接分享为卡片形式，直接复制的链接分享可能是纯链接。

5. 调试用法？

开启 weixin_debug，在签名失败时会弹窗提示错误，方便排查问题。

提交反馈