微信H5怎样实现微信分享后有图片和描述?

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

我们希望看到的效果是,

image.png

为了实现上述功能,我们需要在网站中加入动态代码,调用微信sdk接口,获得认证。
微信说明文档链接:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

第一步 对微信公众号进行配置

登录微信公众平台

https://mp.weixin.qq.com/

要想使用微信分享功能,必须设置ip白名单和js接口安全域名。

IP白名单设置

在测导航找到“基本配置”菜单:
image.png

把服务器的ip地址输入进去即可。

JS接口安全域名

在测导航找到“公众号设置”菜单,进入后,点击“功能设置”:

image.png

第二步 引入微信js sdk,通过config接口注入权限验证配置

// 引入微信的jssdk
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
// 或者
npm install weixin-js-sdk
 
var wx = require('weixin-js-sdk');

// 通过config接口注入权限验证配置
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表,我这里用到的接口有"onMenuShareTimeline","onMenuShareAppMessage","chooseWXPay"
});
</script>

注意:这里的微信配置签名等是由 后端程序来生成

微信官方jssdk文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

其他接口请查看微信文档。

第四步 使用接口

所有接口的使用必须在:

wx.ready(function(){
    // 所有接口必须在这里写,才会保证生效。
});
回到稻壳网首页
稻壳客服

扫一扫,微信咨询

请留下需求和联系方式,我们即刻为您准备方案
需求提交成功

提交成功

免费服务热线021-61676039(工作日9:00 ~ 18:00)
×
稻壳客服

扫一扫,微信咨询