我原本是纯后端开发，但是最近因为工作原因，做了微信公众号的二次开发，说实话写H5调CSS调得头大，还是得术业有专攻才行。话不多说，因为要做微信自定义分享，网上其实已经有很多轮子了，但是100个人就有100种不同的写法，最终还是觉得自己造的轮子要好使一点?因此做了以下的封装，直接上代码(注：UI框架使用的是MUI)：

1. 页面引用jssdk：

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

2. 分享按钮：

   <span class="mui-icon mui-icon-paperplane" id="wx_share_to_app_message" οnclick="go_to_the_wx_share()"></span>

3. 点击分享后的遮罩层：

   <div id="wx_share_background" οnclick="document.getElementById('wx_share_background').style.display='';" style="width: 100%;height:100%;display: none;"><img src="../content/images/wx_share.png" width="100%" />
   </div>

4. 分享JS代码

   $(function() {load_jssdk_config();
   })/*** 分享*/
   function go_to_the_wx_share() {document.getElementById('wx_share_background').style.display = 'block';var title = "我是用于测试微信自定义分享的标题";var desc = "我是用于测试微信自定义分享的描述";var link = "http://192.168.100.110:4423/index.html?userId=oTUgw1XkWXYXSdbL2Vqf6hA_q00E&storeId=8560774594560";var imgUrl = "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIzGH0DW72UgiabThqwkTgia2StdXx970y1VpLgRLvHkRib7Aly3skVGbkwspnlPUMFU5RiadowSHicEWA/132";var type = "link"; // 分享类型,music、video或link，不填默认为linkvar dataUrl = ''; // 如果type是music或video，则要提供数据链接，默认为空var wx_share_parm_obj = {title: title, //分享标题desc: desc, //分享描述link: link, //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgUrl, //分享图标type: 'link', // 分享类型,music、video或link，不填默认为linkdataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空callback: wx_share_callback //分享成功后执行方法};load_wx_share(wx_share_parm_obj);
   }/*** 分享成功后执行方法* @param {Object} res*/
   function wx_share_callback(res) {//res-->success,cancel,fail,completeswitch(res) {case "success":break;case "cancel":break;case "fail":break;case "complete":break;}document.getElementById('wx_share_background').style.display = 'none';
   }/*** 微信自定义分享* @param {Object} wx_share_parm_obj*/
   function load_wx_share(wx_share_parm_obj) {//分享到朋友wx.onMenuShareAppMessage({title: wx_share_parm_obj.title, // 分享标题desc: wx_share_parm_obj.desc, // 分享描述link: wx_share_parm_obj.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: wx_share_parm_obj.imgUrl, // 分享图标type: wx_share_parm_obj.type, // 分享类型,music、video或link，不填默认为linkdataUrl: wx_share_parm_obj.dataUrl, // 如果type是music或video，则要提供数据链接，默认为空success: function() {// 用户确认分享后执行的回调函数wx_share_parm_obj.callback("success");},cancel: function() {// 用户取消分享后执行的回调函数mui.toast('取消分享');wx_share_parm_obj.callback("cancel");},trigger: function(res) {console.log('用户点击发送给朋友');},complete: function(res) {console.log("完成分享-->" + res.errMsg);wx_share_parm_obj.callback("complete");},fail: function(res) {console.log("分享失败-->" + res.errMsg);wx_share_parm_obj.callback("fail");}});//分享到朋友圈wx.onMenuShareTimeline({title: wx_share_parm_obj.title, // 分享标题link: wx_share_parm_obj.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: wx_share_parm_obj.imgUrl, // 分享图标success: function() {// 用户确认分享后执行的回调函数wx_share_parm_obj.callback("success");},cancel: function() {// 用户取消分享后执行的回调函数mui.toast('取消分享');wx_share_parm_obj.callback("cancel");},trigger: function(res) {console.log('用户点击分享到朋友圈');},complete: function(res) {console.log("完成分享-->" + res.errMsg);wx_share_parm_obj.callback("complete");},fail: function(res) {console.log("分享失败-->" + res.errMsg);wx_share_parm_obj.callback("fail");}});//分享到QQwx.onMenuShareQQ({title: wx_share_parm_obj.title, // 分享标题desc: wx_share_parm_obj.desc, // 分享描述link: wx_share_parm_obj.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: wx_share_parm_obj.imgUrl, // 分享图标success: function() {// 用户确认分享后执行的回调函数wx_share_parm_obj.callback("success");},cancel: function() {// 用户取消分享后执行的回调函数mui.toast('取消分享');wx_share_parm_obj.callback("cancel");},trigger: function(res) {console.log('用户点击分享到QQ');},complete: function(res) {console.log("完成分享-->" + res.errMsg);wx_share_parm_obj.callback("complete");},fail: function(res) {console.log("分享失败-->" + res.errMsg);wx_share_parm_obj.callback("fail");}});//分享到QQ空间wx.onMenuShareQZone({title: wx_share_parm_obj.title, // 分享标题desc: wx_share_parm_obj.desc, // 分享描述link: wx_share_parm_obj.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: wx_share_parm_obj.imgUrl, // 分享图标success: function() {// 用户确认分享后执行的回调函数wx_share_parm_obj.callback("success");},cancel: function() {// 用户取消分享后执行的回调函数mui.toast('取消分享');wx_share_parm_obj.callback("cancel");},trigger: function(res) {console.logmui.toast('用户点击分享到QQ空间');},complete: function(res) {console.log("完成分享-->" + res.errMsg);wx_share_parm_obj.callback("complete");},fail: function(res) {console.log("分享失败-->" + res.errMsg);wx_share_parm_obj.callback("fail");}});//分享到腾讯微博wx.onMenuShareWeibo({title: wx_share_parm_obj.title, // 分享标题desc: wx_share_parm_obj.desc, // 分享描述link: wx_share_parm_obj.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: wx_share_parm_obj.imgUrl, // 分享图标success: function() {// 用户确认分享后执行的回调函数wx_share_parm_obj.callback("success");},cancel: function() {// 用户取消分享后执行的回调函数mui.toast('取消分享');wx_share_parm_obj.callback("cancel");},trigger: function(res) {console.log('用户点击分享到腾讯微博');},complete: function(res) {console.log("完成分享-->" + res.errMsg);wx_share_parm_obj.callback("complete");},fail: function(res) {console.log("分享失败-->" + res.errMsg);wx_share_parm_obj.callback("fail");}});
   }/*** 获取JSSDK配置信息*/
   function load_jssdk_config() {var jssdk_auth_url = location.href.split('#')[0];console.log("微信JSSDK授权地址：" + encodeURIComponent(jssdk_auth_url))var url = Wx_Config.BaseApiUrl + "api/StoreChose/GetJsSdkUiPackage?Url=" + encodeURIComponent(jssdk_auth_url);mui.ajax(url, {dataType: 'json', //服务器返回json格式数据type: 'get', //HTTP请求类型timeout: 10000, //超时时间设置为10秒headers: {'Content-Type': 'application/json'},async: false, //同步success: function(req) {//服务器返回响应，根据响应结果，分析是否登录成功if(req && req.code == 2000) {var data = req.data;if(data) {config_weixin(data.AppId, data.Timestamp, data.NonceStr, data.Signature);}} else {mui.toast(req.msg)}},error: function(xhr, type, errorThrown) {//异常处理mui.toast(type)}});
   }/*** 配置JSSDK* @param {Object} appId* @param {Object} timestamp* @param {Object} nonceStr* @param {Object} signature*/
   function config_weixin(appId, timestamp, nonceStr, signature) {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: appId,timestamp: timestamp,nonceStr: nonceStr,signature: signature,jsApiList: ['checkJsApi', //判断当前客户端版本是否支持指定JS接口'onMenuShareTimeline', //分享给好友'onMenuShareAppMessage', //分享到朋友圈'onMenuShareQQ', //分享到QQ'onMenuShareWeibo', //分享到微博'onMenuShareQZone' //分享到QQ空间]});
   }/*** config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，* 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。* 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。*/
   wx.ready(function() {/*** config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，* 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。*/wx.error(function(res) {//mui.toast("调用微信JSSDK方法失败！");console.log("fail-->" + res.errMsg);});/*** 检查微信接口是否调用成功*/wx.checkJsApi({jsApiList: ['checkJsApi', //判断当前客户端版本是否支持指定JS接口'onMenuShareTimeline', //分享给好友'onMenuShareAppMessage', //分享到朋友圈'onMenuShareQQ', //分享到QQ'onMenuShareWeibo', //分享到微博'onMenuShareQZone' //分享到QQ空间],success: function(res) {// 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}console.log("checkJsApi-->" + JSON.stringify(res));}});
   });

5. 里面得获取签名字符串得方法网上很多，就不分享了
6. 遮罩层背景图片地址：http://588ku.com/sucai/6462380.html
7. 遮罩层CSS代码：

   #wx_share_background {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: none;z-index: 20000;
   }#wx_share_background img {position: fixed;z-index: 999; right: 18px;
   }

8. 需要注意的是，分享的链接域名或路径必须与当前页面对应的公众号JS安全域名一致。