微信自定义分享功能二次封装

　　我原本是纯后端开发，但是最近因为工作原因，做了微信公众号的二次开发，说实话写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安全域名一致。

 

posted @ 2018-10-12 11:17  大师兄丶  阅读(1281)  评论(0)  编辑  收藏  举报