mui框架实现分享功能

今天介绍两种分享功能：

1、基于plusshare.js插件

2、mui原生分享

1、基于plusshare.js插件的分享

1）需要先去下载plusshare.js插件

为了大家工作方便，我直接贴上插件的代码，大家直接新建js文件复制粘贴进去即可：

(function() {
	var plusReady = function(callback) {
		if(window.plus) {
			callback();
		} else {
			document.addEventListener('plusready', callback);
		}
	}
	var shareServices = {};
	var init = function() {
		plus.share.getServices(function(services) {
			for(var i = 0, len = services.length; i < len; i++) {
				shareServices[services[i].id] = services[i];
			}
		});
	};
	var isWechatInstalled = function() {
		return plus.runtime.isApplicationExist && plus.runtime.isApplicationExist({
			pname: 'com.tencent.mm',
			action: 'weixin://'
		});
	};

	function share(id, msg, callback) {
		var service = shareServices[id];
		if(!service) {
			callback && callback(false);
			return;
		}
		var _share = function() {
			service.send(msg, function() {
				plus.nativeUI.toast("分享到\"" + service.description + "\"成功！");
				callback && callback(true);
			}, function(e) {
				plus.nativeUI.toast("分享到\"" + service.description + "\"失败！");
				callback && callback(false);
			})
		};
		if(service.authenticated) {
			_share(service, msg, callback);
		} else {
			service.authorize(function() {
				_share(service, msg, callback);
			}, function(e) {
				console.log("认证授权失败");
				callback && callback(false);
			})
		}
	};

	function openSystem(msg, callback) {
		if(plus.share.sendWithSystem) {
			plus.share.sendWithSystem(msg, function() {
				//TODO 系统分享暂不支持回调
				//callback && callback(true);
			}, function() {
				//TODO 系统分享暂不支持回调
				//callback && callback(false);
			});
		} else {
			callback && callback(false);
		}
	}
	var open = function(msg, callback) {
		/**
		 *如下情况直接打开系统分享
		 * 1、未配置微信分享通道
		 * 2、用户手机未安装威胁你
		 * 3、360浏览器下
		 */

		if(shareServices.weixin && isWechatInstalled() && !/360\sAphone/.test(navigator.userAgent)) {
			plus.nativeUI.actionSheet({
				title: '分享到',
				cancel: "取消",
				buttons: [{
					title: "微信消息"
				}, {
					title: "微信朋友圈"
				}, {
					title: "更多分享"
				}]
			}, function(e) {
				var index = e.index;
				switch(index) {
					case 1: //分享到微信好友
						msg.extra = {
							scene: 'WXSceneSession'
						};
						share('weixin', msg, callback);
						break;
					case 2: //分享到微信朋友圈
						msg.title = msg.content;
						msg.extra = {
							scene: 'WXSceneTimeline'
						};
						share('weixin', msg, callback);
						break;
					case 3: //更多分享
						var url = msg.href ? ('( ' + msg.href + ' )') : '';
						msg.title = msg.title + url;
						msg.content = msg.content + url;
						openSystem(msg, callback);
						break;
				}
			})
		} else {
			//系统分享
			var url = msg.href ? ('( ' + msg.href + ' )') : '';
			msg.title = msg.title + url;
			msg.content = msg.content + url;
			openSystem(msg, callback);
		}
	};
	plusReady(init);
	window.plusShare = open;
})();

2）分享模块代码如下(页面按钮只要出发这个分享事件即可)：

		//分享
			function shareApp() {				
				//分享内容，开发者可自定义
				var message = {
					title: "", //应用名字
					content: "app是一款小巧高能的移动办公app，其提供的便捷功能与丰富的工具应用可以为您提高工作效率，赶快下载 吧！",
					href: "", //分享出去后，点击跳转地址
					thumbs: [config.apiHost + "/static/image/logo.png"] //分享缩略图
				}
				//调起分享
				plusShare(message, function(res) {
					//分享回调函数
					if(res) {
						plus.nativeUI.toast("分享成功");
					} else {
						plus.nativeUI.toast("分享失败");
					}
				})
			}

2、mui原生的分享：

直接上代码，大家自己看吧：

         //分享操作 
		var shares = {};
        // 初始化服务列表
		mui.plusReady(function() {
			plus.share.getServices(function(s) {
				if (s && s.length > 0) {
					for (var i = 0; i < s.length; i++) {
						var t = s[i];
						shares[t.id] = t;
					}
				}
			}, function() {
				console.log("获取分享服务列表失败");
			});
		});
		 //分享链接点击事件
		document.getElementById("share").addEventListener('tap', function() {
			var ids = [{
					id: "weixin",
					ex: "WXSceneSession"
				}, {
					id: "weixin",
					ex: "WXSceneTimeline"
				}, {
					id: "sinaweibo"
				}, {
					id: "tencentweibo"
				}, {
					id: "qq"
				}],
				bts = [{
					title: "发送给微信好友"
				}, {
					title: "分享到微信朋友圈"
				}, {
					title: "分享到新浪微博"
				}, {
					title: "分享到腾讯微博"
				}, {
					title: "分享到QQ"
				}];
			plus.nativeUI.actionSheet({
				cancel: "取消",
				buttons: bts
			}, function(e) {
				var i = e.index;
				if (i > 0) {
					var s_id = ids[i - 1].id;
					var share = shares[s_id];
					if (share.authenticated) {
						shareMessage(share, ids[i - 1].ex);
					} else {
						share.authorize(function() {
							shareMessage(share, ids[i - 1].ex);
						}, function(e) {
							console.log("认证授权失败：" + e.code + " - " + e.message);
						});
					}
				}
			});
		});
        
        // 分享执行动作
		function shareMessage(share, ex) {
				var msg = {
					extra: {
						scene: ex
					}
				};
				msg.href = "http://www.dcloud.io/hellomui/";
				msg.title = "最接近原生APP体验的高性能前端框架";
				msg.content = "我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距";
				if (~share.id.indexOf('weibo')) {
					msg.content += "；体验地址：http://www.dcloud.io/hellomui/";
				}
				msg.thumbs = ["_www/images/logo.png"];
				share.send(msg, function() {
					console.log("分享到\"" + share.description + "\"成功！ ");
				}, function(e) {
					console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
				});
			}