【移动应用开发技术】分享网页到微信朋友圈怎样才能带缩略图_第1页
【移动应用开发技术】分享网页到微信朋友圈怎样才能带缩略图_第2页
【移动应用开发技术】分享网页到微信朋友圈怎样才能带缩略图_第3页
【移动应用开发技术】分享网页到微信朋友圈怎样才能带缩略图_第4页
免费预览已结束,剩余1页可下载查看

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

【移动应用开发技术】分享网页到微信朋友圈,怎样才能带缩略图?

做微信H5的朋友都知道,在过去要设置"分享到朋友圈"的缩略图,是非常简单的一件事情,只需要制作一张300*300的缩略图片(如命名为300.jpg),然后在页面head部分的开头引入微信朋友圈缩略图代码即可。<!doctype

html>

<html>

<head>

<div

id='wx_pic'

style='margin:0

auto;display:none;'>

<img

src='i/300.jpg'>

</div>

//其余代码...这一招本来是屡试不爽的。本人也已经有挺长时间没有做微信中的H5了,直到这两天,因为手头要做一个简单的微信H5,所以拾掇拾掇又用了这招。没想到,这次居然失效了。不管怎么试,分享朋友圈的时候,缩略图都出不来。一直是这么个默认的图标:然后再去网上看了下,这才发现微信团队在今年3月29号就发了一篇文章《JSSDK自定义分享接口的策略调整》,里面明确说明了:为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失败。例如,当前页面是/123,其公众号对应的JS安全域名为以及,则分享自定义链接/456可以成功,分享/123或/123均将失败。对于未接入微信JSSDK或已接入但JSSDK调用失败的网页,被用户分享时,分享卡片将统一使用默认缩略图和标题简介,不允许自定义。接口完整用法请参考《微信JSSDK说明文档》,请开发者及时完成调整。好吧。还好我手头服务号和企业号(还没有升级到企业微信)的认证账号都有。我看了下,两者的文档分别在以下地址的“分享接口”部分(其实没啥大区别):服务号:/wiki?企业号:微信JS-SDK接口-企业号开发者接口文档因为手头要推的东西是放在企业号里的,于是以企业号为例,简要说明一下开发过程。首先,在页面中引入微信的JS-SDK的JS文件。<script

src="/open/js/jweixin-1.1.0.js"></script>然后,取accesstoken,以PHP和微信企业号为例(最好存在服务器上,没过期前从缓存文件里取,以避免频繁调用)。如果使用微信服务号的话,API地址和企业号有所不同。$output

=

http_post_data("/cgi-bin/gettoken?corpid=******&corpsecret=*****"");

$res

=

json_decode($output,

true);

$accessToken

=

$res["access_token"];接下来,获取jsapi_ticket,同理,最好缓存在服务器上而非每次调用。$output

=

http_post_data("/cgi-bin/get_jsapi_ticket?access_token=".$accessToken,"");

$getTicket

=

json_decode($output,

true);

$ticket

=

$getTicket['ticket'];然后,获取nonceStr,这个微信已经给出了算法,照着用就行。function

createNonceStr($length

=

16)

{

$chars

=

"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

$str

=

"";

for

($i

=

0;

$i

<

$length;

$i++)

{

$str

.=

substr($chars,

mt_rand(0,

strlen($chars)

-

1),

1);

}

return

$str;

}

$nonceStr

=

createNonceStr();然后,取timestamp,即当前时间。然后,取timestamp,即当前时间。接下来取url值,这个必须是安全域名中设置的域。$protocol

=

(!empty($_SERVER['HTTPS'])

&&

$_SERVER['HTTPS']

!==

'off'

||

$_SERVER['SERVER_PORT']

==

443)

?

"https://"

:

"http://";

$url

=

"$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";东西都准备好了,拼到一起后sha编码,然后打成一个包。$string

=

"jsapi_ticket=".$ticket."&noncestr=".$nonceStr."×tamp=".$timestamp."&url=".$url;

$signature

=

sha1($string);

$signPackage

=

array(

"appId"

=>

"******",

"nonceStr"

=>

$nonceStr,

"timestamp"

=>

$timestamp,

"url"

=>

$url,

"signature"

=>

$signature,

"rawString"

=>

$string

);PHP的部分完成了,最后就是在Body前用JS注册“分享到朋友圈”这一个API,API的名称为onMenuShareTimeline,在其中注册imgUrl,即可设置好分享缩略图。<script

type="text/javascript">

wx.onMenuShareTimeline({

imgUrl:

'需要的缩略图地址'

});

wx.config({

debug:

false,

appId:

'<?php

echo

$signPackage["appId"];?>',

timestamp:

<?php

echo

$signPackage["timestamp"];?>,

nonceStr:

'<?php

echo

$signPackage["nonceStr"];?>',

signature:

'<?php

echo

$signPackage["signature"];?>',

jsApiList:

[

'onMenuShareTimeline'

]

});

</script>在上面的代码中,我只设置了imgUrl这一个参数,实际上,还能够在这里设置标题等其他的参数。wx.onMenuShareTimeline({

title:

'',

//

分享标题

link:

'',

//

分享链接,该链接域名必须与当前企业的可信域名一致

imgUrl:

'',

//

分享图标

succes

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论