现在微信公众号H5页面开发经常会开放些分享给朋友、分享到朋友圈还有微信支付等功能。

今天我们来用微信提供的JSSDK来开发这些功能。

1.第一步就是到公众号里面绑定安全域名

登录微信公众号平台，进入公众号设置看到填写自己J安全接口域名，然后点击保存。微信这平台对于外部域名是有自己的审核的，所以很多这种外部域名都会要提交审核。这一步是为了开发分享功能，成功的重要一步。（这里的接口域名记不要用http协议头）

公众号管理平台

2.第二步把JSSDK文件引入到你的项目里

在需要调用JS接口的页面引入JS文件

 //直接把文件放到html文件head里面 （支持https）<script type="text/javascript" src=""></script>//还可以js里面动态引入 var oHead = document.getElementsByTagName('HEAD').item(0);  var oScript= document.createElement("script");  oScript.type = "text/javascript";  oScript.src="";  oHead.appendChild(oScript);  同时也支持使用 AMD/CMD 标准模块加载方法加载 //npm安装引入也是可以的 npm install weixin-js-sdk  var wx = require('weixin-js-sdk');  

 //js文件里面加入这段代码，如果你是用vue或者react开发 这段代码可以放到dom还没加载完的生命周期函数里面去 wx.config({ debug: false, // true:调试时候弹窗 ，你可以到微信web开发工具里面公众号网页里面进行查看调试 appId: data.appId, // 微信appid timestamp: data.timestamp, // 时间戳 nonceStr: data.nonceStr, // 随机字符串 signature: data.signature, // 签名 jsApiList: [ 'hideOptionMenu', 'showOptionMenu', 'onMenuShareTimeline', // 分享到朋友圈接口 'onMenuShareAppMessage', // 分享到朋友接口 'onMenuShareQQ', // 分享到QQ接口 'onMenuShareWeibo' // 分享到微博接口 ] });

wx.ready(function(){ // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 wx.hideOptionMenu();//禁止分享 根据个人需求是否判断条件禁止或打开分享功能 if(条件){ wx.showOptionMenu();//打开分享  } //分享微信朋友圈功能 wx.onMenuShareTimeline({ title: '租租车App在国内也可以租车了，我刚订了一辆车，快来帮我砍价吧', link: myurl, imgUrl: '', success: function () { alert("分享到朋友圈成功"); }， cancel:function(){ // 用户取消分享后执行的回调函数 } }); //分享给朋友 wx.onMenuShareAppMessage({ title: '租租车App在国内也可以租车了，我刚订了一辆车，快来帮我砍价吧', desc: '砍价可帮我返现部分租车费，砍完还能送您100元国内租车优惠劵哦', link: links, imgUrl: '', success: function () { alert("分享给朋友成功"); }, cancel: function () {  // 用户取消分享后执行的回调函数 } }); 上面imgUrl参数要用网站图片网络地址，不能用本地图片路径，要不然分享不成功能});wx.error(function(res){ // config信息验证失败会执行error函数。console.log("错误消息", res); //这里可以打印出错误消息进行判断是哪里出错});

调起分享弹窗

分享到微信朋友圈