一、概述

把網(wǎng)址分享到微信群或者朋友圈，不顯示自定義圖標，問有什么解決方法，網(wǎng)上也查了好多資料，做了不少的嘗試，做了很久測試才成功，網(wǎng)上的資料不太完整，少了一點地方?jīng)]有注意到圖標都不會顯示，這里作者特把網(wǎng)上沒有注意到的地方整理出來，希望對有需要這個功能的朋友有一定的幫助

要實現(xiàn)分享網(wǎng)址到朋友圈顯示縮略圖的功能，需要注意這5點，不滿足的就不用往下測試了，測試了也不會有效果的

1）需要認證公眾號才行，認證的公眾號才有分享接口權(quán)限
2）需要jquery腳本支持
3）圖片地址必須寫全，不能相對引用
4）網(wǎng)址不能含有特殊字符
5）網(wǎng)站本身必須完成工信部備案

二、制作流程

1、添加IP白名單，注意：開啟了密鑰后，才有IP白名單那個選項

登陸自己已認證公眾號，點擊“開發(fā)”—“基本配置”—“IP白名單”，將自己網(wǎng)站對應的IP加入即可，AppID和AppSecret記得保存好，后面?zhèn)溆?/p>

2、增加JS接口安全域名

點擊“設置”—“公眾號設置”—“功能設置”—“JS接口安全域名”，將自己的網(wǎng)站域名加入即可

3、引入JS文件

在自己網(wǎng)站的具體要分享的頁面增加如下JS腳本，把腳本里面的標題、摘要、圖片地址以及url根據(jù)實際情況改成自己的就可以了

<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,// 注意如果網(wǎng)站沒啟用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 = "http://www.zhengxing26009.org.cn/logo.jpg"; // 分享圖標 注意如果網(wǎng)站沒啟用SSL，前方的https改為http

            wx.ready(function() {
                // 自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容（1.4.0）
                wx.updateAppMessageShareData({
                    title: s_title, // 分享標題
                    desc: s_desc, // 分享描述
                    link: s_link, // 分享鏈接
                    imgUrl: s_imgUrl
                })
                // 自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內(nèi)容（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/