微信分享小图标实现方法:对接微信官方JS-SDK
“微信分享卡片调用第一张大度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参考文档[官方]
附一张效果图:
版权声明:本文由 贯日建站 原创,禁止商业转载,非商业转载请注明出处,侵权必究:《微信分享小图标实现方法:对接微信官方JS-SDK》