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>

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

H5实现微信分享自定义地图
这几天紧急开发一个拼团+砍价的H5微信小商城.技术用的是:前端Vue+Vant快速开发组件框架.后端java. 使用微信js-sdk流程图: 微信公众平台测试帐号申请地址:https://mp.wei ...
使用JS-SDK自定义微信分享效果
之前做的一个h5页面,按照需求得分享到朋友圈he好友,默认分享链接的标题he内容以及图标都是微信默认的,下面是一个大神进行自定义的分享链接的代码,看到了记录下: 前言刚进入一家新公司,接到的第一个任 ...
手把手带你使用JS-SDK自定义微信分享效果
前言刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题,摘要),一开始真是一脸懵逼,在网上搜索了半天之后大概有了方案.值得注意的是一开始搜索到的解决方案全是调用微 ...
ios 微信分享重新编码链接_微信民众号IOS端复制链接失足，安卓端分享链接翻开只能进入首页等题目的处理...
近来在做某个需要在微信中翻开的项目,部份页面会经由过程微信分享或复制链接分享给其别人,然后就遇到了以下坑: 1.IOS端复制链接或在其他浏览器中翻开时,如果原网站链接原本应当是"http:/ ...
android微信分享怎么自定义样式,自定义微信分享样式教程
使用场景: 当网站浏览者访问你的网站的时候,情不自禁分享.然而,样式怎么这么挫? 分享别人的网站链接,却是这样的样式,为什么呢? 答案:你没有设置"自定义微信分享样式" 共有三个 ...
android微信分享怎么自定义样式,自定义微信分享样式设置教程
一.功能效果自定义微信分享可以设置个性化的分享图片.标题.描述,让分享内容更加受到用户的喜爱和欢迎. 二.功能说明 [版本]网站标准版及以上 [前提]1.需要授权已认证的公众号(支持服务号.订阅号) ...
从qq或微信上打开页面链接，直接跳转到360首页
开机后发现从QQ或微信上打开页面链接时,总是跳转到360首页解决方法打开安全防护中心选择浏览器防护体系点击默认浏览器防护进行主页修改完成这4步,问题就可以成功解决.
微信分享第三方连接（H5页面）自定义缩略图、标题、描述（显示分享框，而不是链接）（微信JS-SDK）
首先要说明几个分享相关的问题: 现在微信不支持自定义按钮分享组件(也就是说不能点击某个按钮分享),只能通过微信右上角的三个小点,点击后选择分享给朋友,朋友圈等. 当前从企业微信分享到微信好友和微信朋友 ...
html页面微信分享如何隐藏链接,微信分享网页链接缩略图不显示解决方法
微信分享网页不显示缩略图片的原因为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK"分享到朋友圈"及"发送给朋友"接口,自定义的分享 ...

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

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

1、标题(上图中红色框内文字)

2、小缩略图(上图中红色箭头所指图片)

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

最新文章

热门文章