不用备案也能支持微信自定义分享
Posted 公子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了不用备案也能支持微信自定义分享相关的知识,希望对你有一定的参考价值。
我们知道,在微信中打开网页,使用右上角的 ...
分享给朋友/朋友圈,是可以使用 JS SDK 自定义分享卡片文案的。为了让分享内容能够更好的受到监管,从早期会自动读取网页内第一张大图到后期使用 JS SDK 自定义分享,再到后期需要做域名绑定关联,自定义分享卡片内容的流程变的越来越复杂。
目前如果你的网站想要增加微信自定义分享文案的支持,需要准备以下两件事情:
- 确保你的网站域名已备案,并被添加到了一个已认证的公众号的“JS安全域名”中。
- 提供服务端支持,用于与微信交互获取 access token 和 jsapi ticket 并计算获得最终的 signature,用于在前端调用微信 JS SDK 时进行校验。
具体的流程可以参见微信开放文档。可以看到要想实现自定义分享文案,除了开发流程之外,你还需要域名备案和公众号认证,这两个做过的人肯定知道会有多头疼了。而最蛋疼的是,我的博客域名后缀 .org
目前是不支持备案的,难道就没有办法了吗?
wxhermit
为了能让未备案网站也能自定义分享文案,我开发了 wxhermit 这个项目。它的原理非常简单,基本就是在已备案域名下 <iframe>
嵌套展示未备案域名,并通过 postMessage
通信,将自定义分享的文案传递到父页面。最终实现了任意网站分享自定义的需求。
当然它的本质还是使用基于最开始的备案域名网站进行分享。由于微信分享需要提供已认证公众号并绑定已备案域名,一个已认证公众号只能绑定至多 5 个安全域名,条件颇为苛刻。针对 5 个以上的域名,部分域名无法备案的情况,要自定义微信分享的文案就非常麻烦。本方案比较好的迂回解决该问题。
如何使用
在服务端使用 Docker 启动服务。其中 WECHAT_ID
和 WECHAT_SECRET
是在微信公众号后台开发-基本配置中获取的“开发者ID”和“开发者密码”。而 ALLOW_HOST_LIST
是为了避免服务被滥用,允许开发者配置允许使用内嵌服务的网站。可以使用逗号拼接多个域名,例如 imnerd.org,eming.li
。不在该列表中的域名会直接跳转会源地址。
docker run
-e WECHAT_ID=<WECHAT_ID>
-e WECHAT_SECRET=<WECHAT_SECRET>
-e ALLOW_HOST_LIST=<ALLOW_HOST_LIST>
-p 8360:8360
lizheming/wxhermit
而对于需要使用该服务的网站,需要在页面中增加以下代码用于自定义分享文案。其中 wxhermit
是固定值,其它的为自定义文案内容。
<script>
if (window.parent !== window) {
window.parent.postMessage({
type: \'wxhermit\',
title: \'自定义分享的标题\',
desc: \'自定义分享的描述\',
imgUrl: \'自定义分享的封面图\'
}, \'*\');
}
</script>
配置好后就可以在微信使用 <domain>/?url=<url>
来访问了,其中 <domain>
是你的已绑定的安全域名,<url>
则是在 ALLOW_HOST_LIST
中配置的可使用域名下的网址。
后记
通过代理的形式很好的解决了我未备案域名需要自定义分享的问题。为了能让体验更自然,我在我的网站中增加了在微信中自动跳转至该嵌套页面的逻辑。
<script>
if(/micromessenger/i.test(navigator.userAgent) && window.parent === window) {
location.href = \'https://wechat.75.team/?url=\' + encodeURIComponent(location.href);
}
</script>
不过它的缺点也很明显,本质相当于将所有的域名都挂靠在某个安全域名之下。所以在微信下拉显示网站地址的时候都还是显示该安全域名。而且子域如果出现内容问题的话风险也全部在该安全域名上,所以建议是 ALLOW_HOST_LIST
配置个人可控域名。
除了我的这种方案之外,也有配置 <meta>
信息通过 Safari 调用系统的分享功能设置封面图和文案的方式,以及通过 QQ 浏览器分享自动获取页面第一张大图的形式自定义分享卡片。不过它们在可定制和确定性上都要稍微弱一些,可以根据实际情况选择使用。
以上是关于不用备案也能支持微信自定义分享的主要内容,如果未能解决你的问题,请参考以下文章