微信公众开发 前端H5分享盆友圈流程
现在微信公众号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); //这里可以打印出错误消息进行判断是哪里出错
});
