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

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

我们希望看到的效果是,
如何在微信分享的网页中显示描述和图片_第2张图片
WechatIMG2.jpeg

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

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

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


如何在微信分享的网页中显示描述和图片_第3张图片
屏幕快照 2017-11-26 上午7.07.22.png
如何在微信分享的网页中显示描述和图片_第4张图片
屏幕快照 2017-11-26 上午7.07.33.png
  1. 进入 设置-公众号设置,打开 功能设置 标签,在 JS接口安全域名内 添加需要调用微信js接口网页的域名。


    如何在微信分享的网页中显示描述和图片_第5张图片
    屏幕快照 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
    require_once "jssdk.php";
    $jssdk = new JSSDK("yourAppID", "yourAppSecret");
    $signPackage = $jssdk->GetSignPackage();
    ?>









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

AppID是我们微信公众号的唯一标识。进入微信公众平台,<开发>-<基本配置> 可以看到自己公众号AppID及AppSecret。
如何在微信分享的网页中显示描述和图片_第6张图片
屏幕快照 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地址访问,才能获得access_token,并成功调用微信开发接口。
这个ip地址,是服务端所在服务器的地址,可以通过服务器提供商出获得。经过测试,如有需要本地pc端测试,好像还需要将本地的ip加入。如果不确定ip地址的话,可以先不填。调试过程中,他会返回某ip地址未在白名单中的提示,直接把这个地址加入,就可以了。

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

    登陆页面,跳出对话框
    如何在微信分享的网页中显示描述和图片_第7张图片
    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,保持到根目录下。

再次登录页面,获得反馈
如何在微信分享的网页中显示描述和图片_第8张图片
WechatIMG4.jpg

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

显示成功。


如何在微信分享的网页中显示描述和图片_第9张图片
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);
});

分享好友效果
如何在微信分享的网页中显示描述和图片_第10张图片
WechatIMG9.jpeg

你可能感兴趣的:(如何在微信分享的网页中显示描述和图片)