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

  我原本是纯后端开发,但是最近因为工作原因,做了微信公众号的二次开发,说实话写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  大师兄丶  阅读(1295)  评论(0编辑  收藏  举报