Weibo Platform Logo

微博开放平台

weibo
跳转到： 导航, 搜索
第278行： 第278行：
 
==JS组件说明及示例==
 
==JS组件说明及示例==
  
−
===微博连接按钮===
+
<div class="wiki_txtJ">JS 组件的使用方法及示例。JS 组件有WBML、和HTML+JS两种部署方法。</div>
  
  
−
'''widget说明'''
+
<div class="wiki_title_withline">微博登录按钮</div>
  
−
第三方与微博进行连接的按钮，可实现登录与退出功能。
+
<div class="wiki_txtJ">第三方与微博进行连接登录的按钮，可实现登录与退出功能。</div>
  
 +
<div style="margin:15px 0;">'''示例'''</div>
  
−
'''参数说明'''
+
<div class="code_type">HTML</div>
 +
<pre class="brush:html">
 +
<div id="wb_connect_btn"></div>
 +
</pre>
  
−
id：连接按钮元素ID，必填。
+
<div class="code_type">Javascript</div>
−
 
+
<pre class="brush:js">
−
type：连接按钮样式，是登录前的按钮样式[1-7]和登录后的样式[1-5]的组合，可选，默认为"3,2"。
+
WB2.anyWhere(function (W) {
−
 
+
−
callback：回调函数对象，参数说明如下，
+
−
 
+
−
login: 登录后执行的回调函数，其参数为用户信息json对象;
+
−
 
+
−
logout: 退出登录后执行的回调函数;
+
−
 
+
−
'''示例'''
+
−
 
+
−
<pre>
+
−
Html：<div id="wb_connect_btn"></div>
+
−
Script:
+
−
WB2.anyWhere(function(W){
+
 
     W.widget.connectButton({
 
     W.widget.connectButton({
 
         id: "wb_connect_btn",
 
         id: "wb_connect_btn",
 
         type: '3,2',
 
         type: '3,2',
−
         callback : {
+
         callback: {
−
             login:function(o){
+
             login: function (o) { //登录后的回调函数
−
                 alert(o.screen_name)
+
                 alert("login: " + o.screen_name)
 
             },
 
             },
−
             logout:function(){
+
             logout: function () { //退出后的回调函数
 
                 alert('logout');
 
                 alert('logout');
 
             }
 
             }
第317行： 第308行：
 
     });
 
     });
 
});
 
});
 +
</pre>
  
 +
<div class="code_type">WBML</div>
 +
<pre class="brush:html">
 +
<wb:login-button type="3,2" onlogin="login" onlogout="logout"></wb:login-button>
 
</pre>
 
</pre>
  
−
'''示例：'''
+
<div style="font-size:14px;line-height:30px;padding:0 16px;background-color:#EFF8FB;display:inline-block;color:#fff;">[http://jssdk.sinaapp.com/widget/login-button.php 微博登录按钮 - 详细代码示例与参数说明]</div>
−
http://jssdk.sinaapp.com/demo/button/loginButton.php
+
  
−
===微博关注按钮===
 
  
−
'''widget说明'''
+
<div class="wiki_title_withline">微博关注按钮</div>
  
−
可实现用户之间的关注功能。
+
<div class="wiki_txtJ">关注按钮可以部署在任何支持HTML的网页。用户在这些网页点击关注按钮，就可以快速成为你的微博粉丝; 关注按钮会自动判断与用户的关系，对于已关注用户，将显示其微博动态。</div>
  
 +
<div style="margin:15px 0;">'''示例'''</div>
  
−
'''参数说明'''
+
<div class="code_type">HTML</div>
−
 
+
<pre class="brush:html">
−
id：绑定的标签的ID，必填。
+
<div id="wb_follow_btn"></div>
−
 
+
</pre>
−
nick_name：用户昵称，必填。
+
  
−
'''示例'''
+
<div class="code_type">Javascript</div>
−
<pre>
+
<pre class="brush:js">
−
Html:  <span id="wb_follow_btn"></span>
+
−
Script:
+
 
WB2.anyWhere(function(W){
 
WB2.anyWhere(function(W){
 
     W.widget.followButton({
 
     W.widget.followButton({
−
         'id': "wb_follow_btn" //关注按钮容器ID
+
        'nick_name': '姚晨',  //用户昵称
−
         'nick_name': '姚晨' //用户昵称
+
         'id': "wb_follow_btn",
 +
        'show_head' : true, //是否显示头像
 +
         'show_name' : true, //是否显示名称
 +
        'show_cancel': true //是否显示取消关注按钮
 
     });
 
     });
 
});
 
});
 
</pre>
 
</pre>
  
−
'''示例：'''
+
<div class="code_type">WBML</div>
 +
<pre class="brush:html">
 +
<wb:follow-button uid="1052981072" type="red_4">关注按钮</wb:follow-button>
 +
</pre>
  
−
http://jssdk.sinaapp.com/demo/button/followButtonTag.html
+
<div style="font-size:14px;line-height:30px;padding:0 16px;background-color:#EFF8FB;display:inline-block;color:#fff;">[http://jssdk.sinaapp.com/widget/follow-button.php 微博关注按钮 - 详细代码示例与参数说明]</div>
  
−
===微博名片===
 
  
−
'''widget说明'''
+
<div class="wiki_title_withline">微博名片</div>
  
−
显示用户名片，包括昵称、头像、关注数量、粉丝数量、微博数量、最新微博以及关注按钮功能等，支持单独处理及批量处理两种方式。
+
<div class="wiki_txtJ">微博名片组件可在一段纯文本中，自动识别@用户名，添加用户名片功能。鼠标移动到"@用户名"上时，浮出一个展示用户信息的名片，名片中同时带有微博关注按钮功能。支持单独处理及批量处理两种方式。</div>
  
 +
<div style="margin:15px 0;">'''示例'''</div>
  
−
'''参数说明'''
+
<div class="code_type">HTML</div>
−
 
+
<pre class="brush:html">
−
id：要显示名片的元素ID，必填。
+
<a id="wb_card_alone" wb_screen_name="woiweb" href="#">woiweb</a>
−
 
+
</pre>
−
tag：要处理的标签名称，如'a', 'span'等，默认为'a'，即只对a标签进行处理(其他标签不做处理)，选填。
+
−
 
+
−
search：是否为批量处理名片的标识， 为true时会自动识别指定标签里“@+昵称”，并进行批量替换，增加名片事件，为false时仅为单独定义。默认为false。
+
−
 
+
−
+
−
'''示例'''
+
−
<pre>
+
−
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:
+
  
 +
<div class="code_type">Javascript</div>
 +
<pre class="brush:js">
 
WB2.anyWhere(function(W){
 
WB2.anyWhere(function(W){
 
     W.widget.hoverCard({
 
     W.widget.hoverCard({
−
         id: "card"
+
         id : "wb_card_alone"
−
    });
+
−
    W.widget.hoverCard({
+
−
        id: "search",
+
−
        search: true
+
−
});
+
−
    W.widget.hoverCard({
+
−
        id: "wb_uid"
+
−
    });
+
−
    W.widget.hoverCard({
+
−
        id: "weibo_uid_area",
+
−
        tag: "span",
+
−
        search: true
+
 
     });
 
     });
 
});
 
});
 
</pre>
 
</pre>
  
−
'''示例：'''
+
<div style="font-size:14px;line-height:30px;padding:0 16px;background-color:#EFF8FB;display:inline-block;color:#fff;">[http://jssdk.sinaapp.com/widget/card.php 微博名片 - 详细代码示例与参数说明]</div>
−
http://jssdk.sinaapp.com/demo/layer/card.html
+
  
−
===微博发布器===
 
  
−
'''widget说明'''
+
<div class="wiki_title_withline">微博发布器</div>
  
−
弹出微博发布器，发布微博。
+
<div class="wiki_txtJ">在您的博客、网站或其他支持HTML的位置嵌入一段微博发布器对应的代码，不仅能让用户直接发微博，您还可以在发布器中预制文案及图片。</div>
  
 +
<div style="margin:15px 0;">'''示例'''</div>
  
−
'''参数说明'''
+
<div class="code_type">HTML</div>
 +
<pre class="brush:html">
 +
<button type="button" id="wb_publish"></wb:button>
 +
</pre>
  
−
id : 绑定的标签的ID，必填。
+
<div class="code_type">Javascript</div>
−
 
+
<pre class="brush:js">
−
button_type : 按钮样式red/gray，默认为red
+
−
 
+
−
button_size : big/middle/small，默认为middle
+
−
 
+
−
button_text : 自定义button文字，默认为“发布到微博”
+
−
 
+
−
default_text : 文本框内容，默认为空
+
−
 
+
−
default_image : 预置图片地址，默认为空
+
−
 
+
−
toolbar : 工具栏[表情, 图片, 话题]，默认为'face,image,topic'，可增删工具栏模块和更换按钮位置
+
−
 
+
−
 
+
−
'''示例'''
+
−
<pre>
+
−
Html:  <a href="javascript:;" id="publish" >发表微博</a>
+
−
Script:
+
 
WB2.anyWhere(function(W){
 
WB2.anyWhere(function(W){
 
     W.widget.publish({
 
     W.widget.publish({
−
         'id' : 'publish'
+
         'id' : 'wb_publish',
 +
        'default_text' : '预置方案　& \r\n我可以换行.',
 +
        'callback' : function(o) {
 +
            //do something...
 +
        }
 
     });
 
     });
 
});
 
});
 
</pre>
 
</pre>
  
−
'''示例：'''
+
<div class="code_type">WBML</div>
 +
<pre class="brush:html">
 +
<wb:publish></wb:publish>
 +
</pre>
  
−
http://jssdk.sinaapp.com/demo/layer/publish.html
+
<div style="font-size:14px;line-height:30px;padding:0 16px;background-color:#EFF8FB;display:inline-block;color:#fff;">[http://jssdk.sinaapp.com/widget/publish.php 微博发布器 - 详细代码示例与参数说明]</div>
  
−
===微博好友选择器===
 
  
−
'''widget说明'''
+
<div class="wiki_title_withline">微博好友选择器</div>
  
−
好友选择器，包括相互关注、我的粉丝、我关注的人三个标签，标签可配，支持联想输入功能，可快速选择所需好友，选择后点击确定即可得到已选择的好友的信息。
+
<div class="wiki_txtJ">包括相互关注、我的粉丝、我关注的人三个标签，标签可配，支持@联想输入功能，可快速选择所需好友，选择后点击确定即可得到已选择的好友的信息。</div>
  
 +
<div style="margin:15px 0;">'''示例'''</div>
  
−
'''参数说明'''
+
<div class="code_type">HTML</div>
 +
<pre class="brush:html">
 +
<button id="wb_selector" type="button"></button>
 +
</pre>
  
−
id: 绑定的标签的ID，必填。
+
<div class="code_type">Javascript</div>
−
 
+
<pre class="brush:js">
−
callback: 选择完成点击确定后执行的回调函数，参数为选择好友信息的数组对象。
+
−
 
+
−
limit: 限制选择好友数量，默认为-1，不限制选择数量。
+
−
 
+
−
tab: 好友选择器标签配置，可选。
+
−
 
+
−
list: 显示的标签及顺序，[1:相互关注, 2:我的粉丝, 3:我关注的人]，可以根据需要选择各种组合，还可定制顺序，如[1], [3,2]。
+
−
 
+
−
index: 默认展开的标签，默认为第一个标签。
+
−
 
+
−
 
+
−
<pre>
+
−
Html:  <input id="but" type="button" value=" 显示选择器 " />
+
−
Script:
+
−
//回调函数，返回选择结果
+
−
function cbk(data){
+
−
    //do something.
+
−
}
+
 
WB2.anyWhere(function(W){
 
WB2.anyWhere(function(W){
 
     W.widget.selector({
 
     W.widget.selector({
−
'id' : "but", //必选
+
        id : "wb_selector"
−
'callback' : cbk
+
     });
−
     });
+
 
});
 
});
 
</pre>
 
</pre>
  
−
 
+
<div style="font-size:14px;line-height:30px;padding:0 16px;background-color:#EFF8FB;display:inline-block;color:#fff;">[http://jssdk.sinaapp.com/widget/selector.php 微博好友选择器 - 详细代码示例与参数说明]</div>
−
'''示例：'''
+
−
 
+
−
http://jssdk.sinaapp.com/demo/layer/selector.html
+
  
  

2014年7月17日 (四) 12:23的版本

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组件说明及示例

JS 组件的使用方法及示例。JS 组件有WBML、和HTML+JS两种部署方法。


微博登录按钮
第三方与微博进行连接登录的按钮，可实现登录与退出功能。
示例
HTML
<div id="wb_connect_btn"></div>
Javascript
WB2.anyWhere(function (W) {
    W.widget.connectButton({
        id: "wb_connect_btn",
        type: '3,2',
        callback: {
            login: function (o) { //登录后的回调函数
                alert("login: " + o.screen_name)
            },
            logout: function () { //退出后的回调函数
                alert('logout');
            }
        }
    });
});
WBML
<wb:login-button type="3,2" onlogin="login" onlogout="logout"></wb:login-button>


微博关注按钮
关注按钮可以部署在任何支持HTML的网页。用户在这些网页点击关注按钮，就可以快速成为你的微博粉丝; 关注按钮会自动判断与用户的关系，对于已关注用户，将显示其微博动态。
示例
HTML
<div id="wb_follow_btn"></div>
Javascript
WB2.anyWhere(function(W){
    W.widget.followButton({
        'nick_name': '姚晨',  //用户昵称
        'id': "wb_follow_btn",
        'show_head' : true, //是否显示头像
        'show_name' : true, //是否显示名称
        'show_cancel': true //是否显示取消关注按钮
    });
});
WBML
<wb:follow-button uid="1052981072" type="red_4">关注按钮</wb:follow-button>


微博名片
微博名片组件可在一段纯文本中，自动识别@用户名，添加用户名片功能。鼠标移动到"@用户名"上时，浮出一个展示用户信息的名片，名片中同时带有微博关注按钮功能。支持单独处理及批量处理两种方式。
示例
HTML
<a id="wb_card_alone" wb_screen_name="woiweb" href="#">woiweb</a>
Javascript
WB2.anyWhere(function(W){
    W.widget.hoverCard({
        id : "wb_card_alone"
    });
});


微博发布器
在您的博客、网站或其他支持HTML的位置嵌入一段微博发布器对应的代码，不仅能让用户直接发微博，您还可以在发布器中预制文案及图片。
示例
HTML
<button type="button" id="wb_publish"></wb:button>
Javascript
WB2.anyWhere(function(W){
    W.widget.publish({
        'id' : 'wb_publish',
        'default_text' : '预置方案　& \r\n我可以换行.',
        'callback' : function(o) {
            //do something...
        }
    });
});
WBML
<wb:publish></wb:publish>


微博好友选择器
包括相互关注、我的粉丝、我关注的人三个标签，标签可配，支持@联想输入功能，可快速选择所需好友，选择后点击确定即可得到已选择的好友的信息。
示例
HTML
<button id="wb_selector" type="button"></button>
Javascript
WB2.anyWhere(function(W){
    W.widget.selector({
        id : "wb_selector"
    });
});



来自“http://open.weibo.com/wiki/index.php?title=Sdk/javascript&oldid=13662”

关于微博开放平台| 联系我们| 服务条款| 无线游戏| 开放平台官微

京网文 [2011] 0398-130号 京ICP证100780号 Copyright © 1996-2024 SINA