html5+ share-分享

share-分享

Share模块管理客户端的社交分享功能,提供调用终端社交软件的分享能力。通过plus.share可获取社交分享管理对象。

方法:

对象:

回调方法:

权限:

permissions

{
// ...
"permissions":{
	// ...
	"Share": {
		"description": "分享"
	}
}
}

ShareService

分享服务对象

interface plus.share.ShareService {
	// Attributes
	attribute DOMString id;
	attribute DOMString description;
	attribute Boolean authenticated;
	attribute DOMString accessToken;
	attribute Boolean nativeClient;
	
	// Methods
	function void authorize( successCallback, errorCallback );
	function void forbid();
	function void send( message );
}

说明:

ShareService对象用于表示分享服务,在JS中为对象,用于向系统请求分享操作。

属性:

方法:

ShareServerIdentity

分享服务标识

常量:

  • sinaweibo: _(DOMString 类型 )_新浪微博

  • tencentweibo: _(DOMString 类型 )_腾讯微博

  • weixin: _(DOMString 类型 )_微信

ShareMessage

JSON对象,分享消息对象

interface plus.share.ShareMessage {
	attribute String content;
	attribute String\[\] thumbs;
	attribute String\[\] pictures;
	attribute String href;
	attribute String title;
	attribute JSON extra;
	attribute GEOPosition geo;
	attribute ShareMessageExtra extra;
	attribute String interface;
}

说明:

ShareMessage对象用于表示分享消息内容,在JS中为JSON对象,用于向系统发送分享信息操作。

属性:

  • content: _(String 类型 )_分享消息的文字内容

  • pictures: _(Array[ String ] 类型 )_分享消息的图片

    分享消息中包含的图片路径,仅支持本地路径。 若分享平台仅支持提交一张图片,传入多张图片则仅提交第一张图片。 如果不能同时支持其它内容信息,优先级顺序为:pictures>content。

  • thumbs: _(Array[ Stromg ] 类型 )_分享消息的缩略图

    分享消息中包含的缩略图路径; 若分享平台仅支持提交一张图片,传入多张图片则仅提交第一张图片; 如果分享平台的信息不支持缩略图,若没有设置消息的图片(pictures)则使用缩略图,否则忽略其属性值。 注意:图片有大小限制,推荐图片小于20Kb。

  • href: _(String 类型 )_分享独立的链接

    分享独立链接地址,仅支持网络地址(以http://或https://开头)。 如果不能同时支持其它内容信息,优先级顺序为:href>pictures>content。

  • title: _(String 类型 )_分享消息的标题

    目前仅微信分享独立链接消息时支持。

  • geo: _(GeoPosition 类型 )_分享消息中包含的用户地理信息数据

  • extra: _(ShareMessageExtra 类型 )_分享消息扩展参数

  • interface: _(String 类型 )_分享消息的模式

    可取值: “auto” - 自动选择,如果已经安装微博客户端则采用编辑界面进行分享,否则采用无界面分享; “slient” - 静默分享,采用无界面模式进行分享; “editable” - 进入编辑界面,用户确认分享内容后发送,如果当前未安装微博客户端则触发错误回调。 默认值为"auto"。 (仅新浪微博分享时生效)

GeoPosition

JSON对象,用户位置信息

interface plus.share.GeoPosition {
	attribute Number latitude;
	attribute Number longitude;
}

说明:

GeoPosition对象用于表示用户分享消息时的位置信息。用于标识分享操作时用户的位置信息。

属性:

  • latitude: _(Number 类型 )_用户位置的纬度坐标信息

  • longitude: _(Number 类型 )_用户位置的经度坐标信息

ShareMessageExtra

JSON对象,保存分享消息扩展信息

interface plus.share.ShareMessageExtra {
	attribute String scene;
}

说明:

ShareMessageExtra对象用于保存各分享平台扩展的参数,用于自定义分享功能。

属性:

  • scene: _(String 类型 )_微信分享场景,仅微信分享平台有效

    可取值: "WXSceneSession"分享到微信的“我的好友”; "WXSceneTimeline"分享到微信的“朋友圈”中; “WXSceneFavorite"分享到微信的“我的收藏”中。 默认值为"WXSceneSession”。

Authorize

分享授权控件对象

interface plus.share.Authorize {
	// Methods
	function void load( id );
	function void setVisible( visible );

	// Events
	function void onloaded();
	function void onauthenticated();
	function void onerror();
}

说明:

Authorize对象表示分享控件对象,用于在窗口中显示分享控件,使用此对象可自定义分享授权界面。

构造:

方法:

  • load: 加载分享授权页面
  • setVisible: 设置分享授权控件是否可见

事件:

ServicesSuccessCallback

获取分享服务成功回调

void ServicesSuccessCallback( services ) {
	// Get share services success code
}

说明:

当获取分享服务列表成功时的回调函数,用于返回终端支持的分享服务列表。

参数:

  • services: ( Array[ ShareService ] ) 必选 数组,运行环境支持的分享服务列表
    运行环境支持的分享服务列表数组,可通过services.length获取分享服务列表的数目。

返回值:

void : 无

AuthorizeSuccessCallback

分享授权认证成功回调

void AuthorizeSuccessCallback(services){
	  // Authorize success code
}

说明:

分享服务授权认证操作成功时调用。

参数:

  • service: ( ShareService ) 必选 授权认证操作的分享服务对象

返回值:

void : 无

ShareSuccessCallback

分享操作成功回调

void ShareSuccessCallback () {
	// Share success code
}

说明:

分享操作成功回调函数,当分享操作成功时调用。

参数:

返回值:

void : 无

ShareErrorCallback

分享操作失败回调

void ShareErrorCallback ( error ) {
	// Error 
	var code = error.code; 			// 错误编码
	var message = error.message;	// 错误描述信息
}

说明:

当分享操作失败时的回调函数,用于返回分享相关操作失败的错误信息。

参数:

  • error: ( DOMException ) 必选 分享操作失败错误信息
    可通过error.code(Number类型)获取错误编码; 可通过error.message(String类型)获取错误描述信息。

返回值:

void : 无

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>

		<script type="text/javascript">
			var shares = null;
			// H5 plus事件处理
			function plusReady() {
				updateSerivces();
			}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
			/**
			 * 更新分享服务
			 */
			function updateSerivces() {
				plus.share.getServices(function (s) {
					shares = {};
					for (var i in s) {
						var t = s[i];
						shares[t.id] = t;
					}
				}, function (e) {
					console.log('获取分享服务列表失败:' + e.message);
				});
			}
			/**
			 * 调用系统分享
			 */
			function shareSystem() {
				console.log('调用系统分享');
				var msg = {
					content: sharecontent.value
				};
				if (pic && pic.realUrl) {
					msg.pictures = [pic.realUrl];
				}
				plus.share.sendWithSystem ? plus.share.sendWithSystem(msg, function () {
					outLine('Success');
					console.log('Success');
				}, function (e) {
					outLine('Failed: ' + JSON.stringify(e));
					console.log('Failed: ' + JSON.stringify(e));
				}) : shareSystemNativeJS();
			}

			function shareSystemNativeJS() {
				if (plus.os.name !== 'Android') {
					plus.nativeUI.alert('此平台暂不支持系统分享功能!');
					return;
				}
				var intent = new Intent(Intent.ACTION_SEND);
				if (pic && pic.realUrl) {
					var p = '';
					p = pic.realUrl;
					if (p.substr(0, 7) === 'file://') {
						p = p.substr(7);
					} else if (p.sub(0) !== '/') {
						p = plus.io.convertLocalFileSystemURL(p);
					}
				}
				var f = new File(p);
				var uri = Uri.fromFile(f);
				if (f.exists() && f.isFile()) {
					console.log('image/*');
					intent.setType('image/*');
					intent.putExtra(Intent.EXTRA_STREAM, uri);
				} else {
					console.log('text/plain');
					intent.setType('text/plain');
				}
				intent.putExtra(Intent.EXTRA_SUBJECT, 'HelloH5');
				intent.putExtra(Intent.EXTRA_TEXT, sharecontent.value);
				intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
				main.startActivity(Intent.createChooser(intent, '系统分享HelloH5'));
			}
			/**
			 * 分享操作
			 * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
			 * @param {Boolean} bh 是否分享链接
			 */
			function shareAction(sb, bh) {
				console.log('分享操作:');
				if (!sb || !sb.s) {
					outLine('无效的分享服务!');
					return;
				}
				var msg = {
					content: sharecontent.value,
					extra: {
						scene: sb.x
					}
				};
				if (bh) {
					msg.href = sharehref.value;
					if (sharehrefTitle && sharehrefTitle.value != '') {
						msg.title = sharehrefTitle.value;
					}
					if (sharehrefDes && sharehrefDes.value != '') {
						msg.content = sharehrefDes.value;
					}
					msg.thumbs = ['_www/logo.png'];
					msg.pictures = ['_www/logo.png'];
				} else {
					if (pic && pic.realUrl) {
						msg.pictures = [pic.realUrl];
					}
				}
				// 发送分享
				if (sb.s.authenticated) {
					outLine('---已授权---');
					shareMessage(msg, sb.s);
				} else {
					outLine('---未授权---');
					sb.s.authorize(function () {
						shareMessage(msg, sb.s);
					}, function (e) {
						outLine('认证授权失败:' + e.code + ' - ' + e.message);
					});
				}
			}
			/**
			 * 发送分享消息
			 * @param {JSON} msg
			 * @param {plus.share.ShareService} s
			 */
			function shareMessage(msg, s) {
				outLine(JSON.stringify(msg));
				s.send(msg, function () {
					outLine('分享到"' + s.description + '"成功!');
				}, function (e) {
					outLine('分享到"' + s.description + '"失败: ' + JSON.stringify(e));
				});
			}
			/**
			 * 解除所有分享服务的授权
			 */
			function cancelAuth() {
				try {
					console.log('解除授权:');
					for (var i in shares) {
						var s = shares[i];
						if (s.authenticated) {
							outLine('取消"' + s.description + '"');
						}
						s.forbid();
					}
					// 取消授权后需要更新服务列表
					updateSerivces();
					outLine('操作成功!');
				} catch (e) {
					alert(e);
				}
			}
			// 拍照添加图片分享
			function shareCameraPicture() {
				console.log('拍照添加分享图片:');
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function (p) {
					plus.io.resolveLocalFileSystemURL(p, function (entry) {
						pic.src = entry.toLocalURL();
						pic.realUrl = p;
						outLine('拍照图片:' + pic.realUrl);
					}, function (e) {
						outLine('读取拍照文件错误:' + e.message);
					});
				}, function (e) {
					outLine('拍照失败:' + e.message);
				});
			}
			// 从相册添加图片分享
			function shareGalleryPicture() {
				console.log('从相册添加分享图片:');
				plus.gallery.pick(function (p) {
					// 从相册返回的路径不需要转换可以直接使用
					pic.src = p;
					pic.realUrl = pic.src;
					outLine('选择图片:' + pic.realUrl);
					//      plus.io.resolveLocalFileSystemURL(p,function(entry){
					//			pic.src=entry.toLocalURL();
					//			pic.realUrl=pic.src;
					//			outLine('选择图片:'+pic.realUrl);
					//		},function(e){
					//			outLine('读取拍照文件错误:'+e.message);
					//		} );
				});
			}
			// 使用Logo图片分享
			function shareLogoPicture() {
				console.log('使用Logo分享图片:');
				var url = '_www/logo.png';
				plus.io.resolveLocalFileSystemURL(url, function (entry) {
					pic.src = entry.toLocalURL();
					pic.realUrl = url;
				}, function (e) {
					outLine('读取Logo文件错误:' + e.message);
				});
			}
			// 打开分享
			function shareShow() {
				var shareBts = [];
				// 更新分享列表
				var ss = shares['weixin'];
				if (navigator.userAgent.indexOf('qihoo') < 0) { //在360流应用中微信不支持分享图片
					ss && ss.nativeClient && (shareBts.push({
							title: '微信朋友圈',
							s: ss,
							x: 'WXSceneTimeline'
						}),
						shareBts.push({
							title: '微信好友',
							s: ss,
							x: 'WXSceneSession'
						}));
				}
				ss = shares['sinaweibo'];
				ss && shareBts.push({
					title: '新浪微博',
					s: ss
				});
				ss = shares['qq'];
				ss && ss.nativeClient && shareBts.push({
					title: 'QQ',
					s: ss
				});
				// 弹出分享列表
				shareBts.length > 0 ? plus.nativeUI.actionSheet({
					title: '分享',
					cancel: '取消',
					buttons: shareBts
				}, function (e) {
					(e.index > 0) && shareAction(shareBts[e.index - 1], false);
				}) : plus.nativeUI.alert('当前环境无法支持分享操作!');
			}
			// 分析链接
			function shareHref() {
				var shareBts = [];
				// 更新分享列表
				var ss = shares['weixin'];
				ss && ss.nativeClient && (shareBts.push({
						title: '微信朋友圈',
						s: ss,
						x: 'WXSceneTimeline'
					}),
					shareBts.push({
						title: '微信好友',
						s: ss,
						x: 'WXSceneSession'
					}));
				ss = shares['qq'];
				ss && ss.nativeClient && shareBts.push({
					title: 'QQ',
					s: ss
				});
				// 弹出分享列表
				shareBts.length > 0 ? plus.nativeUI.actionSheet({
					title: '分享链接',
					cancel: '取消',
					buttons: shareBts
				}, function (e) {
					(e.index > 0) && shareAction(shareBts[e.index - 1], true);
				}) : plus.nativeUI.alert('当前环境无法支持分享链接操作!');
			}

		</script>

		<style type="text/css">
			#sharecontent {
				width: 80%;
				-webkit-user-select: text;
				border: 1px solid #6C6C6C;
				-webkit-border-radius: 2px;
				border-radius: 2px;
			}

			#pic {
				width: 100px;
				height: 100px;
				/*border: 1px dashed #CCCCCC;*/
			}

			.sharehref {
				width: 80%;
				-webkit-user-select: text;
				border: 1px solid #6C6C6C;
				-webkit-border-radius: 2px;
				border-radius: 2px;
				margin-bottom: .5em;
			}

		</style>
	</head>

	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">Share</div>
			<div class="nvbt idoc" onclick="openDoc('Share Document','/doc/share.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<br />
			<p class="heading">分享内容:</p>
			<textarea id="sharecontent" rows="3">我正在使用HBuilder+HTML5开发移动应用,赶紧跟我一起来体验!</textarea>
			<br /><br />
			<p class="heading">分享图片:</p>
			<table style="width:100%;">
				<tbody>
					<tr>
						<td style="width:30%">
							<div class="button button-select" onclick="shareCameraPicture()">拍照</div>
						</td>
						<td style="width:30%">
							<div class="button button-select" onclick="shareGalleryPicture()">相册选取</div>
						</td>
						<td style="width:30%">
							<div class="button button-select" onclick="shareLogoPicture()">使用logo图</div>
						</td>
					</tr>
				</tbody>
			</table>
			<img id="pic" src="../img/add.png" />
			<br />
			<div class="button" onclick="shareShow()">分 享</div>
			<div class="button" onclick="shareSystem()">系统分享</div>
			<div style="padding: 0.5em 1em;">
				<hr color="#EEE" />
			</div>
			<p class="heading">链接地址:</p>
			<input id="sharehref" class="sharehref" type="url" value="http://www.dcloud.io/" placeholder="请输入要分享的链接地址" />
			<p class="heading">链接标题:</p>
			<input id="sharehrefTitle" class="sharehref" type="text" value="DCloud HBuilder-做最好的HTML5开发工具" placeholder="请输入要分享的链接标题" />
			<p class="heading">链接描述:</p>
			<input id="sharehrefDes" class="sharehref" type="text" value="我正在使用HBuilder+HTML5开发移动应用,赶紧跟我一起来体验!" placeholder="请输入要分享的链接描述" />
			<div class="button" onclick="shareHref()">分享链接</div>
			<br /><br />
			<div style="padding: 0.5em 1em;">
				<hr color="#EEE" />
			</div>
			<p class="des">如果需要解除分享中绑定的用户信息,请点击解除授权:</p>
			<div class="button" onclick="cancelAuth()">解除授权</div>
		</div>
		<div id="output">
			Share模块管理客户端的社交分享功能,提供调用终端社交软件的分享能力。通过plus.share可获取社交分享管理对象。
		</div>
	</body>

</html>

发布了33 篇原创文章 · 获赞 6 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_41961749/article/details/82979830