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

以前有寫過一份 微信分享集成 的文章，

此次進行了從新的整理，

具體的功能有：

一、分享到朋友圈（圖+一句話）

二、分享到朋友（圖+標題+一句話）

三、強制顯示or隱藏 右上角更多按鈕

四、強制關閉當前頁面

這些功能在舊版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();
		}
	});
});

以上分別針對了一進去以後的微信分享到朋友圈、朋友，

作了一些操做後，分享的圖片、文案有所變化這一狀況作了處理，

另外針對某些操做以後，須要關閉窗口也有示範代碼