将网页分享到微信带有缩略图和简介
一、概述
把网址分享到微信群或者朋友圈，不显示自定义图标，问有什么解决方法，网上也查了好多资料，做了不少的尝试，做了很久测试才成功，网上的资料不太完整，少了一点地方没有注意到图标都不会显示，这里作者特把网上没有注意到的地方整理出来，希望对有需要这个功能的朋友有一定的帮助
要实现分享网址到朋友圈显示缩略图的功能，需要注意这5点，不满足的就不用往下测试了，测试了也不会有效果的
1）需要认证公众号才行，认证的公众号才有分享接口权限
2）需要jquery脚本支持
3）图片地址必须写全，不能相对引用
4）网址不能含有特殊字符
5）网站本身必须完成工信部备案
二、制作流程
1、添加IP白名单，注意：开启了密钥后，才有IP白名单那个选项
登陆自己已认证公众号，点击“开发”—“基本配置”—“IP白名单”，将自己网站对应的IP加入即可，AppID和AppSecret记得保存好，后面备用
2、增加JS接口安全域名
点击“设置”—“公众号设置”—“功能设置”—“JS接口安全域名”，将自己的网站域名加入即可
3、引入JS文件
在自己网站的具体要分享的页面增加如下JS脚本，把脚本里面的标题、摘要、图片地址以及url根据实际情况改成自己的就可以了
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
var url = encodeURIComponent(location.href.split("#")[0]);
$.ajax({
type: "get",
url: "https://" + window.location.host + "/wxsdk/sample.php?link=" + url,// 注意如果网站没启用SSL，前方的https改为http
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(e) {
var d = e.appId,
i = e.timestamp,
t = e.nonceStr,
n = e.signature;
wx.config({
debug: 0, //如果分享失败，把0改成1开启错误提示看看
appId: d,
timestamp: i,
nonceStr: t,
signature: n,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
});
var s_title = document.title, // 分享标题
s_desc = document.getElementsByName('description')[0].content, //分享描述
s_link = location.href.split("#")[0], //分享链接
s_imgUrl = "https://www.tenfly.ltd/logo.jpg"; // 分享图标 注意如果网站没启用SSL，前方的https改为http
wx.ready(function() {
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
wx.updateAppMessageShareData({
title: s_title, // 分享标题
desc: s_desc, // 分享描述
link: s_link, // 分享链接
imgUrl: s_imgUrl
})
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.updateTimelineShareData({
title: s_title, // 分享标题
link: s_link, // 分享链接
imgUrl: s_imgUrl
})
})
}
});
</script>附：wxskd.zip 已打包好，修改里面的sample.php中
$appId = ' ';// 这里填写公众号后台获取到的AppID
$appSecret = ' ';// 这里填写公众号后台获取到的AppSecret
即可！
解压到根目录/wxsdk/
