关于微信:不用备案也能支持微信自定义分享

47次阅读

共计 1760 个字符，预计需要花费 5 分钟才能阅读完成。

咱们晓得，在微信中关上网页，应用右上角的 ... 分享给敌人 / 朋友圈，是能够应用 JS SDK 自定义分享卡片文案的。为了让分享内容可能更好的受到监管，从晚期会主动读取网页内第一张大图到前期应用 JS SDK 自定义分享，再到前期须要做域名绑定关联，自定义分享卡片内容的流程变的越来越简单。

目前如果你的网站想要减少微信自定义分享文案的反对，须要筹备以下两件事件：

确保你的网站 域名已备案 ，并被增加到了一个 已认证的公众号 的“JS 平安域名”中。
提供服务端反对，用于与微信交互获取 access token 和 jsapi ticket 并计算取得最终的 signature，用于在前端调用微信 JS SDK 时进行校验。

具体的流程能够参见微信凋谢文档。能够看到要想实现自定义分享文案，除了开发流程之外，你还须要域名备案和公众号认证，这两个做过的人必定晓得会有多头疼了。而最蛋疼的是，我的博客域名后缀 .org 目前是不反对备案的，难道就没有方法了吗？

为了能让未备案网站也能自定义分享文案，我开发了 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 浏览器分享主动获取页面第一张大图的模式自定义分享卡片。不过它们在可定制和确定性上都要稍强劲一些，能够依据理论状况抉择应用。

正文完