如何添加微信朋友圈分享网站页面的小图标

响应式网站可以让用户通过手机浏览器、微信或今日头条友好的访问网站，但是当我们把网站链接发到微信中打开后通过朋友圈分享网站页面时就会出现尴尬的一幕，朋友圈中显示的页面小图标是微信默认的小图片：

如何显示自己的小图片呢？其实方法非常简单，你只需要使用浏览器打开需要分享的页面，然后点击浏览器下方的分享按钮发布到朋友圈即可：

当然这只是普通用户的解决方案，终极解决办法是在微信公众号中绑定网站安全域名，使用JS接口调用缩率图，以下为PHP代码接口，具体的方案大家可以搜索一下“微信分享到朋友圈缩略图功能(php接口)”：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><!--微信SDK-->
<script>
  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   */
    // 接口配置
    wx.config({
        debug: true,
        appId: 'wx19511f261b26ccee',
        timestamp: '1527216192',
        nonceStr: 'AXnuEFRrinkXt4t0',
        signature: 'ec77f0163366ea04d5858539f6a6666fd2afe920',
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
    });
    wx.ready(function () {
        // 分享到朋友圈
        wx.onMenuShareTimeline({
            title: '标题',
            link: 'http://aa.com/vue', // 该链接域名必须与公众号JS安全域名一致
            imgUrl: 'http://aa.com/vue/test.png' // 分享图标
            success: function () {
            }
        });
    
        // 分享给朋友
        wx.onMenuShareAppMessage({
            title: '标题',
            desc: '描述',
            link: 'http://aa.com/vue',
            imgUrl: 'http://aa.com/vue/test.png',
            type: '',    // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
            }
        });
    });
</script>