“微信分享卡片调用第一张大度300px的图”早已成为一种非专业的做法，取而代之的是门槛更高的JS-SDK。一个网站、一篇文章通过微信分享到朋友圈、微信群已经成了家常便饭，但是分享卡片没有小图标？这是肯定不行的。

然而自2017年4月25起，微信官方调整了JS-SDK分享卡片的策略，其域名或路径必须与当前页面对应的公众号JS安全域名一致，否则将调用失败。所以，首先需要有一个已经认证的微信公众号。

微信JS-SDK的接入步骤

一、绑定域名：

登录微信公众平台，进入“公众号设置”的“功能设置”里，填写“JS接口安全域名”，并认证。

二、通过config接口注入权限验证配置：

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("appid", "appsecret");//填写开发者中心你的开发者ID
$signPackage = $jssdk->GetSignPackage();
?>
<script>
 wx.config({
   debug:  false,
   appId: '<?php echo $signPackage["appId"];?>',
   timestamp:'<?php echo $signPackage["timestamp"];?>',
   nonceStr: '<?php echo $signPackage["nonceStr"];?>',
   signature: '<?php echo $signPackage["signature"];?>',
   jsApiList: [
       'checkJsApi',
       'onMenuShareTimeline',
       'onMenuShareAppMessage',
       'onMenuShareQQ',
       'onMenuShareWeibo',
       'onMenuShareQZone'
   ]
 });
 </script>

jssdk.php为微信官方提供的DEMO，按需微调即可，本文末有提供，同时有java、python等语言。

三、通过ready接口处理成功验证：

config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

<script> 
wx.ready(function() {
    wx.onMenuShareTimeline({
        title: '济南贯日信息技术有限公司',
        link: 'https://www.ioperat.com',
        imgUrl: 'https://www.ioperat.com/images/wxlogo.jpg',
        success: function() {},
        cancel: function() {}
    });
    wx.onMenuShareQQ({
        title: '济南贯日信息技术有限公司',
        desc: '提供高端网站建设、H5场景营销、微信小程序、SEO优化、网站托管、全网直播、企业应用等服务，用高端的设计和最顶尖的技术为您定制互联网服务！',
        link: 'https://www.ioperat.com/',
        imgUrl: 'https://www.ioperat.com/images/wxlogo.jpg',
        success: function() {},
        cancel: function() {}
    });
    wx.onMenuShareAppMessage({
        title: '济南贯日信息技术有限公司',
        desc: '提供高端网站建设、H5场景营销、微信小程序、SEO优化、网站托管、全网直播、企业应用等服务，用高端的设计和最顶尖的技术为您定制互联网服务！',
        link: 'https://www.ioperat.com',
        imgUrl: 'https://www.ioperat.com/images/wxlogo.jpg',
        type: '',
        dataUrl: '',
        success: function() {},
        cancel: function() {}
    });
    wx.onMenuShareQQ({
        title: '济南贯日信息技术有限公司',
        desc: '提供高端网站建设、H5场景营销、微信小程序、SEO优化、网站托管、全网直播、企业应用等服务，用高端的设计和最顶尖的技术为您定制互联网服务！',
        link: 'https://www.ioperat.com',
        imgUrl: 'https://www.ioperat.com/images/wxlogo.jpg',
        success: function() {},
        cancel: function() {}
    });
    wx.onMenuShareQQ({
        title: '济南贯日信息技术有限公司',
        desc: '提供高端网站建设、H5场景营销、微信小程序、SEO优化、网站托管、全网直播、企业应用等服务，用高端的设计和最顶尖的技术为您定制互联网服务！',
        link: 'https://www.ioperat.com',
        imgUrl: 'https://www.ioperat.com/images/wxlogo.jpg',
        success: function() {},
        cancel: function() {}
    }); ({
        title: '济南贯日信息技术有限公司',
        desc: '提供高端网站建设、H5场景营销、微信小程序、SEO优化、网站托管、全网直播、企业应用等服务，用高端的设计和最顶尖的技术为您定制互联网服务！',
        link: 'https://www.ioperat.com',
        imgUrl: 'https://www.ioperat.com/images/wxlogo.jpg',
        success: function() {},
        cancel: function() {}
    });
    wx.onMenuShareQZone({
        title: '济南贯日信息技术有限公司',
        desc: '提供高端网站建设、H5场景营销、微信小程序、SEO优化、网站托管、全网直播、企业应用等服务，用高端的设计和最顶尖的技术为您定制互联网服务！',
        link: 'https://www.ioperat.com',
        imgUrl: 'https://www.ioperat.com/images/wxlogo.jpg',
        success: function() {},
        cancel: function() {}
    });
});
</script>

以上代码只是最基础的使用方法，为了更方便的多页面调用，建议通过AJAX跨域请求来实现调用权限。

参考资料：微信js-sdk参考文档[官方]

附件：微信官方JSSDK示例代码包

附一张效果图：