H5 -- 自定义微信分享第三方页面链接的标题和小缩略图

需求:自定义微信分享第三方页面链接的标题和小缩略图(如图)


2018.6.4更新线 - - - - - - - - - - - - - - - - - -
更新:微信6.5.5版本以后调整了分享规则,针对的是没有接入公众号的网页分享,必须接入微信认证公众号!
查了下微信公众平台,以下做法只能在微信收藏内及收藏中长按‘转发’时能生成缩略图;而页面内的‘发送给朋友’及‘分享到朋友圈’分享功能均失效了。。给各位博友带来误解,说声抱歉。。
正确做法


微信分享第三方页面链接

1、标题(上图中红色框内文字)
  • 生成标准:自动获取当前页面的标题,即title里面的内容
  • 自定义方法:设置页面标题即可,可使用:document.title = “标题内容”,动态设置。
2、小缩略图(上图中红色箭头所指图片)
  • 生成标准(以下标准来自微信公众平台)
  • 微信默认标准
    注:若页面中没有此标准的图片,则会显示箭头1处的无图样式。
  • 自定义方法在body标签内的最前面放入一张宽度为屏幕宽度80%的正方形img 。(如果不想显示可将其隐藏,微信仍能提出来作小缩略图)
<body>
	<!--此图片必须放在body标签的最前面,且高度必须为屏幕宽度的80%  -->
	<img src="你想要的小缩略图的路径" style="position:absolute; top:0; left:0;  width: 80%; z-index:-1;opacity: 0; ">

	<!-- 此处放其他元素 -->
	
</body>

猜你喜欢

转载自blog.csdn.net/weixin_41076513/article/details/80098081