专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML5

HTML5+轨范:Share(管理客户端的社交分享功能)

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
HTML5+规范:Share(管理客户端的社交分享功能)

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

1、方法

getServices: 获取分享服务

       void plus.share.getServices( successCB, errorCB );

说明:获取终端支持的分享通道列表,可用于提示用户进行分享服务器的选择。获取分享服务成功后通过successCB回调返回支持的所有服务列表,获取服务失败则通过errorCB回调返回。

参数:

successCB: ( ServicesSuccessCallback ) 必选 获取分享服务成功回调。获取分享服务列表成功时的回调函数,用于返回终端支持的分享服务列表。

errorCB: ( ShareErrorCallback ) 可选 获取分享服务失败回调。获取分享服务列表失败时的回调函数,用于返回错误信息。

返回值:void : 无

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Share Example</title>
<script type="text/javascript">
var shares=null;
// 监听plusready事件  
document.addEventListener( "plusready", function(){
// 扩展API加载完毕,现在可以正常调用扩展API
plus.share.getServices( function(s){
shares = s;
}, function(e){
alert( "获取分享服务列表失败:"+e.message );
} );
}, false );
</script>
</head>
<body>
</body>
</html>


2、对象

2.1、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中为对象,用于向系统请求分享操作。

2.1.1属性

(1)、id: 分享服务标识

      ShareServerIdentity 类型 只读属性。用于表示分享服务标识,如“sinaweibo”表示新浪微博、“tencentweibo”表示腾讯微博、“weixin”表示微信、“qq”表示腾讯QQ。

(2)、description: 分享服务描述

     DOMString 类型 只读属性。用于描述分享服务的信息,如“新浪微博”、“腾讯微博”、“微信”、“QQ”。

(3)、authenticated: 是否授权认证

    Boolean 类型 只读属性。用于标识此分享是否已经授权认证过,true表示已完成授权认证;false表示未完成授权认证。

(4)、accessToken: 授权认证信息

    DOMString 类型 只读属性。仅在authenticated为true时有效,标识客户认证标识信息,用于发送分享信息。

(5)、nativeClient: 是否存在对应的分享客户端

    Boolean 类型 只读属性。对于某些分享服务,可直接调用本地客户端程序进行授权认证,此属性即可提供此相关信息,若没有安装本地客户端则可能调用其它方式进行分享操作,如WAP方式等。

2.1.2、方法:

(1)、authorize: 授权认证操作

          void obj.authorize( successCB, errorCB );

说明:对指定的分享服务进行授权认证操作,在授权前可通过ShareService.authenticated属性判断是否已经授权过,通常只需要对没有进行过授权认证的服务进行授权认证操作。授权认证操作成功后通过successCB回调函数通知操作完成,操作失败则通过errorCB回调返回。

参数:

successCB: ( AuthorizeSuccessCallback ) 必选 分享服务授权认证成功回调。分享服务授权认证操作成功时的回调函数,用于返回分享授权操作成功信息。

errorCB: ( ShareErrorCallback ) 可选 分享服务授权认证失败回调。分享服务授权认证操作失败时的回调函数,用于返回错误信息。

返回值:void : 无

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Share Example</title>
<script type="text/javascript">
var shares=null;
// 监听plusready事件  
document.addEventListener( "plusready", function(){
// 扩展API加载完毕,现在可以正常调用扩展API
plus.share.getServices( function(s){
shares = s;
}, function(e){
alert( "获取分享服务列表失败:"+e.message );
} );
}, false );
function shareAction(){
var s = shares[0];
if ( !s.authenticated ) {
s.authorize( functioin(){
alert( "认证完成!" );
}, function(e){
outLine( "未进行认证" );
} )
}
}
</script>
</head>
<body>
</body>
</html>


(2)、forbid: 取消授权认证

              void obj.forbid();

说明:对指定的分享服务取消授权认证操作,取消授权认证后,再次分享时需重新进行授权操作。

返回值:void : 无

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Share Example</title>
<script type="text/javascript">
var shares=null;
// 监听plusready事件  
document.addEventListener( "plusready", function(){
// 扩展API加载完毕,现在可以正常调用扩展API
plus.share.getServices( function(s){
shares = s;
}, function(e){
alert( "获取分享服务列表失败:"+e.message );
} );
}, false );
// 取消所有分享服务的
function cancelAuthorize(){
for ( var i in shares ) {
var s = shares[i];
if ( s.authenticated ) {
s.forbid();
}
}
}
</script>
</head>
<body>
</body>
</html>


(3)、send: 发送分享

      void obj.send( msg, successCB, errorCB );

说明:发送分享消息,分享消息的内容通过msg设置。发送成功后通过successCB回调函数通知操作完成,发送失败则通过errorCB回调返回。若分享服务没有进行授权认证或授权认证失效则触发失败回调函数。

参数:

msg: ( ShareMessage ) 必选 要发送的分享消息对象。用于设置要分享的消息内容,如文字内容,图片等信息。

successCB: ( ShareSuccessCallback ) 必选 发送分享消息成功回调。发送分享消息操作成功时的回调函数,用于返回发送分享消息操作成功信息。

errorCB: ( ShareErrorCallback ) 可选 发送分享消息失败回调。发送分享消息操作失败时的回调函数,用于返回错误信息。

返回值:void : 无

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Share Example</title>
<script type="text/javascript">
var shares=null;
// 监听plusready事件  
document.addEventListener( "plusready", function(){
// 扩展API加载完毕,现在可以正常调用扩展API
plus.share.getServices( function(s){
shares = s;
}, function(e){
alert( "获取分享服务列表失败:"+e.message );
} );
}, false );
/**
 * 分享操作
 * @param {plus.share.ShareService} s
 */
function shareAction(s) {
if ( !s ) {
return;
}
if ( s.authenticated ) {
shareMessage( s );
} else {
s.authorize( shareMessage, function(e){
alert( "未进行认证" );
} )
}
}
/**
 * 发送分享消息
 * @param {plus.share.ShareService} s
 */
function shareMessage(s){
s.send( {content:"Hello"}, function(){
alert( "分享成功!" );
}, function(e){
alert( "分享失败:"+e.message );
} );
}
</script>
</head>
<body>
</body>
</html>


2.2、ShareServerIdentity: 分享服务标识

常量:

"sinaweibo": (DOMString 类型 )新浪微博

"tencentweibo": (DOMString 类型 )腾讯微博

"weixin": (DOMString 类型 )微信

2.3、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;

}

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

属性:

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

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

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

平台支持Android - 2.3+ (支持): 可支持网络图片路径。iOS - 5.1+ (不支持): 不支持网络图片路径。

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

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Share Example</title>
<script type="text/javascript">
var shares=null,sharewx=null;
// 监听plusready事件  
document.addEventListener( "plusready", function(){
// 扩展API加载完毕,现在可以正常调用扩展API
plus.share.getServices( function(s){
shares = s;
for(var i in s){
if('weixin'==s[i].id){
sharewx=s[i];
}
}
}, function(e){
alert( "获取分享服务列表失败:"+e.message );
} );
}, false );
function shareWeixinMessage(){
sharewx.send( {content:"DCloud HBuilder-做最好的HTML5开发工具",href:"http://www.dcloud.io/",extra:{scene:"WXSceneTimeline"}}, function(){
alert( "分享成功!" );
}, function(e){
alert( "分享失败:"+e.message );
});
}
</script>
</head>
<body>
<button onclick="shareWeixinMessage()">分享链接到微信朋友圈</button>
</body>
</html>


(5)、title: (String 类型 )分享消息的标题。目前仅微信分享独立链接消息时支持。

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

(7)、extra: (ShareMessageExtra 类型 )分享消息扩展参数

2.4、GeoPosition: JSON对象,用户位置信息

interface plus.share.GeoPosition {

attribute Number latitude;

attribute Number longitude;

}

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

属性:

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

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

2.5、ShareMessageExtra: JSON对象,保存分享消息扩展信息

interface plus.share.ShareMessageExtra {

attribute String scene;

}

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

属性:

scene: (String 类型 )微信分享场景,仅微信分享平台有效。可取值: "WXSceneSession"分享到微信的“我的好友”; "WXSceneTimeline"分享到微信的“朋友圈”中; "WXSceneFavorite"分享到微信的“我的收藏”中。 默认值为"WXSceneSession"。

2.6、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对象表示分享控件对象,用于在窗口中显示分享控件,使用此对象可自定义分享授权界面。

2.6.1、构造

Authorize(id,display): 创建分享授权控件对象

    var obj = new plus.share.Authorize( id, display );

说明:根据指定的id的元素创建分享控件

参数:

id: ( DOMString ) 必选 分享控件在窗口的对应obj节点的id值,此id值用于定位控件位置

visible: ( Boolean ) 可选 分享控件是否创建后立即显示,默认值为true

返回值:Authorize : 分享控件对象

2.6.2、方法

(1)、load: 加载分享授权页面

              void obj.load( id );

说明:创建分享授权页面后,需要调用此方法指定分享服务标识来加载授权页面数据,此标识可使用ShareService对象的id属性。

参数:id: ( DOMString ) 必选 要加载的分享服务标识

返回值:void : 无

(2)、setVisible: 设置分享授权控件是否可见

             void obj.setVisible( visible );

说明:创建分享授权页面后,调用此方法设置分享授权控件在页面中是否可见。

参数:visible: ( Boolean ) 必选 要设置分享控件是否可见,true标识可见,false表示不可见。

返回值:void : 无

2.6.3、事件

(1)、onloaded: 分享控件加载完成事件

void obj.onloaded = function () {

// loaded code

}

说明:EventHandler 类型。分享授权控件内容加载完成事件,通过调用load方法加载分享授权控件内容,当内容加载完成时触发。

(2)、onauthenticated: 分享授权认证成功事件

void obj.onauthenticated= function ( service) {

// Authenticate success code

}

说明:ShareSuccessCallback 类型。用户在分享授权控件上输入操作授权成功时触发,事件方法格式参考ShareSuccessCallback回调函数。

(3)、onerror: 分享授权认证失败事件

void obj.onerror= function ( error ) {

// Error code

}

说明:ShareErrorCallback 类型。用户在分享授权控件上输入操作授权认证错误时触发,事件方法格式参考ShareErrorCallback回调函数。

3、回调方法

3.1、ServicesSuccessCallback: 获取分享服务成功回调

void ServicesSuccessCallback( services ) {

// Get share services success code

}

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

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

返回值:void : 无

3.2、AuthorizeSuccessCallback : 分享消息成功回调

void AuthorizeSuccessCallback( service ) {

  // Authorize success code

}

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

参数:service: ( ShareService ) 必选 认证操作成功的分享服务对象

返回值:void : 无

3.3、ShareSuccessCallback : 分享操作成功回调

void ShareSuccessCallback () {

// Share success code

}

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

返回值:void : 无

3.4、ShareErrorCallback : 分享操作失败回调

void ShareErrorCallback ( error ) {

// Recognition error code

}

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

参数:error: ( DOMException ) 必选 分享操作失败错误信息,通过error.code获取错误代码

返回值:void : 无

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

  • 使用HBuilder编辑器将html五页面打包成APP

    使用HBuilder编辑器将html5页面打包成APP   使用HBuilder编辑器将html5页面打包成APP (ios+安卓) 1.首先先安装HBuilder编...

  • 基于phonegap,html5,ratchet,handlebars等技术的微神情APP

    基于phonegap,html5,ratchet,handlebars等技术的微表情APP 该app是由很多有意思的微表情构成的,支持40种表情,并且每种表情都有不同的...

  • HTML5 Web 客户端五种离线储存方式汇总

    HTML5 Web 客户端五种离线存储方式汇总 最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于H...

  • SPICE-HTML5 鼠标指针BUG修补

    SPICE-HTML5 鼠标指针BUG修复 研究SPICE,找到了他们官方指定的HTML5客户端。 下载下来用一下,发现跟网页VNC的水平差不多了。 http:...

  • HTML5+JS 《五子飞》游戏实现(5)移动棋子

    HTML5+JS 《五子飞》游戏实现(五)移动棋子 上一章 我们知道了怎么处理两个重要的吃棋动作,想要吃对方的棋子,首先得移动自己的棋子。...

  • HTML5中怎么上传Resize后的图片

    HTML5中如何上传Resize后的图片 参考资料: 不依赖form标签,而是自己定义FormData上传数据,文件被编码为一个Blob或File对象: https...

  • (1)HTML5

    (一)HTML5 可以解决什么问题: 可以实现网页的ajax加载,同时又能完成URL的改变而没有网页跳转刷新的迹象,就像是改变了网页的hash(#)一样。...

  • 一款纯html5实现的钟表

    一款纯html5实现的时钟 今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图: 在线预览...

  • 使用 WebSockets 开展 HTML5 视频直播

    使用 WebSockets 进行 HTML5 视频直播 实验环境:Ubuntu。 参考以下两个链接进行实践: http://segmentfault.com/blog/xingrz/119...

  • 查询浏览器是不是支持html5

    查询浏览器是否支持html5 js判断 插入js代码====================================================== <script> wind...

热门推荐: