网站有些内容需要分享到微信朋友圈,或者发送给微信好友。分享到微信朋友圈的网页链接没有缩略图图标,发给微信好友的网页链接没有图标与摘要,明显就不上档次了…
如下图所示:
分享到朋友圈没有缩略图图标
发送给微信好友没有图标与摘要
查找了一些资料,发现要解决此问题,必须符合微信分享的策略:
JSSDK自定义分享接口的策略调整
为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失败。
例如,当前页面是 http://www.abc.com/123,其公众号对应的JS安全域名为 www.abc.com 以及 www.xyz.com,则分享自定义链接 http://www.abc.com/456 可以成功,分享 http://www.xyz.com/123 或 http://www.def.com/123 均将失败。
对于未接入微信JSSDK或已接入但JSSDK调用失败的网页,被用户分享时,分享卡片将统一使用默认缩略图和标题简介,不允许自定义。
接口完整用法请参考《微信JSSDK说明文档》,请开发者及时完成调整。
因此需要具备以下2个条件
1、微信公众号
微信公众号(服务号、订阅号),我的只是个人申请的订阅号
2、网站必需已完成备案
如果没有备案的网站就不用继续了。
条件具备了,下面是设置公众号与配置网站
参照 微信JS-SDK说明文档
大致步骤如下
一:绑定域名
二:引入JS文件
三:通过config接口注入权限验证配置
四:通过ready接口处理成功验证
五:通过error接口处理失败验证
一、设置公众号,绑定域名
1、设置JS接口安全域名,才能在该域名下调用微信开放的JS接口
进入公众号→设置→公众号设置→功能设置
JS接口安全域名→设置
这里我们要下载文件MP_verify_zsB3mdwTTjCFzn20.txt ,上传至网站根目录才能完成绑定域名(注意网站如果有WP Super Cache缓存的话,要先清除缓存,否则无法成功)
2、获取开发者ID与密码,设置IP白名单
进入公众号→开发→基本配置
开发者ID(AppID)直接可以查看到,开发者密码(AppSecret)无法直接查看,点击重置获取
我们先记录好开发者ID与密码,稍后配置网站时需要使用。
IP白名单是将需要我们网站固定IP地址填上即可。
二、配置网站,引入JS文件
1、在需要调用JS接口的页面引入JS文件
<body> //在需要调用JS接口的页面的body与body之间插入配置代码。 //引入如下JS文件 <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script> //通过config接口注入权限验证配置 wx.config({ debug: false, // true为开启,false为关闭。开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '<?php echo $signPackage["appId"];?>', // 必填,公众号的唯一标识 timestamp: <?php echo $signPackage["timestamp"];?>, // 必填,生成签名的时间戳 nonceStr: '<?php echo $signPackage["nonceStr"];?>', // 必填,生成签名的随机串 signature: '<?php echo $signPackage["signature"];?>', // 必填,签名 jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表 }); //通过ready接口处理成功验证 wx.ready(function () { //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃) //但我使用新接口updateTimelineShareData却报错permission denied该公众号没有权限使用这个JSAPI wx.onMenuShareTimeline({ title: '', // 分享标题 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () { // 用户点击了分享后执行的回调函数 } }); //获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃) //但我使用新接口wx.updateAppMessageShareData却报错permission denied该公众号没有权限使用这个JSAPI wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () { // 用户点击了分享后执行的回调函数 } }); }); //通过error接口处理失败验证 wx.error(function(res){ // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 }); </script> </body>
2、配置后端PHP代码
下载微信示例代码http://demo.open.weixin.qq.com/jssdk/sample.zip
将下载下来的sample压缩包里面的jssdk.php解压出来,上传到网站主题需要调用JS接口的模板目录(我这里只针对我使用的WordPress子主题的操作)
在主题头部header.php插入jssdk的代码(或者在需要调用JS接口的页面插入代码)
<?php /** * The header for our theme * * This is the template that displays all of the <head> section and everything up until <div id="content"> * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ //插入代码 require_once "jssdk.php"; $jssdk = new JSSDK("wxae*********02cc", "99***********************52e5"); // 填上"wxae*********02cc"开发者ID(AppID),"99***********************52e5"开发者密码(AppSecret) $signPackage = $jssdk->GetSignPackage(); ?><!DOCTYPE html>
至此完成《网页分享到微信显示图标、标题、摘要》所有的配置了。本篇配置步骤仅适用于我现在使用的WordPress,至于其它类型的网站仅供参考。
需要注意的是使用WP Super Cache缓存时间过长,会导致JS接口出现各种问题哟!
配置JSSDK经历的各种各样的坑,后续有时间再做详细记录吧。