网页微信分享没有缩略图

用的微信自带的分享功能,只做点击分享到朋友、朋友圈时获取缩略图,新版的一定要js-sdk。
1.今天要做一个活动要分享页面,发现转发的时候没有缩略图。
网上找了一下,开始解决的方法是要制作一个300*300的图标,
然后上传到服务器,然后在模版里加入代码
<img src=”300*300的图标” width=”0″ height=”0″ />
微信会自动抓去第一张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
<script src=”http://res.wx.qq.com/open/js/jweixin-1.2.0.js”></script>
<script>
window.onload=function(){//进入页面就执行ajax,目的为了传送当前页面url#前的完整url
var ajaxurl = ?‘/index.php?ctl=weixin’;
var query = new object();
var urll = location.href.split(‘#’)[0]; //页面url#前的完整url,可alert弹出查看
query.urll = $.trim(urll);
query.post_type = “json”;
$.ajax({
url: ajaxurl,
data:query,
type: “post”,
datatype: “json”,
success: function(ress){//成功则执行js-sdk
console.log(ress);//查看返回结果
//执行js_sdk
wx.config({
debug: true,
appid: ress.appid,
timestamp: ress.timestamp,
noncestr: ress.noncestr,
signature: ress.signature,
jsapilist: [‘onmenusharetimeline’,’onmenushareappmessage’]
});
}
,error:function(){
console.log(“通信失败”);
}
});
}
/* alert(location.href.split(‘#’)[0]); */ //弹出的url必须与访问地址一致
</script>
这是微信 js 接口签名校验工具https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
控制器中的代码 php。我的框架都是json格式返回的,变量都封装到$root中,通过output()返回
php中执行获取appid、timestamp、noncestr、signature操作,
<?php
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 = “ht
上一个:深圳网站建设方式怎样才能做优异
下一个:建设网站容易出现的问题有哪些?
南阳网站建设,南阳做网站,南阳网站设计