h5页面生成图片分享到微信js_微信H5怎样实现微信分享后有图片和描述？

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

我们希望看到的效果是，

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

登录微信公众平台

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

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

IP白名单设置

在测导航找到“基本配置”菜单：

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

JS接口安全域名

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

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

// 引入微信的jssdk

// 或者

npm install weixin-js-sdk

var wx = require('weixin-js-sdk');

// 通过config接口注入权限验证配置

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '',// 必填，签名

jsApiList: [] // 必填，需要使用的JS接口列表，我这里用到的接口有"onMenuShareTimeline","onMenuShareAppMessage","chooseWXPay"

});

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

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

第四步 使用接口

所有接口的使用必须在：

wx.ready(function(){

// 所有接口必须在这里写，才会保证生效。

});