版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/article/details/75220835
经过测试发现，微信版本在6.5.3之前的时候，页面转发是可以显示body中第一张符合标准的img图片，主标题取的title，副标题取的是当前的链接。
但是当微信升级之后，逐渐取消了这一功能
准备阶段：
①已备案的域名
②已认证的服务号
③JS接口安全域名成功设置
一定要仔细看，一定要仔细看，一定要仔细看 重要事情说三遍
我因为没有注意分享的自定义链接也为授权域名，导致一直不能达到想要的结果。
前期准备完成之后，编写页面代码。注：根据微信团队说明文档，非js安全域名认证下的页面均不能显示缩略图。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>tttts</title>
</head>
<body>
<!--微信分享图功能-->
<div class="share-title" style="display: none">
转发分享朋友圈主标题</div>
<div class="share-substr" style="display: none">转发分享朋友圈副标题为描述</div>
<img class="share-img" style="display: none"
src="http://wx.qlogo.cn/mmopen/BWmfcibGhS1L2PmzOyziaXYJNU7gLIFkiakZS3PgACJgOHqYoBCOh1icVeibr7DiaRAU6rxia6Jf7RNcw9EVfbO7OPnqwYhTgHpwoyQ/0" width="300"
height="300" />
<img src="http://wx.qlogo.cn/mmopen/BWmfcibGhS1L2PmzOyziaXYJNU7gLIFkiakZS3PgACJgOHqYoBCOh1icVeibr7DiaRAU6rxia6Jf7RNcw9EVfbO7OPnqwYhTgHpwoyQ/0"/>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var json_wx = {
'jsonpurl' : (function(callback) {
var str, loc = window.location.href.substring(0,
window.location.href.indexOf('#') < 0 ? undefined
: window.location.href.indexOf('#'));
str = "wechatconfig/wxjssdk?callback=cb" + "&url="
+ encodeURIComponent(loc);
return str;
})(),
'createTag' : function(url) {
var tag = document.createElement("script");
tag.src = url;
document.querySelector("body").appendChild(tag);
}
}
function cb(tmp) {
wx.config({
debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId : tmp.appId, // 必填，公众号的唯一标识
timestamp : tmp.timestamp, // 必填，生成签名的时间戳
nonceStr : tmp.nonceStr, // 必填，生成签名的随机串
signature : tmp.signature, // 必填，签名，见附录1
jsApiList : [ 'checkJsApi', 'onMenuShareTimeline',
'onMenuShareAppMessage', 'onMenuShareQQ',
'onMenuShareWeibo', 'onMenuShareQZone' ]
// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
* 邮箱地址：[email protected]
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
});
wx.ready(function() {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
wx.checkJsApi({
jsApiList : [ 'getNetworkType', 'previewImage' ],
success : function(res) {
//alert(JSON.stringify(res));
}
});
var shareTit = document.querySelector(".share-title").innerHTML
.trim();
var sharesum = document.querySelector(".share-substr").innerHTML
.trim();
var shareImg = document.querySelector(".share-img").nodeName
.toLowerCase() === "div" ? document.querySelector(
".share-img").querySelector("img").src : document
.querySelector(".share-img").src;
var shareUrl = window.location.href;
// 2. 分享接口
// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareAppMessage({
title : shareTit,
desc : sharesum,
link : shareUrl,
imgUrl : shareImg,
trigger : function(res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
//alert('用户点击发送给朋友');
},
success : function(res) {
//alert('已分享');
},
cancel : function(res) {
//alert('已取消');
},
fail : function(res) {
//alert(JSON.stringify(res));
}
});
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareTimeline({
title : shareTit,
link : shareUrl,
imgUrl : shareImg,
trigger : function(res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
///alert('用户点击分享到朋友圈');
},
success : function(res) {
//alert('已分享');
},
cancel : function(res) {
//alert('已取消');
},
fail : function(res) {
//alert(JSON.stringify(res));
}
});
// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareQQ({
title : shareTit,
desc : sharesum,
link : shareUrl,
imgUrl : shareImg,
trigger : function(res) {
//alert('用户点击分享到QQ');
},
complete : function(res) {
//alert(JSON.stringify(res));
},
success : function(res) {
//alert('已分享');
},
cancel : function(res) {
//alert('已取消');
},
fail : function(res) {
//alert(JSON.stringify(res));
}
});
// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareWeibo({
title : shareTit,
desc : sharesum,
link : shareUrl,
imgUrl : shareImg,
trigger : function(res) {
//alert('用户点击分享到微博');
},
complete : function(res) {
//alert(JSON.stringify(res));
},
success : function(res) {
///alert('已分享');
},
cancel : function(res) {
//alert('已取消');
},
fail : function(res) {
//alert(JSON.stringify(res));
}
});
// 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
wx.onMenuShareQZone({
title : shareTit,
desc : sharesum,
link : shareUrl,
imgUrl : shareImg,
trigger : function(res) {
//alert('用户点击分享到QZone');
},
complete : function(res) {
//alert(JSON.stringify(res));
},
success : function(res) {
//alert('已分享');
},
cancel : function(res) {
//alert('已取消');
},
fail : function(res) {
//alert(JSON.stringify(res));
}
});
});
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log(res, error);
});
}
json_wx.createTag(json_wx.jsonpurl);
</script>
</html>
OK