独立域名站点如何配置微信分享?
概述
在已绑定独立域名的 Baklib 应用上,可配置微信 JS-SDK 分享,使链接在微信内以卡片形式展示标题、摘要与封面。须使用已认证的服务号,并在公众号与 Baklib 两侧完成域名验证。
前置条件
- 已认证成功的微信公众号(服务号)。
- 应用站点已绑定独立域名(非仅试用子域)。
- 公众号已开通 分享接口 权限(设置与开发 → 接口权限)。
若主题未内置微信分享,须先在模板中集成
weixin_share 相关能力,见 weixin_share_tag。- 确保模板引用了微信分享的 js 标签
<!-- 在文件:layout/theme.liquid -->
<html lang="{{ site.language }}">
<head>
<!-- weixin share -->
{{ 'baklib/shared/main.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}
{{ 'baklib/shared/main.js' | asset_url | script_tag: data-turbo-track: 'reload' }}
{% 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 %}
</head>
...
- 确保模板配置了微信分享的属性 { “name”: “微信配置”, “settings”: [ { “id”: “weixin_app_id”, “type”: “text”, “label”: “开发者ID(AppID)”, “info”: “微信开发者平台中获取” }, { “id”: “weixin_app_secret”, “type”: “text”, “label”: “开发者密码(AppSecret)”, “info”: “微信开发者平台中获取” }, { “id”: “weixin_enabled”, “type”: “checkbox”, “label”: “是否启用微信分享”, “default”: false, “info”: “提供站点页面微信分享的能力</br>请在微信公众号中配置ip白名单(ip: ${service_ip}), 配置后将有一段时间的生效延迟。</br>检查是否开启微信分享权限,微信公众号/设置与开发/开发接口管理: 网页服务/分享接口。</br>分享链接是否为卡片:从卡片形式进入分享卡片形式,链接形式进入分享链接形式;网页初始链接分享可由公司的服务号中或收藏后进行卡片分享(此规则为微信分享限制)。” }, { “id”: “weixin_debug”, “type”: “checkbox”, “label”: “是否开启debug提示”, “default”: false, “info”: “请仅在配置阶段开启此选项;开启后在访问前端站点时若未正确配置微信分享将自动提示错误信息” } ] }
操作步骤
步骤一:配置 JS 接口安全域名
- 登录微信公众号后台 → 公众号设置 → 功能设置 → JS接口安全域名。
- 下载微信提供的 验证文件(
.txt)。 - 在域名输入框填写独立域名(如
docs.example.com)并提交。
步骤二:在 Baklib 上传校验文件
- 进入应用 应用设置 → 域名管理 → 目标域名 配置。
- 在 检验文件 区域填入下载的文件名(含
.txt后缀)与文件内容,保存。
步骤三:填写 AppId 与 AppSecret
- 在公众号 基本配置 获取 开发者 ID(AppId) 与 开发者密码(AppSecret)。
- 在公众号 IP 白名单 中添加 Baklib 授权 IP(以应用后台「微信分享」配置页提示为准)。
- 在 Baklib 应用设置 → 界面展示 → 微信分享 中填入 AppId、AppSecret 并开启分享。
- 调试时可开启 debug 提示;配置完成后关闭 debug 并保存,否则可能影响正常展示。
预期结果:在微信中分享站点链接时显示卡片(标题、描述、缩略图)。
卡片效果说明
- 可将页面收藏后在收藏中分享,或以卡片形式转发。
- 也可将链接发到公众号对话框,打开后再使用微信分享菜单。