网页分享到微信显示图标、标题、摘要

发布于 由飞仔7093

网站有些内容需要分享到微信朋友圈，或者发送给微信好友。分享到微信朋友圈的网页链接没有缩略图图标，发给微信好友的网页链接没有图标与摘要，明显就不上档次了…

如下图所示：

分享到朋友圈没有缩略图图标

 

发送给微信好友没有图标与摘要

 

查找了一些资料，发现要解决此问题，必须符合微信分享的策略：

JSSDK自定义分享接口的策略调整

微信团队 微信开发者 2017-03-29

为规范自定义分享链接功能在网页上的使用，自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经历的各种各样的坑，后续有时间再做详细记录吧。

发表评论