一、概述

把网址分享到微信群或者朋友圈，不显示自定义图标，问有什么解决方法，网上也查了好多资料，做了不少的尝试，做了很久测试才成功，网上的资料不太完整，少了一点地方没有注意到图标都不会显示，这里作者特把网上没有注意到的地方整理出来，希望对有需要这个功能的朋友有一定的帮助

要实现分享网址到朋友圈显示缩略图的功能，需要注意这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.zip

解压到根目录/wxsdk/