Halo-WechatShare-PhyX.jpg

Wechat Share(自定义社交分享卡片)

前言

每次将链接直接发送给好友或朋友圈,多少有点“像没穿衣服就出门”的意思。

既然微信官方都把工具递到手里了,我这种对细节有点较劲的人,肯定不能装看不见,该讲究还是得讲究。

于是琢磨了一圈,干脆基于 Halo 做成插件:一来统一规范,二来小项目太多,顺手收编进一个地方,省得东一块西一块,自己都找不到。

支持:微信、QQ卡片

写在前面

在开始使用本插件之前,请先完成以下必要配置,否则微信分享卡片将无法正常生效:

配置公众号信息:

在后台填写你的公众号 AppIdAppSecret,用于获取微信 JS-SDK 权限。

设置 JS 接口安全域名:

前往微信公众号后台,在「开发 → 接口权限」中配置 JS 接口安全域名,确保当前网站域名已加入白名单。

⚠️ 未配置安全域名时,微信将无法正确获取自定义分享信息。

账号类型说明:

支持以下账号类型:

  • 公众/服务号

  • 测试号

功能

  • 多种卡片类型:支持 网址 / 图片 / 音频 / 视频 / 文件 专属页以及分享封装为卡片样式;

  • 数据看板:汇总访问指标、近七日趋势、访问量排行、访问明细筛选与详情

  • 插件设置:公众号 AppId / AppSecret、公开路径前缀(默认 /wechat-share);

  • 分享页 HTML 在微信内置浏览器中注入 jweixin,更新朋友圈 / 会话分享数据。

控制台预览

前台预览

使用介绍

安装插件

在 Halo 应用市场安装,或手动上传本项目构建后的插件包。

https://www.halo.run/store/apps/app-c6kw29tr

插件路径

Halo 控制台:系统 → 工具 → 微信分享卡片

插件配置

配置项

说明

公众号 AppId / AppSecret

正式号或测试号均可

公开路径前缀

默认 /wechat-share;保存后与站点根拼接生成对外路径

实验性功能

访客IP归属查询

微信公众平台侧(必须):

  • 在公众号后台配置JS 接口安全域名(域名不含 http(s):// 与路径),须与你在微信内打开的分享页域名一致。

  • 测试号:将测试号提供的 AppId / AppSecret 填入本插件;测试号同样需在后台维护「JS 接口安全域名」及相关接口权限,流程与正式号类似。👇

    https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

新建卡片

填写标题、摘要、封面图 URL、跳转链接。

在微信或QQ中使用

将生成的二维码在微信或QQ内扫描打开,按页面提示从右上角菜单发起分享即可。

注意,必须是通过扫描二维码才可达成卡片样式,至于为什么不能通过生成的链接访问再分享成卡片我也不知道,能用就行,有空我再研究。

公开 URL 说明

假定 Halo 外部访问地址为 https://example.com,公开路径前缀为 /wechat-share(默认):

路径

作用

/wechat-share/share/{sid}

分享落地页(推荐;兼容 QQ 丢 query)

/wechat-share/share?sid={sid}

同上(旧 query 形式,仍支持)

/wechat-share/go/{sid}

302 跳转到卡片配置的落地 URL(链接卡片微信分享用)

/wechat-share/go?sid={sid}

同上(旧 query 形式,仍支持)

修改「公开路径前缀」并保存后,对外路径随之变化(别忘了更新已发出的推广链接)。

微信域名校验

该方式通过 Nginx 临时暴露校验文件,示例:

在站点配置中添加:

location /MP_verify_xxxxx.txt {
    root /www/wechat_verify;
}

创建目录并放入文件:

mkdir -p /www/wechat_verify
mv MP_verify_xxxxx.txt /www/wechat_verify/

重载 Nginx:

nginx -s reload

验证:

https://你的域名/MP_verify_xxxxx.txt

开发及构建文档

https://avrinbai.cn/docs/wechat-share/Development

开源地址

https://github.com/Avrinbai/halo-plugin-wechat-share