微信分享网页带上缩略图怎么设置[总结]

在微信分享网页时怎么带上缩略图呢？今天做项目时遇到这个问题，在网上找了很多，都是说在头部添加，隐藏的div和img来实现，不过这种方法现在已经不能实现。现在如果要用的微信自带的分享功能，只做点击分享到朋友、朋友圈时获取缩略图,新版的一定要JS-SDK。

1. 今天要做一个活动要分享页面，发现转发的时候没有缩略图。网上找了一下，开始解决的方法是要制作一个300*300的图标，然后上传到服务器，然后在模版里加入代码微信会自动抓去第一张display 属性不为none的图片。这样做了发现还是没有缩略图。

2. 又仔细找了一下，发现是微信出了新版

微信6.5.5版本以后调整了分享规则，针对的是没有接入公众号的网页分享，必须接入微信认证公众号！

https://mp.weixin.qq.com/s/hAdtKl2i4ilyo9HxT1kXyw

3. 解决步骤

目的：已经明确必须使用JSSDK

    配置成功后会提示：errMsg :config:ok

按照微信开发文档说明：https://mp.weixin.qq.com/advanced/wiki?t=t=resource/res_main&id=mp1421141115

步骤一：绑定域名

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

备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

    appId: '', // 必填，公众号的唯一标识

    timestamp: , // 必填，生成签名的时间戳

    nonceStr: '', // 必填，生成签名的随机串

    signature: '',// 必填，签名，见附录1

    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

就这些，按照要求填写wx.config中的参数，不难的。 下面我贴代码，我也是搜了一些资料

js代码,把这段js代码放到整个框架共有文件的footer.html里面。随便访问一个页面，用-微信调试工具-打开查看JS-SDK是否成功ok

这是微信 JS 接口签名校验工具https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 

控制器中的代码 php。我的框架都是json格式返回的，变量都封装到$root中，通过output()返回php中执行获取appid、timestamp、nonceStr、signature操作，

class weixin{
public function index()
{
//微信
$url = $GLOBALS['request']['urll'];//获取当前页面的url，接收请求参数
$root['url'] = $url;
//获取access_token，并缓存
$file = 'access_token';//缓存文件名access_token
$expires = 3600;//缓存时间1个小时
if(file_exists($file)) {
$time = filemtime($file);
if(time() - $time > $expires) {
$token = null;
}else {
$token = file_get_contents($file);
}
}else{
fopen("$file", "w+");
$token = null;
}
if (!$token || strlen($token) < 6) {
$res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='自己的appid'&secret='AppSecret'");//自己的appid,通过微信公众平台查看appid和AppSecret
$res = json_decode($res, true);
$token = $res['access_token'];
// write('access_token', $token, 3600);
@file_put_contents($file, $token);
}

//获取jsapi_ticket，并缓存
$file1 = 'jsapi_ticket';
if(file_exists($file1)) {
$time = filemtime($file1);
if(time() - $time > $expires) {
$jsapi_ticket = null;
}else {
$jsapi_ticket = file_get_contents($file1);
}
}else{
fopen("$file1", "w+");
$jsapi_ticket = null;
}
if (!$jsapi_ticket || strlen($jsapi_ticket) < 6) {
$ur = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$token&type=jsapi";
$res = file_get_contents($ur);
$res = json_decode($res, true);
$jsapi_ticket = $res['ticket'];
@file_put_contents($file1, $jsapi_ticket);
}

$timestamp = time();//生成签名的时间戳
$metas = range(0, 9);
$metas = array_merge($metas, range('A', 'Z'));
$metas = array_merge($metas, range('a', 'z'));
$nonceStr = '';
for ($i=0; $i < 16; $i++) {
$nonceStr .= $metas[rand(0, count($metas)-1)];//生成签名的随机串
}

$string1="jsapi_ticket=".$jsapi_ticket."&noncestr=$nonceStr"."×tamp=$timestamp"."&url=$url";
$signature=sha1($string1);
$root['appid'] = $appid;
$root['nonceStr'] = $nonceStr;
$root['timestamp'] = $timestamp;
$root['signature'] = $signature;


output($root);
}
}
?>

以上代码有温州微信开发微站网站制作收集整理，上面就是关于微站分享带上缩略图和简介的方法。