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

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

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

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

公众号管理平台

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

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

 //直接把文件放到html文件head里面 （支持https）

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

//还可以js里面动态引入

 var oHead = document.getElementsByTagName(’HEAD’).item(0); 
 var oScript= document.createElement("script"); 
 oScript.type = "text/javascript"; 
 oScript.src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"; 
 oHead.appendChild(oScript); 

 同时也支持使用 AMD/CMD 标准模块加载方法加载

 //npm安装引入也是可以的

 npm install weixin-js-sdk
 
 var wx = require(’weixin-js-sdk’);

 
 

3.第三步通过config接口注入权限验证配置

 //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’ // 分享到微博接口
 ]
 });

4.第四步通过ready接口处理成功验证

wx.ready(function(){
 // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

 wx.hideOptionMenu();//禁止分享 根据个人需求是否判断条件禁止或打开分享功能

 if(条件){
 wx.showOptionMenu();//打开分享 
 }


 //分享微信朋友圈功能
 wx.onMenuShareTimeline({
 title: ’租租车App在国内也可以租车了，我刚订了一辆车，快来帮我砍价吧’,
 link: myurl,
 imgUrl: ’http://imgcdn5.zuzuche.com/static/30/40/a25aed42fbd.png’,
 success: function () {
 alert("分享到朋友圈成功");
 }，
 cancel:function(){
 // 用户取消分享后执行的回调函数
 }
 });


 //分享给朋友
 wx.onMenuShareAppMessage({
 title: ’租租车App在国内也可以租车了，我刚订了一辆车，快来帮我砍价吧’,
 desc: ’砍价可帮我返现部分租车费，砍完还能送您100元国内租车优惠劵哦’,
 link: links,
 imgUrl: ’http://imgcdn5.zuzuche.com/static/30/40/a25aed420.png’,
 success: function () {
 alert("分享给朋友成功");
 },
 cancel: function () { 
 // 用户取消分享后执行的回调函数
 }
 });


 上面imgUrl参数要用网站图片网络地址，不能用本地图片路径，要不然分享不成功能

});


wx.error(function(res){
 // config信息验证失败会执行error函数。

console.log("错误消息", res); //这里可以打印出错误消息进行判断是哪里出错

});

调起分享弹窗

分享到微信朋友圈