网页分享卡片自定义title和图片

86 阅读1分钟

Open Graph Protocol(开放图谱协议)

可以在head中使用meta声明需要在卡片上显示的信息

<meta property="og:type" content="article" />
<meta property="og:site_name" content="{{网站名称}}" />
<meta property="og:image" content="{{图片的资源路径}}" />
<meta property="og:image:width" content="600"> <!--有些网站可能对尺寸、体积有要求-->
<meta property="og:image:height" content="600">

在微信浏览器中收藏、分享

但是从微信浏览器上进行分享网页时,出于安全考虑,微信浏览器的分享功能通常需要在分享的网页中加载一些 JavaScript 代码,并执行相关操作,例如生成分享链接、调用微信 API 等。为了防止恶意的 JavaScript 代码对用户的隐私和安全造成威胁,微信浏览器要求网页必须属于事先设置的安全域名列表。 因此需要将 网站域名 加入到 非个人的公众号的 js安全域名列表中

image.png

紧接着走下面的流程,具体细节参考官方文档developers.weixin.qq.com/doc/offiacc…

image.png

最后在wx.ready中使用注册的jsApi即可

值得注意的是路由变化后仍然需要走一遍该流程,项目里用的是nuxt2,随之通过nuxt的plugin对全局路由切换进行拦截,从而实现全局路由分享自定义title和图片