> 博客 > 网站优化技巧 > 微信分享小图标实现方法:对接微信官方JS-SDK

微信分享小图标实现方法:对接微信官方JS-SDK

     2017-11-02  点击:7595次

微信分享小图标实现方法:对接微信官方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参考文档[官方]

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


附一张效果图:

js-sdk 分享缩略图效果.jpg



相关文章