最近项目中开发的h5页面,在微信朋友圈分享或分享给朋友的过程中,显示的信息描述是网址,图片无法显示。如下,
我们希望看到的效果是,
为了实现上述功能,我们需要在网站中加入动态代码,调用微信sdk接口,获得认证。
微信说明文档链接:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
第一步 对微信公众号进行配置
登录微信公众平台
https://mp.weixin.qq.com/
要想使用微信分享功能,必须设置ip白名单和js接口安全域名。
IP白名单设置
在测导航找到“基本配置”菜单:
把服务器的ip地址输入进去即可。
JS接口安全域名
在测导航找到“公众号设置”菜单,进入后,点击“功能设置”:
第二步 引入微信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(){
// 所有接口必须在这里写,才会保证生效。
});