第24行: | 第24行: | ||
− | <div class="wiki_title_withline"> | + | <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 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">3、引用JS SDK文件</div> | |
− | < | + | |
− | + | ||
− | </ | + | |
+ | <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 | + | <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> | ||
− | == | + | <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> | ||
− | = | + | <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> | |
− | |||
− | + | <div class="wiki_title_withline">WB2.login(callback)</div> | |
− | + | <div class="wiki_txtJ">微博登录认证功能。</div> | |
− | '''示例''' | + | <div style="margin:15px 0;">'''示例'''</div> |
− | + | <div class="code_type">Javascript</div> | |
− | WB2. | + | <pre class="brush:js"> |
− | //callback function | + | WB2.logout(function() { |
+ | //callback function | ||
}); | }); | ||
</pre> | </pre> | ||
− | = | + | <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> | |
− | + | <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> | ||
− | = | + | <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.checkLogin()</div> | |
− | + | <div class="wiki_txtJ">检测微博登录状态,已登录返回true,未登录返回false。</div> | |
− | ''' | + | <div style="margin:15px 0;">'''示例'''</div> |
− | + | <div class="code_type">Javascript</div> | |
− | + | <pre class="brush:js"> | |
− | + | var status = WB2.checkLogin(); | |
− | + | alert(status); | |
− | + | ||
− | <pre> | + | |
− | WB2.checkLogin(); | + | |
</pre> | </pre> | ||
− | |||
− | + | <div class="wiki_title_withline">WB2.anyWhere(callback)</div> | |
− | + | <div class="wiki_txtJ">第三方与微博API进行数据交互及采用Js方式调用内置微博组件的入口函数。</div> | |
− | + | <div style="margin:15px 0;">'''示例'''</div> | |
− | + | <div class="code_type">Javascript</div> | |
− | + | <pre class="brush:js"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <pre> | + | |
WB2.anyWhere(function(W){ | WB2.anyWhere(function(W){ | ||
− | W.parseCMD( | + | //数据交互 |
− | + | W.parseCMD(...); | |
− | + | ||
− | + | //调用微博组件 | |
− | + | W.widget.hoverCard(...); | |
+ | W.widget.followButton(...); | ||
+ | ... | ||
}); | }); | ||
</pre> | </pre> | ||
− | = | + | <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调用微博组件的说明。 | ||
+ | |} | ||
− | |||
− | + | <div class="wiki_title_withline">W.parseCMD(uri, callback, args, opts)</div> | |
− | + | <div class="wiki_txtJ">第三方与开放平台API接口进行数据请求的函数,必须在WB2.anyWhere中通过W对象调用。</div> | |
− | + | <div style="margin:15px 0;">'''示例'''</div> | |
− | + | <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> | ||
− | + | <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%"|说明描述 | ||
+ | |- | ||
+ | |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格式。 | ||
+ | |} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | == | + | ==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请先在开放平台网站点击网站接入添加新网站,申请入口。
为了保证你的应用或网站的安全,在使用Weibo JS SDK时,需要你在应用信息页面为该应用选定绑定域名功能,并绑定你的域名,我们将以此域名来判定Weibo JS SDK API请求来源的合法性,不合法的请求将被拒绝。
绑定域名的操作可以在应用创建页面及编辑页面完成。选择“绑定域名”,填入域名提交即可。
在您页面的HTML标签中增加XML命名空间。
<html xmlns:wb="http://open.weibo.com/wb">
在你的页面部署wb.js,同时,如果你的页面编码不是UTF-8,请添加charset="utf-8"属性。
<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调试工具中输出相关的日志信息,以方便调试。
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY&debug=true" type="text/javascript" charset="utf-8"></script>
调用JSSDK访问API接口。
WB2.anyWhere(function(W){ W.parseCMD("/users/show.json", function(sResult, bStatus){ try{ //to do something... }catch(e){} },{ uid: '123456789' }{ method: 'get' }); });
部署微博组件。
<wb:share-button type="button" size="middle"> </wb:share-button>
JS SDK公开方法及说明
WB2.logout(function() { //callback function });
参数名称 | 类型 | 默认值 | 是否必选 | 说明描述 |
---|---|---|---|---|
callback | Function | 无 | 否 | 登录后的回调函数。 |
WB2.logout(function() { //callback function });
参数名称 | 类型 | 默认值 | 是否必选 | 说明描述 |
---|---|---|---|---|
callback | Function | 无 | 否 | 退出登录后的回调函数。 |
var status = WB2.checkLogin(); alert(status);
WB2.anyWhere(function(W){ //数据交互 W.parseCMD(...); //调用微博组件 W.widget.hoverCard(...); W.widget.followButton(...); ... });
参数名称 | 类型 | 默认值 | 是否必选 | 说明描述 |
---|---|---|---|---|
callback | Function | 无 | 是 | 回调函数,必需指定一个形参W,可以通过形参调用parseCMD读取开放平台API接口或者使用微博组件。具体见parseCMD及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 }); });
参数名称 | 类型 | 默认值 | 是否必选 | 说明描述 |
---|---|---|---|---|
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