在引用jquery和微信JSSDK的基础上封装一个脚本 实现大量的H5网页分享授权
1.脚本
/*分享模块*/ var shareData = { title: '分享主标题',//分享标题 desc: '分享副标题',//分享描述 link: location.href,//分享链接，默认是当前页 imgUrl: 'http://wx.qqauto.cn/html/2018/1/images/theme1.png'//分享图片,必须绝对路径 }; function WxShare(options) { //默认参数 shareData = $.extend(shareData, options); wx.onMenuShareTimeline({ title: shareData.title, // 分享标题 desc: shareData.desc, // 分享描述 link: shareData.link, // 分享链接 imgUrl: shareData.imgUrl, // 分享图标 success: function () { }, cancel: function () { } }); wx.onMenuShareAppMessage({ title: shareData.title, // 分享标题 desc: shareData.desc, // 分享描述 link: shareData.link, // 分享链接 imgUrl: shareData.imgUrl, // 分享图标 success: function () { }, cancel: function () { // 用户取消分享后执行的回调函数 } }); } ; (function ($) { var jurl = location.href; if (jurl.indexOf('#')) jurl = jurl.split('#')[0]; //jurl = encodeURIComponent(jurl); $.ajax({ url: '/CommonAPI/JSSDKHelper/15', data: { url: jurl }, async: false, success: function (d) { if (d && d.success) { wx.config({ debug: false, appId: d.appId, timestamp: d.timestamp, nonceStr: d.nonceStr, signature: d.signature, jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] }); wx.ready(function () { WxShare(); }); } } }); })(jQuery) /*授权模块*/ var _Mvar = { myGroup: '11', gid: 479, id: 15, // gid: 6, // id: 13, wxNum: "", username: "", phone: "", nickname: "", headimgurl: "", domain: '', data: '', msg: '可能是网络原因，请刷新页面重试!', cantest: '', jsoncallback: '', go: 0, uid: 0, cantest: '', wxid: '', wxName: '', myid: '', shareText: '福州万国长城哈弗猜车', shareText1: '', shareText2: '', prize: '万精', chance: 0, times: 0, num: 0, isShare: 0, loadImg: 'http://wx.qqauto.cn/html/upcoin/power/22/images/img2.png' }; function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } _Mvar.wxNum = getQueryString("uid"); var hostname = location.hostname; var myUrl = "http://" + hostname + location.pathname + "?uid=" + _Mvar.wxNum + '&gid=' + _Mvar.gid; function init2() { $.ajax({ type: "get", url: "http://wx.qqauto.cn/CommonApi/OAuth2?id=" + _Mvar.id + "&gid=" + _Mvar.gid + "&myUrl=" + encodeURIComponent(myUrl) + "&_r=" + Math.random(), dataType: "json", async: false, success: function (data) { if (data.success == true) { _Mvar.wxid = data.wxnum; _Mvar.nickname = data.nickname; _Mvar.headimgurl = data.headimg; } else { window.location.href = data.msg; } }, timeout: 15000, error: function (xhr, type) { alert("网络异常，请刷新重试。"); } }); } var isLocal = hostname && hostname.indexOf('wx.qqauto.cn') > -1; if (isLocal) init2(); else { _Mvar.domain = 'http://192.168.5.43:8022', _Mvar.cantest = 'can', _Mvar.wxid = '', _Mvar.jsoncallback = '?jsoncallback=?'; _Mvar.nickname = '花生'; _Mvar.gid = 14; _Mvar.id = 13; }
2.创建测试DEMO
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="/Scripts/jquery-1.10.2.js"></script> <script language="javascript" type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="/Scripts/yhz.js"></script> </head> <body> <button id="btn1">修改主副标题</button> <button id="btn2">修改链接地址Link</button> </body> </html> <script> $(function () { //修改主副标题 $("#btn1").click(function () { shareData.title = "哈哈哈哈"; shareData.desc = "嘿嘿"; WxShare(shareData); }) //修改链接为百度 $("#btn2").click(function () { shareData.link = location.href + "?test=2"; WxShare(shareData); }) }) </script>
3.分享
ps:引用的层级
<script src="/Scripts/jquery-1.10.2.js"></script>
<script language="javascript" type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/Scripts/yhz.js"></script>