【微信分享】 微信分享集成 使用weixin js sdk 兼容 旧版本 2

之前有写过一份 微信分享集成 的文章，

这次进行了重新的整理，

具体的功能有：

1、分享到朋友圈（图+一句话）

2、分享到朋友（图+标题+一句话）

3、强制显示or隐藏 右上角更多按钮

4、强制关闭当前页面

这些功能在旧版weixin（民间版，所谓微信漏洞），和新版微信sdk中都有，

所以这里针对这些功能做了一下集成和整理

由于后端环境用的是php，所以首先引用微信php版的sdk包

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("appkey", "appsecret");
$signPackage = $jssdk->GetSignPackage();
?>

在头部加上这一段，其中appkey和appsecret替换成所在公众号的

js部分，除了引用weixin的js库和常规的jquery库等，还有以下的集成

var config_info = {
	appId: '<?php echo $signPackage["appId"];?>',
	timestamp: <?php echo $signPackage["timestamp"];?>,
	nonceStr: '<?php echo $signPackage["nonceStr"];?>',
	signature: '<?php echo $signPackage["signature"];?>'
};
	
var wx_share = {
	ShareData : {
		link : window.location.href,
		img : 'http://xxx.xxx.com/share.jpg', // 分享图标
		TimelineTitle : '这里是朋友圈标题', // 朋友圈标题
		FriendTitle : '这里是朋友标题', // 朋友标题
		FriendDesc : '朋友描述在这里', // 朋友描述
		TimelineSuccess : function(){ // 朋友圈分享成功
			alert('朋友圈分享成功！');
		},
		NormalSuccess : function(){ // 其它分享成功
			alert('其它分享成功！');
		}
	},
	ua : navigator.userAgent.toLowerCase(),
	broswer : 0,
	get_broswer_info : function(){
		var self = this;
		var ua = self.ua;
		if(ua.indexOf('weibo')!=-1){
			self.broswer = 1;
		}else if(ua.indexOf('qq/')!= -1){
			self.broswer = 2;
		}else if(ua.indexOf('micromessenger')!=-1){
			var v_weixin = ua.split('micromessenger')[1];
			v_weixin = v_weixin.substring(1,6);
			v_weixin = v_weixin.split(' ')[0];
			if(v_weixin.split('.').length == 2){
				v_weixin = v_weixin + '.0';
			}
			if(v_weixin < '6.0.2'){
				self.broswer = 3;
			}else{
				self.broswer = 4;
			}
		}
	},
	reset_weixin_share : function(){
		var self = this;
		wx.ready(function () {	
			wx.onMenuShareTimeline({ // 分享到朋友圈
				title: self.ShareData.TimelineTitle, // 分享标题
				link: self.ShareData.link, // 分享链接
				imgUrl: self.ShareData.img, // 分享图标
				success: function () { 
					// 用户确认分享后执行的回调函数
					self.ShareData.TimelineSuccess();
				},
				cancel: function () { 
					// 用户取消分享后执行的回调函数
				}
			});
			
			wx.onMenuShareAppMessage({ // 分享给朋友
				title: self.ShareData.FriendTitle, // 分享标题
				desc: self.ShareData.FriendDesc, // 分享描述
				link: self.ShareData.link, // 分享链接
				imgUrl: self.ShareData.img, // 分享图标
				type: '', // 分享类型,music、video或link，不填默认为link
				dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
				success: function () { 
					// 用户确认分享后执行的回调函数
					self.ShareData.NormalSuccess();
				},
				cancel: function () { 
					// 用户取消分享后执行的回调函数
				}
			});
			
			// wx.hideOptionMenu(); // 隐藏右上角菜单接口
			
			wx.showOptionMenu(); // 显示右上角菜单接口
		});
	},
	set_weixin_share : function(){
		var self = this;
		self.get_broswer_info();
		if(self.broswer == 3){
			function onBridgeReady(){
				WeixinJSBridge.call('showOptionMenu');  // 显示右上角菜单
				// WeixinJSBridge.call('hideOptionMenu'); // 隐藏右上角菜单
			}

			if (typeof WeixinJSBridge == "undefined"){
				if( document.addEventListener ){
					document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
				}else if (document.attachEvent){
					document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
					document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
				}
			}else{
				onBridgeReady();
			}

			document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
				
				WeixinJSBridge.on('menu:share:appmessage', function(argv) { // 分享给朋友
					WeixinJSBridge.invoke('sendAppMessage', {
						"img_url": self.ShareData.img,
						"link": self.ShareData.link,
						"desc": self.ShareData.FriendDesc,
						"title": self.ShareData.FriendTitle
					}, function(res) {
						if(res.err_msg == 'send_app_msg:ok'){ // 发送
							self.ShareData.NormalSuccess();
						}else{ // 取消
						}
					})
				});

				WeixinJSBridge.on('menu:share:timeline', function(argv) { // 分享到朋友圈
					WeixinJSBridge.invoke('shareTimeline', {
						"img_url": self.ShareData.img,
						"link": self.ShareData.link,
						"desc": self.ShareData.TimelineTitle,
						"title": self.ShareData.TimelineTitle
					}, function(res) {	
						// 旧版android分享到朋友圈无法区分 发送or取消 
						if(res.err_msg == 'share_timeline:ok'){ // 发送
							self.ShareData.NormalSuccess();
						}else{ // 取消
						}
					});
				});
				
			}, false);
		}else if(self.broswer == 4){
			wx.config({
				debug: true,
				appId: config_info.appId,
				timestamp: config_info.timestamp,
				nonceStr: config_info.nonceStr,
				signature: config_info.signature,
				jsApiList: [
					'onMenuShareTimeline',
					'onMenuShareAppMessage',
					
					'hideOptionMenu',
					'showOptionMenu',
					
					'closeWindow'
				]
			});
			
			self.reset_weixin_share();
		}
	},
	close_window : function(){
		var self = this;
		if(self.broswer == 3){
			WeixinJSBridge.invoke('closeWindow',{},function(res){
			});
		}else if(self.broswer == 4){
			wx.closeWindow();
		}
	}
}

$(document).ready(function(){
	$('#changeShare').bind({
		'touchstart' : function(){
			var rand_num = Math.floor(Math.random() * ( 1000 + 1));
			wx_share.ShareData.TimelineTitle = '这里是朋友圈'+rand_num+'标题'; // 朋友圈标题
			wx_share.ShareData.FriendTitle = '这里是朋友'+rand_num+'标题'; // 朋友标题
			wx_share.ShareData.FriendDesc = '朋友描述'+rand_num+'在这里'; // 朋友描述
			
			if(wx_share.broswer == 4){
				wx_share.reset_weixin_share();
			}
		}
	});

	wx_share.set_weixin_share();
	
	$('#closeShare').bind({
		'touchstart' : function(){
			wx_share.close_window();
		}
	});
});

以上分别针对了一进去之后的微信分享到朋友圈、朋友，

做了一些操作后，分享的图片、文案有所变化这一情况做了处理，

另外针对某些操作之后，需要关闭窗口也有示范代码

版权声明：本文为博主原创文章，未经博主允许不得转载。