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

最近项目中开发的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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容