微信自定義分享功能二次封裝

　　我本來是純後端開發，可是最近由於工做緣由，作了微信公衆號的二次開發，說實話寫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" onclick="go_to_the_wx_share()"></span>

3. 點擊分享後的遮罩層：

   <div id="wx_share_background" onclick="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，不填默認爲link
   	var dataUrl = ''; // 若是type是music或video，則要提供數據連接，默認爲空
   
   	var wx_share_parm_obj = {
   		title: title, //分享標題
   		desc: desc, //分享描述
   		link: link, //分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
   		imgUrl: imgUrl, //分享圖標
   		type: 'link', // 分享類型,music、video或link，不填默認爲link
   		dataUrl: "", // 若是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,complete
   	switch(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，不填默認爲link
   		dataUrl: 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");
   		}
   	});
   
   	//分享到QQ
   	wx.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安全域名一致。