跳转到: 导航, 搜索
第24行: 第24行:
  
  
<div class="wiki_title_withline">网站接入绑定域名</div>
+
<div class="wiki_title_withline">1、网站接入绑定域名</div>
  
 
<div style="margin:15px 0;">
 
<div style="margin:15px 0;">
第36行: 第36行:
  
  
<div class="wiki_title_withline">增加命名空间</div>
+
<div class="wiki_title_withline">2、增加命名空间</div>
  
 
<div style="margin:15px 0;">
 
<div style="margin:15px 0;">
第42行: 第42行:
 
</div>
 
</div>
  
 +
<div class="code_type">HTML</div>
 +
<pre class="brush:html">
 +
<html xmlns:wb="http://open.weibo.com/wb">
 +
</pre>
  
<div class="wiki_title_withline">引用JS SDK文件</div>
 
  
在页面顶端加入如下代码
+
<div class="wiki_title_withline">3、引用JS SDK文件</div>
<pre>
+
<script src=" http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=3168919025" type="text/javascript" charset="utf-8"></script>
+
</pre>
+
  
 +
<div style="margin:15px 0;">
 +
在你的页面部署wb.js,同时,如果你的页面编码不是UTF-8,请添加charset="utf-8"属性。
 +
</div>
  
 +
<div class="code_type">HTML</div>
 +
<pre class="brush:html">
 +
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY" type="text/javascript" charset="utf-8"></script>
 +
</pre>
  
<div class="wiki_title_withline">开始使用JS SDK</div>
+
<div style="margin:15px 0;">
 +
如果你的应用处于开发调试过程,建议使用JSSDK的调试模式,开启调试模式,只需增加一个参数debug=true即可,JSSDK会在浏览器的控制台或自带的JS调试工具中输出相关的日志信息,以方便调试。
 +
</div>
  
 +
<div class="code_type">HTML</div>
 +
<pre class="brush:html">
 +
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY&debug=true" type="text/javascript" charset="utf-8"></script>
 +
</pre>
  
  
 +
<div class="wiki_title_withline">4、开始使用JS SDK</div>
  
 +
<div style="margin:15px 0;">
 +
调用JSSDK访问API接口。
 +
</div>
  
==JS SDK公开方法及说明==
+
<div class="code_type">Javascript</div>
 +
<pre class="brush:js">
 +
WB2.anyWhere(function(W){
 +
    W.parseCMD("/users/show.json", function(sResult, bStatus){
 +
        try{
 +
            //to do something...
 +
        }catch(e){}
 +
    },{
 +
        uid: '123456789'
 +
    }{
 +
        method: 'get'
 +
    });
 +
});
 +
</pre>
  
===WB2.login(callback)===
+
<div style="margin:15px 0;">
 +
部署微博组件。
 +
</div>
  
----
+
<div class="code_type">HTML</div>
 +
<pre class="brush:html">
 +
<wb:share-button type="button" size="middle"> </wb:share-button>
 +
</pre>
  
'''函数说明'''
 
  
微博登录认证功能。
+
==JS SDK公开方法及说明==
  
'''参数说明'''
+
<div class="wiki_txtJ">JS SDK公开方法。</div>
  
callback: 可选,登录后执行的回调函数。
 
  
'''返回值'''
+
<div class="wiki_title_withline">WB2.login(callback)</div>
  
+
<div class="wiki_txtJ">微博登录认证功能。</div>
  
'''示例'''
+
<div style="margin:15px 0;">'''示例'''</div>
  
<pre>
+
<div class="code_type">Javascript</div>
WB2.login(function(){
+
<pre class="brush:js">
//callback function
+
WB2.logout(function() {
 +
    //callback function
 
});
 
});
 
</pre>
 
</pre>
  
===WB2.logout(callback)===
+
<div style="margin:15px 0;">'''参数说明'''</div>
  
----
+
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
'''函数说明'''
+
<html><colgroup></colgroup></html>
 +
!width="16%"|参数名称
 +
!width="13%"|类型
 +
!width="13%"|默认值
 +
!width="13%"|是否必选
 +
!width="45%"|说明描述
 +
|-
 +
|callback
 +
|Function
 +
|无
 +
|否
 +
|登录后的回调函数。
 +
|}
  
退出微博登录功能。
 
  
'''参数说明'''
+
<div class="wiki_title_withline">WB2.logout(callback)</div>
  
callback: 可选,退出登录后执行的回调函数。
+
<div class="wiki_txtJ">退出微博登录功能。</div>
  
'''返回值'''
+
<div style="margin:15px 0;">'''示例'''</div>
  
+
<div class="code_type">Javascript</div>
 
+
<pre class="brush:js">
'''示例'''
+
WB2.logout(function() {
 
+
    //callback function
<pre>
+
WB2.logout(function(){
+
//callback function
+
 
});
 
});
 
</pre>
 
</pre>
  
===WB2.checkLogin()===
+
<div style="margin:15px 0;">'''参数说明'''</div>
  
----
+
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
'''函数说明'''
+
<html><colgroup></colgroup></html>
 +
!width="16%"|参数名称
 +
!width="13%"|类型
 +
!width="13%"|默认值
 +
!width="13%"|是否必选
 +
!width="45%"|说明描述
 +
|-
 +
|callback
 +
|Function
 +
|无
 +
|否
 +
|退出登录后的回调函数。
 +
|}
  
检查是否已经登录,已登录返回true,未登录返回false。
 
  
'''参数说明'''
+
<div class="wiki_title_withline">WB2.checkLogin()</div>
  
无。
+
<div class="wiki_txtJ">检测微博登录状态,已登录返回true,未登录返回false。</div>
  
'''返回值'''
+
<div style="margin:15px 0;">'''示例'''</div>
  
true:已登录;
+
<div class="code_type">Javascript</div>
false:未登录。
+
<pre class="brush:js">
 
+
var status = WB2.checkLogin();
'''示例'''
+
alert(status);
 
+
<pre>
+
WB2.checkLogin();
+
 
</pre>
 
</pre>
  
===WB2.anyWhere(callback)===
 
  
----
+
<div class="wiki_title_withline">WB2.anyWhere(callback)</div>
  
'''函数说明'''
+
<div class="wiki_txtJ">第三方与微博API进行数据交互及采用Js方式调用内置微博组件的入口函数。</div>
  
第三方与微博API进行数据交互及调用内置widget的入口函数。
+
<div style="margin:15px 0;">'''示例'''</div>
  
'''参数说明'''
+
<div class="code_type">Javascript</div>
 
+
<pre class="brush:js">
callback:必选回调函数,需指定一个形参W。
+
 
+
可以通过形参直接调用 widget 或者 parseCMD 直接读取开放平台API接口。
+
 
+
具体的调用方式见下文对 parseCMD 及 widget 调用的说明。
+
 
+
'''示例'''
+
 
+
<pre>
+
 
WB2.anyWhere(function(W){
 
WB2.anyWhere(function(W){
W.parseCMD("/statuses/friends.json", function(sResult, bStatus){
+
    //数据交互
     alert(sResult);
+
    W.parseCMD(...);
},{
+
   
     method: 'post'
+
    //调用微博组件
});
+
    W.widget.hoverCard(...);
 +
     W.widget.followButton(...);
 +
     ...
 
});
 
});
 
</pre>
 
</pre>
  
===parseCMD(sUri, oCallBack, oArgs, oOpts)===
+
<div style="margin:15px 0;">'''参数说明'''</div>
  
----
+
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
 +
<html><colgroup></colgroup></html>
 +
!width="16%"|参数名称
 +
!width="13%"|类型
 +
!width="13%"|默认值
 +
!width="13%"|是否必选
 +
!width="45%"|说明描述
 +
|-
 +
|callback
 +
|Function
 +
|无
 +
|是
 +
|回调函数,必需指定一个形参W,可以通过形参调用parseCMD读取开放平台API接口或者使用微博组件。具体见parseCMD及JS调用微博组件的说明。
 +
|}
  
'''函数说明'''
 
  
第三方与开放平台API接口进行数据请求的函数,必须在WB2.anyWhere中通过W对象调用。
+
<div class="wiki_title_withline">W.parseCMD(uri, callback, args, opts)</div>
  
'''参数说明'''
+
<div class="wiki_txtJ">第三方与开放平台API接口进行数据请求的函数,必须在WB2.anyWhere中通过W对象调用。</div>
  
sUri:必选,传递给API的命令URI。
+
<div style="margin:15px 0;">'''示例'''</div>
  
oCallBack:必选,API返回数据后的回调函数。
+
<div class="code_type">Javascript</div>
 +
<pre class="brush:js">
 +
WB2.anyWhere(function(W){
 +
    //数据交互
 +
    W.parseCMD('/users/show.json', function(oResult, bStatus) {
 +
        if(bStatus) {
 +
            //to do something...
 +
        }
 +
    }, {
 +
        screen_name : '姚晨'
 +
    }, {
 +
        method : 'get',
 +
        cache_time : 30
 +
    });
 +
});
 +
</pre>
  
oArgs:可选还是必选,根据API的定义,传递给API的参数对象。
+
<div style="margin:15px 0;">'''参数说明'''</div>
  
oOpts:可选,请求API的时候的类型,默认是 POST 方式。
+
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
 +
<html><colgroup></colgroup></html>
 +
!width="16%"|参数名称
 +
!width="13%"|类型
 +
!width="13%"|默认值
 +
!width="13%"|是否必选
 +
!width="45%"|说明描述
 +
|-
 +
|uri
 +
|String
 +
|无
 +
|是
 +
|传递给API接口的命令URI,如“/users/show.json”、“statuses/public_timeline.json”,请见 [[API|API文档]]。
 +
|-
 +
|callback
 +
|Function
 +
|无
 +
|是
 +
|请求API接口返回数据后的回调函数。默认返回两个参数,oResult:接口返回数据(JSON格式);bStatus:接口返回状态,true - 接口正常、false - 接口异常。
 +
|-
 +
|args
 +
|Object
 +
|无
 +
|是
 +
|发起数据请求时,传递给API接口的参数对象。如“users/show.json”接口中的,uid、screen_name等。JSON格式。
 +
|-
 +
|opts
 +
|Object
 +
|{method: 'post', cache_time: 0}
 +
|是
 +
|请求API接口的时候的附加属性,method:请求类型,默认为post;cache_time:数据缓存时间,默认为0,单位为秒。JSON格式。
 +
|}
  
'''示例'''
 
 
<pre>
 
WB2.anyWhere(function(W){
 
    // 获取评论列表
 
W.parseCMD("/statuses/comments.json", function(sResult, bStatus){
 
    if(bStatus == true) {
 
alert(sResult);
 
    }
 
},{
 
userid : 12345678
 
},{
 
    method: 'post'
 
});
 
});
 
</pre>
 
  
==JS widget说明及示例==
+
==JS组件说明及示例==
  
 
===微博连接按钮===
 
===微博连接按钮===

2014年7月17日 (四) 11:54的版本

JS SDK

JS SDK for OAuth2.0是线上JS SDK的升级版本(V1版JS SDK),它较之前版本有较大改变:

  • 1、它去掉了部署在第三方的xd.html跨域文件,使开发者开发使用更加简单方便;
  • 2、Appkey的传递方式由原来的json方式改变为通过参数传递方式;
  • 3、为兼容之前JSSDK,该版JSSDK的命名空间由原来的WB改变为WB2;
  • 4、该版本将Js widget内置其中,用户无需再去单独引用JS和CSS,只需调用相应的js widget方法即可;
  • 5、支持通过版本号调用js widget,以便不同开发者不同的需要;


下面我们来一起体验一下这些特性。你也可以浏览微博JS SDK的官方支持站,查看更加细致的文档。


开发指南

如果你没有AppKey请先在开放平台网站点击网站接入添加新网站,申请入口


1、网站接入绑定域名

为了保证你的应用或网站的安全,在使用Weibo JS SDK时,需要你在应用信息页面为该应用选定绑定域名功能,并绑定你的域名,我们将以此域名来判定Weibo JS SDK API请求来源的合法性,不合法的请求将被拒绝。


绑定域名的操作可以在应用创建页面及编辑页面完成。选择“绑定域名”,填入域名提交即可。


2、增加命名空间

在您页面的HTML标签中增加XML命名空间。

HTML
<html xmlns:wb="http://open.weibo.com/wb">


3、引用JS SDK文件

在你的页面部署wb.js,同时,如果你的页面编码不是UTF-8,请添加charset="utf-8"属性。

HTML
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY" type="text/javascript" charset="utf-8"></script>

如果你的应用处于开发调试过程,建议使用JSSDK的调试模式,开启调试模式,只需增加一个参数debug=true即可,JSSDK会在浏览器的控制台或自带的JS调试工具中输出相关的日志信息,以方便调试。

HTML
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY&debug=true" type="text/javascript" charset="utf-8"></script>


4、开始使用JS SDK

调用JSSDK访问API接口。

Javascript
WB2.anyWhere(function(W){
    W.parseCMD("/users/show.json", function(sResult, bStatus){
        try{
            //to do something...
        }catch(e){}
    },{
        uid: '123456789'
    }{
        method: 'get'
    });
});

部署微博组件。

HTML
<wb:share-button type="button" size="middle"> </wb:share-button>


JS SDK公开方法及说明

JS SDK公开方法。


WB2.login(callback)
微博登录认证功能。
示例
Javascript
WB2.logout(function() {
    //callback function
});
参数说明
参数名称 类型 默认值 是否必选 说明描述
callback Function 登录后的回调函数。


WB2.logout(callback)
退出微博登录功能。
示例
Javascript
WB2.logout(function() {
    //callback function
});
参数说明
参数名称 类型 默认值 是否必选 说明描述
callback Function 退出登录后的回调函数。


WB2.checkLogin()
检测微博登录状态,已登录返回true,未登录返回false。
示例
Javascript
var status = WB2.checkLogin();
alert(status);


WB2.anyWhere(callback)
第三方与微博API进行数据交互及采用Js方式调用内置微博组件的入口函数。
示例
Javascript
WB2.anyWhere(function(W){
    //数据交互
    W.parseCMD(...);
     
    //调用微博组件
    W.widget.hoverCard(...);
    W.widget.followButton(...);
    ...
});
参数说明
参数名称 类型 默认值 是否必选 说明描述
callback Function 回调函数,必需指定一个形参W,可以通过形参调用parseCMD读取开放平台API接口或者使用微博组件。具体见parseCMD及JS调用微博组件的说明。


W.parseCMD(uri, callback, args, opts)
第三方与开放平台API接口进行数据请求的函数,必须在WB2.anyWhere中通过W对象调用。
示例
Javascript
WB2.anyWhere(function(W){
    //数据交互
    W.parseCMD('/users/show.json', function(oResult, bStatus) {
        if(bStatus) {
            //to do something...
        }
    }, {
        screen_name : '姚晨'
    }, {
        method : 'get',
        cache_time : 30
    });
});
参数说明
参数名称 类型 默认值 是否必选 说明描述
uri String 传递给API接口的命令URI,如“/users/show.json”、“statuses/public_timeline.json”,请见 API文档
callback Function 请求API接口返回数据后的回调函数。默认返回两个参数,oResult:接口返回数据(JSON格式);bStatus:接口返回状态,true - 接口正常、false - 接口异常。
args Object 发起数据请求时,传递给API接口的参数对象。如“users/show.json”接口中的,uid、screen_name等。JSON格式。
opts Object {method: 'post', cache_time: 0} 请求API接口的时候的附加属性,method:请求类型,默认为post;cache_time:数据缓存时间,默认为0,单位为秒。JSON格式。


JS组件说明及示例

微博连接按钮

widget说明

第三方与微博进行连接的按钮,可实现登录与退出功能。


参数说明

id:连接按钮元素ID,必填。

type:连接按钮样式,是登录前的按钮样式[1-7]和登录后的样式[1-5]的组合,可选,默认为"3,2"。

callback:回调函数对象,参数说明如下,

login: 登录后执行的回调函数,其参数为用户信息json对象;

logout: 退出登录后执行的回调函数;

示例

Html:<div id="wb_connect_btn"></div>
Script:
WB2.anyWhere(function(W){
    W.widget.connectButton({
        id: "wb_connect_btn",
        type: '3,2',
        callback : {
            login:function(o){
                alert(o.screen_name)
            },
            logout:function(){
                alert('logout');
            }
        }
    });
});

示例: http://jssdk.sinaapp.com/demo/button/loginButton.php

微博关注按钮

widget说明

可实现用户之间的关注功能。


参数说明

id:绑定的标签的ID,必填。

nick_name:用户昵称,必填。

示例

Html:  <span id="wb_follow_btn"></span>
Script:
WB2.anyWhere(function(W){
    W.widget.followButton({
        'id': "wb_follow_btn"	//关注按钮容器ID
        'nick_name': '姚晨'	//用户昵称
    });
});

示例:

http://jssdk.sinaapp.com/demo/button/followButtonTag.html

微博名片

widget说明

显示用户名片,包括昵称、头像、关注数量、粉丝数量、微博数量、最新微博以及关注按钮功能等,支持单独处理及批量处理两种方式。


参数说明

id:要显示名片的元素ID,必填。

tag:要处理的标签名称,如'a', 'span'等,默认为'a',即只对a标签进行处理(其他标签不做处理),选填。

search:是否为批量处理名片的标识, 为true时会自动识别指定标签里“@+昵称”,并进行批量替换,增加名片事件,为false时仅为单独定义。默认为false。


示例

Html:  

单独定义:
<span id="card" href=" http://weibo.com " wb_screen_name="微博名称" >微博名称</span>
<a id="wb_uid" wb_user_id="1052981072" href="http://www.woiweb.net" >woiweb</a>

批量定义:
<div id="search">
    <a wb_screen_name="flashsoft" href="http://weibo.com">flashsoft</a>
    @woiweb
</div>
<div id="weibo_uid_area">
    <a href="http://www.woiweb.net" wb_user_id="1052981072">woiweb</a>
    <span wb_user_id="1639733600">金山</span>
</div>

Script:

WB2.anyWhere(function(W){
    W.widget.hoverCard({
        id: "card"
    });
    W.widget.hoverCard({
        id: "search",
        search: true
	}); 
    W.widget.hoverCard({
        id: "wb_uid"
    });	
    W.widget.hoverCard({
        id: "weibo_uid_area",
        tag: "span",
        search: true
    });
});

示例: http://jssdk.sinaapp.com/demo/layer/card.html

微博发布器

widget说明

弹出微博发布器,发布微博。


参数说明

id : 绑定的标签的ID,必填。

button_type : 按钮样式red/gray,默认为red

button_size : big/middle/small,默认为middle

button_text : 自定义button文字,默认为“发布到微博”

default_text : 文本框内容,默认为空

default_image : 预置图片地址,默认为空

toolbar : 工具栏[表情, 图片, 话题],默认为'face,image,topic',可增删工具栏模块和更换按钮位置


示例

Html:  <a href="javascript:;" id="publish" >发表微博</a>
Script:
WB2.anyWhere(function(W){
    W.widget.publish({
        'id' : 'publish'
    });
});

示例:

http://jssdk.sinaapp.com/demo/layer/publish.html

微博好友选择器

widget说明

好友选择器,包括相互关注、我的粉丝、我关注的人三个标签,标签可配,支持联想输入功能,可快速选择所需好友,选择后点击确定即可得到已选择的好友的信息。


参数说明

id: 绑定的标签的ID,必填。

callback: 选择完成点击确定后执行的回调函数,参数为选择好友信息的数组对象。

limit: 限制选择好友数量,默认为-1,不限制选择数量。

tab: 好友选择器标签配置,可选。

list: 显示的标签及顺序,[1:相互关注, 2:我的粉丝, 3:我关注的人],可以根据需要选择各种组合,还可定制顺序,如[1], [3,2]。

index: 默认展开的标签,默认为第一个标签。


Html:  <input id="but" type="button" value=" 显示选择器 " />
Script:
//回调函数,返回选择结果 
function cbk(data){
    //do something.
}
WB2.anyWhere(function(W){
    W.widget.selector({
	'id' : "but",	//必选 
	'callback' : cbk
    });	
});


示例:

http://jssdk.sinaapp.com/demo/layer/selector.html