一、微信内分享
在微信内打开链接后，点右上角【…】选择【发送给朋友】或【分享到朋友圈】，这种分享方式获取缩略图的方法：
- 方法一：在页面 body 最上方添加 300*300 像素的 img
如该图片不需要显示，可以用 css 隐藏，但不能直接对 img 设置 display: none;。
可以在父层 div 上设置 display: none; 或者对 img 设置 position: absolute; visibility: hidden;。
<div style="display:none;"><img src="/img/thumbnail.png" alt=""></div>- 方法二：通过微信 JS-SDK 的分享接口
这种方法需要一个微信公众号的 app_id，同时需要一个后端服务生成 signature。好处是可以定制分享的标题、缩略图、描述。
二、从浏览器分享
在浏览器打开链接后，点分享图标，选择【微信】，这种分享方式获取缩略图的方法：
在页面的 head 部分添加 Open Graph Metadata：
<meta property="og:type" content="website" />
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="http://www.example.com/img/thumbnail.png">
<meta property="og:url" content="http://www.example.com/">其中 og:image 影响浏览器分享时的图标，需要指定图片的完整路径。
H5分享带缩略图，描述，微信内分享到好友，朋友圈等
准备工作
需要一个认证的微信公众号，一定要确定认证
在登录微信公众平台https://mp.weixin.qq.com
在公众号设置–>功能设置，填写设置Js接口安全域名
Js安全域名是需要把微信提供的文件，放在指定域名或者目录下面可以访问的。
配置信息
下载微信参考代码，主要是获取signature
http://demo.open.weixin.qq.com/jssdk/sample.zip在获取signature之前，需要获取accessToken 和 对应的Ticket，这两个方式都比较简单，不在列举
生成签名的方式，就在微信的实例代码里面，不在赘述。
注意
获取签名等信息，必须通过服务器返回，不能再前端js生成
对应生成的ticket，accessToken，注意要缓存，也有有效期，如果不缓存，访问量大的情况下，微信有可能封号。
生成signature所需要的url必须是前端传入的模式，不能写死，写死的话，微信似乎有检测机制，不能正常的分享成功。
前端配置信息
引入微信分享的JS_SDK<script type=”text/javascript” src=”https://res.wx.qq.com/open/js/jweixin-1.2.0.js”></script> https://res.wx.qq.com/open/js/jweixin-1.2.0.js
注意，如果自己的域名模式是https模式，要使用https模式，不然会出现mixed content block，微信js不会执行
JS-sdk中的方法要在获取signature之后再执行，不然有可能会执行错误等，同时分享的调用要在wx.ready方法体里面执行，即微信配置都okay的情况下在执行。
示例代码
$.get(“获取微信signature的接口”,
{“url”:location.href.split(‘#’).toString()}).done(function (data) {
// 注意这里的url，一定要这样写，也就是动态获取，不然也不会成功的。
console.log(data);
if (data.header.code == 200) {
var wx_info = data.body.result.wx_info;
if (wx_info.signature != null) {
// 配置
wx.config({
debug: false, // 测试阶段，可以写为true，主要是为了测试是否配置成功
appId: wx_info.appId,
timestamp: wx_info.timestamp,
nonceStr: wx_info.nonceStr,
signature: wx_info.signature,
jsApiList: [‘checkJsApi’, ‘onMenuShareTimeline’, ‘onMenuShareAppMessage’, ‘onMenuShareQQ’,
‘onMenuShareQZone’]
});
var title = “”;
var desc = “”;
// 分享的图片，最好是正方形，不是也没关系，但是一定是http模式，即绝对路径，而不是服务器路劲
var imgUrl = “”;
// 这里的地址可以写死，也可以动态获取，但是一定不能带有微信分享后的参数，不然分享也是失败的
var link = “”;
// 分享给朋友、QQ、微博
var shareData = {
“imgUrl”: imgUrl,
“title”: title,
“desc”: desc,
‘link’: link
};
// 分享到朋友圈
var shareToTimeline = {
“imgUrl”: imgUrl,
“title”: title,
‘link’: link,
“desc”: desc
}
wx.ready(function() {
wx.onMenuShareTimeline(shareToTimeline);
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareQQ(shareData);
wx.onMenuShareQZone(shareData);
wx.error(function(res) {
alert(res.errMsg);
});
});
}
}
}).fail(function (msg) {
console.log(“error:” + msg);
});
https://blog.csdn.net/weixin_41829196/article/details/83383426
