如何在微信分享的网页中显示描述和图片

最近项目中开发的h5页面,在微信朋友圈分享或分享给朋友的过程中,显示的信息描述是网址,图片无法显示。如下,
WechatIMG3.jpeg

我们希望看到的效果是,
WechatIMG2.jpeg

查了网上的资料和微信开发文档,是微信为安全原因,防止类似钓鱼网址等非法链接做的安全措施。为了实现上述功能,我们需要在网站中加入动态代码,调用微信sdk接口,获得认证。
微信说明文档链接
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

  1. 根据开发说明,我们首先需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(备注:登录后可在“开发者中心”查看对应的接口权限。)

首先登陆微信开发者平台,在 开发-接口权限 中打开相应接口,


屏幕快照 2017-11-26 上午7.07.22.png
屏幕快照 2017-11-26 上午7.07.33.png
  1. 进入 设置-公众号设置,打开 功能设置 标签,在 JS接口安全域名内 添加需要调用微信js接口网页的域名。


    屏幕快照 2017-11-26 上午7.20.12.png

设置JS接口安全域名时,微信会要求开发者下载一个文件,并上传到填写的域名下。完成操作后,安全域名就添加成功了。

  1. 简单浏览了一下开发文档,直接下载页面最后的sample测试代码。在php文件夹中四个文件
    access_token.php
    jsapi_ticket.php
    jssdk.php
    sample.php
    其中,sample.php是demo页面。
    jssdk.php中整合了获得config中需要的timestamp,nonceStr,signature及中间数据access_token,jsapi_ticket等函数。
    access_token.php及jaspi_ticket.php是空的,用来全局存在这两个变量。微信规定access_token的有效期7200秒,而且每天调用不能超过2000次,所有需要全局存储,在有效周期内从本地获得。

  2. 打开 php 文件中sample.php
    <?php
    require_once "jssdk.php";
    $jssdk = new JSSDK("yourAppID", "yourAppSecret");
    $signPackage = $jssdk->GetSignPackage();
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>

</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>

wx.config({
debug: true,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
]
});
wx.ready(function () {
// 在这里调用 API
});
</script>
</html>

在 $jssdk = new JSSDK("yourAppID", "yourAppSecret"); 处需要添加AppID及AppSecret。

AppID是我们微信公众号的唯一标识。进入微信公众平台,<开发>-<基本配置> 可以看到自己公众号AppID及AppSecret。
屏幕快照 2017-12-11 上午8.43.16 copy.png

在需要调用JS接口的页面引入如下JS文件,(http://res.wx.qq.com/open/js/jweixin-1.0.0.js)

如果你的页面启用了https,需要引入(https://res.wx.qq.com/open/js/jweixin-1.0.0.js) ,否则将无法在iOS9.0以上系统中成功使用JSSDK。

另外,我们看到下面有一个标签<IP白名单>,在这里需要添加我们访问来源的IP地址,只有白名单里面的ip地址访问,才能获得access_token,并成功调用微信开发接口。
这个ip地址,是服务端所在服务器的地址,可以通过服务器提供商出获得。经过测试,如有需要本地pc端测试,好像还需要将本地的ip加入。如果不确定ip地址的话,可以先不填。调试过程中,他会返回某ip地址未在白名单中的提示,直接把这个地址加入,就可以了。

  1. 上传测试文件到服务器。因为我们在config中设置了debug为true,所以每次调用都可以看到反馈信息。

    登陆页面,跳出对话框
    WechatIMG5.jpg

    说明签名没有被正确得到。

    调试jsjdk.php中,我们发现获得access_token为空。查看httpGet函数返回信息,

private function httpGet($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 500);
// 为保证第三方服务器与微信服务器之间数据传输的安全性,所有微信接口采用https方式调用,必须使用下面2行代码打开ssl安全校验。
// 如果在部署过程中代码在此处验证失败,请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
curl_setopt($curl, CURLOPT_URL, $url);

$res = curl_exec($curl);
curl_close($curl);

echo $res;//显示数据
return $res;

}
首先下载新的ssl安全校验证书cacert.pem,保持到根目录下。

再次登录页面,获得反馈
WechatIMG4.jpg

好的,现在把这个ip地址加入到微信公众平台的ip白名单中。
再次调用
WechatIMG6.jpg

显示成功。


WechatIMG7.jpeg

截止到现在,这个过程就基本调试通过了。
  1. 在sample.php中加入我们要分享的信息
    wx.ready(function(){
    var shareData = {
    title: '中国船舶工业集团公司',
    desc: '中国船舶工业集团公司',
    link: 'http://www.flashtek.com.cn/cssc/index.php',
    imgUrl: 'http://www.flashtek.com.cn/cssc/img/logo.png'

};
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
});

分享好友效果
WechatIMG9.jpeg

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容