网页微信分享没有缩略图

用的微信自带的分享功能,只做点击分享到朋友、朋友圈时获取缩略图,新版的一定要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 = “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”.”&timestamp=$timestamp”.”&url=$url”; $signature=sha1($string1); $root[‘appid’] = $appid; $root[‘nonceStr’] = $nonceStr; $root[‘timestamp’] = $timestamp; $root[‘signature’] = $signature; output($root); } } ?>

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网页微信分享没有缩略图
分享到:
赞(0)
广告位820*80