跳转到： 导航, 搜索
第2行： 第2行：
  
 
<div class="wiki_txtJ">
 
<div class="wiki_txtJ">
−
JS SDK for OAuth2.0是线上JS SDK的升级版本（[[Weibo-JS|V1版JS SDK]]），它较之前版本有较大改变：
+
JS SDK 2020是微博开放平台最新的升级版，它较之前版本有较大改变：
  
 
<ul class="wiki_indent_list">
 
<ul class="wiki_indent_list">
−
<li clas="wiki_indent_item">1、它去掉了部署在第三方的xd.html跨域文件，使开发者开发使用更加简单方便；</li>
+
<li clas="wiki_indent_item">1、聚焦移动端H5场景，去除了原来PC时代的旧组件；</li>
−
<li clas="wiki_indent_item">2、Appkey的传递方式由原来的json方式改变为通过参数传递方式；</li>
+
<li clas="wiki_indent_item">2、分享功能，适配多场景，无论是在微博、微信、手机浏览器，还是PC上，都可以方便使用；</li>
−
<li clas="wiki_indent_item">3、为兼容之前JSSDK，该版JSSDK的命名空间由原来的WB改变为WB2；</li>
+
<li clas="wiki_indent_item">3、采用开放标签，样式完全由开发者自己控制；</li>
−
<li clas="wiki_indent_item">4、该版本将Js widget内置其中，用户无需再去单独引用JS和CSS，只需调用相应的js widget方法即可；</li>
+
<li clas="wiki_indent_item">4、更加安全，因此去除了原来的JS前端直接授权、直接调接口的功能，防止数据外泄，相应的页面授权需求，需要开发者按照标准授权流程接入，调用开放接口则需要放在服务端完成；</li>
−
<li clas="wiki_indent_item">5、支持通过版本号调用js widget，以便不同开发者不同的需要；</li>
+
 
</ul>
 
</ul>
  
  
−
下面我们来一起体验一下这些特性。你也可以浏览微博JS SDK的[http://weibojs.com/ 官方支持站]，查看更加细致的文档。
+
下面我们来一起体验一下这些特性。
 +
 
 +
 
 +
<div style="width:230px;margin:30px auto 0;">
 +
{{Img_polaroid|src=https://wx2.sinaimg.cn/large/53b515f0ly1glxt9dys97j208c08c3yd.jpg}}
 
</div>
 
</div>
 +
</div>
 +
  
  
第20行： 第25行：
  
 
<div class="wiki_txtJ">
 
<div class="wiki_txtJ">
−
如果你没有AppKey请先在开放平台网站点击网站接入添加新网站，[http://open.weibo.com/connect 申请入口]。
+
如果你没有AppKey请先在开放平台网站，注册自己的应用，[https://open.weibo.com/connect 申请入口]。
 
</div>
 
</div>
  
  
−
<div class="wiki_title_withline">1、网站接入绑定域名</div>
+
<div class="wiki_title_withline">1、绑定安全域名</div>
  
 
<div style="margin:15px 0;">
 
<div style="margin:15px 0;">
−
为了保证你的应用或网站的安全，在使用Weibo JS SDK时，需要你在应用信息页面为该应用选定绑定域名功能，并绑定你的域名，我们将以此域名来判定Weibo JS SDK API请求来源的合法性，不合法的请求将被拒绝。
+
在使用JS SDK 2020时，需要为该应用绑定安全域名，其中微博客户端JS 接口将以此域名来进行校验。
  
  
−
绑定域名的操作可以在应用创建页面及编辑页面完成。选择“绑定域名”，填入域名提交即可。
+
绑定安全域名的操作可以在 我的应用 的 高级信息 页面完成。
 
</div>
 
</div>
  
第36行： 第41行：
  
  
−
<div class="wiki_title_withline">2、增加命名空间</div>
+
<div class="wiki_title_withline">2、引用JS SDK 2020文件</div>
  
 
<div style="margin:15px 0;">
 
<div style="margin:15px 0;">
−
在您页面的HTML标签中增加XML命名空间。
+
在你的页面部署 wbsdk.js 文件，同时，如果你的页面编码不是UTF-8，请添加charset="utf-8"属性。
 
</div>
 
</div>
  
 
<div class="code_type">HTML</div>
 
<div class="code_type">HTML</div>
 
<pre class="brush:html">
 
<pre class="brush:html">
−
<html xmlns:wb="http://open.weibo.com/wb">
+
<script src="https://open.weibo.com/views/js/wbsdk.js" type="text/javascript" charset="utf-8"></script>
 
</pre>
 
</pre>
  
  
−
<div class="wiki_title_withline">3、引用JS SDK文件</div>
+
<div class="wiki_title_withline">3、初始化JS SDK 2020</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 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;">
 
<div style="margin:15px 0;">
第91行： 第75行：
  
 
<div style="margin:15px 0;">
 
<div style="margin:15px 0;">
−
部署微博组件。
+
如果你的应用处于开发调试过程，建议使用JS SDK 2020的调试模式，可以在初始化时，配置 debug 为 true，开启调试模式，此时在调用出错时，出错信息将通过 alert 弹出，方便在移动端调试。
 
</div>
 
</div>
  
−
<div class="code_type">HTML</div>
+
<div class="code_type">JS</div>
−
<pre class="brush:html">
+
<pre class="brush:js">
−
<wb:share-button type="button" size="middle"> </wb:share-button>
+
wb.init({
 +
    debug: false,
 +
    ...
 +
});
 
</pre>
 
</pre>
  
  
−
==JS SDK公开方法及说明==
 
  
−
<div class="wiki_txtJ">JS SDK公开方法。</div>
+
==开放标签==
  
 +
<div class="wiki_txtJ">开放标签类似原来的组件，目前主要就是分享功能。</div>
  
−
<div class="wiki_title_withline">WB2.login(callback)</div>
 
  
−
<div class="wiki_txtJ">微博登录认证功能。</div>
+
<div class="wiki_title_withline">分享开放标签</div>
 +
 
 +
<div class="wiki_txtJ">分享当前页面到微博，适配各种场景。</div>
  
 
<div style="margin:15px 0;">'''示例'''</div>
 
<div style="margin:15px 0;">'''示例'''</div>
  
−
<div class="code_type">Javascript</div>
+
<div class="code_type">HTML</div>
−
<pre class="brush:js">
+
<pre class="brush:html">
−
WB2.logout(function() {
+
<wb-share-button>分享到微博</wb-share-button>
−
    //callback function
+
−
});
+
 
</pre>
 
</pre>
  
−
<div style="margin:15px 0;">'''参数说明'''</div>
+
<div class="wiki_txtJ">开放标签中的样式，完全由开发者自己控制，例如。</div>
  
−
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
+
<div class="code_type">HTML</div>
−
<html><colgroup></colgroup></html>
+
<pre class="brush:html">
−
!width="16%"|参数名称
+
<wb-share-button><div class="myStyle">分享到微博</div></wb-share-button>
−
!width="13%"|类型
+
</pre>
−
!width="13%"|默认值
+
−
!width="13%"|是否必选
+
−
!width="45%"|说明描述
+
−
|-
+
−
|callback
+
−
|Function
+
−
|无
+
−
|否
+
−
|登录后的回调函数。
+
−
|}
+
  
 +
<div class="wiki_txtJ">指定分享的内容和页面地址，可以通过 data:title，data:url 属性标签完成自定义，例如。</div>
  
−
<div class="wiki_title_withline">WB2.logout(callback)</div>
+
<div class="code_type">HTML</div>
 +
<pre class="brush:html">
 +
<wb-share-button data:title="title" data:url="url">分享到微博</wb-share-button>
 +
</pre>
  
−
<div class="wiki_txtJ">退出微博登录功能。</div>
+
<div class="wiki_txtJ">如果需要在分享的时候，指定一张分享图片，需要先将图片上传到微博图床，然后再开放标签上指定图片的PID，例如。</div>
 +
 
 +
<div class="code_type">HTML</div>
 +
<pre class="brush:html">
 +
<wb-share-button data:pid="53b515f0ly1glgemvpjwfj20gi0aw114">分享到微博</wb-share-button>
 +
</pre>
 +
 
 +
 
 +
<div class="wiki_title_withline">内容聚合流开放标签</div>
 +
 
 +
<div class="wiki_txtJ">按照关键词，输入一个内容聚合流。</div>
  
 
<div style="margin:15px 0;">'''示例'''</div>
 
<div style="margin:15px 0;">'''示例'''</div>
  
−
<div class="code_type">Javascript</div>
+
<div class="code_type">HTML</div>
−
<pre class="brush:js">
+
<pre class="brush:html">
−
WB2.logout(function() {
+
<wb-topic-timeline data:keyword="王者荣耀" data:height="500"></wb-topic-timeline>
−
    //callback function
+
−
});
+
 
</pre>
 
</pre>
  
−
<div style="margin:15px 0;">'''参数说明'''</div>
+
<div class="wiki_txtJ">其中，data:keyword 属性为需要指定的关键词，data:height 属性为显示 view 的高度。</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>
+
==微博客户端JS 接口说明==
  
−
<div class="wiki_txtJ">检测微博登录状态，已登录返回true，未登录返回false。</div>
+
<div class="wiki_txtJ">微博客户端JS 接口。</div>
  
−
<div style="margin:15px 0;">'''示例'''</div>
 
  
−
<div class="code_type">Javascript</div>
+
<div class="wiki_title_withline">wb.getNetworkType</div>
−
<pre class="brush:js">
+
−
var status = WB2.checkLogin();
+
−
alert(status);
+
−
</pre>
+
  
−
 
+
<div class="wiki_txtJ">获取网络类型。</div>
−
<div class="wiki_title_withline">WB2.anyWhere(callback)</div>
+
−
 
+
−
<div class="wiki_txtJ">第三方与微博API进行数据交互及采用Js方式调用内置微博组件的入口函数。</div>
+
  
 
<div style="margin:15px 0;">'''示例'''</div>
 
<div style="margin:15px 0;">'''示例'''</div>
第188行： 第154行：
 
<div class="code_type">Javascript</div>
 
<div class="code_type">Javascript</div>
 
<pre class="brush:js">
 
<pre class="brush:js">
−
WB2.anyWhere(function(W){
+
WB2.logout(function() {
−
     //数据交互
+
     //callback function
−
    W.parseCMD(...);
+
−
   
+
−
    //调用微博组件
+
−
    W.widget.hoverCard(...);
+
−
    W.widget.followButton(...);
+
−
    ...
+
 
});
 
});
 
</pre>
 
</pre>
第203行： 第163行：
 
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
 
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
 
<html><colgroup></colgroup></html>
 
<html><colgroup></colgroup></html>
−
!width="16%"|参数名称
+
!width="20%"|参数名称
−
!width="13%"|类型
+
!width="20%"|类型
−
!width="13%"|默认值
+
!width="60%"|说明描述
−
!width="13%"|是否必选
+
−
!width="45%"|说明描述
+
 
|-
 
|-
−
|callback
+
|success
 
|Function
 
|Function
−
|无
+
|调用成功后的回调函数。
−
|是
+
|-
−
|回调函数，必需指定一个形参W，可以通过形参调用parseCMD读取开放平台API接口或者使用微博组件。具体见parseCMD及JS调用微博组件的说明。
+
|fail
 +
|Function
 +
|调用失败后的回调函数。
 
|}
 
|}
  
  
−
<div class="wiki_title_withline">W.parseCMD(uri, callback, args, opts)</div>
+
<div class="wiki_title_withline">wb.setBrowserTitle</div>
  
−
<div class="wiki_txtJ">第三方与开放平台API接口进行数据请求的函数，必须在WB2.anyWhere中通过W对象调用。</div>
+
<div class="wiki_txtJ">设置页面标题。</div>
  
 
<div style="margin:15px 0;">'''示例'''</div>
 
<div style="margin:15px 0;">'''示例'''</div>
第225行： 第185行：
 
<div class="code_type">Javascript</div>
 
<div class="code_type">Javascript</div>
 
<pre class="brush:js">
 
<pre class="brush:js">
−
WB2.anyWhere(function(W){
+
WB2.logout(function() {
−
     //数据交互
+
     //callback function
−
    W.parseCMD('/users/show.json', function(oResult, bStatus) {
+
−
        if(bStatus) {
+
−
            //to do something...
+
−
        }
+
−
    }, {
+
−
        screen_name : '姚晨'
+
−
    }, {
+
−
        method : 'get',
+
−
        cache_time : 30
+
−
    });
+
 
});
 
});
 
</pre>
 
</pre>
第244行： 第194行：
 
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
 
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
 
<html><colgroup></colgroup></html>
 
<html><colgroup></colgroup></html>
−
!width="16%"|参数名称
+
!width="20%"|参数名称
−
!width="13%"|类型
+
!width="20%"|类型
−
!width="13%"|默认值
+
!width="60%"|说明描述
−
!width="13%"|是否必选
+
−
!width="45%"|说明描述
+
 
|-
 
|-
−
|uri
+
|success
−
|String
+
|Function
−
|无
+
|调用成功后的回调函数。
−
|是
+
−
|传递给API接口的命令URI，如“/users/show.json”、“statuses/public_timeline.json”，请见 [[API|API文档]]。
+
 
|-
 
|-
−
|callback
+
|fail
 
|Function
 
|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组件说明及示例==
+
<div class="wiki_title_withline">wb.setSharingContent</div>
  
−
<div class="wiki_txtJ">JS 组件的使用方法及示例。JS 组件有WBML、和HTML+JS两种部署方法。</div>
+
<div class="wiki_txtJ">设置在微博内分享到微信的内容。</div>
−
 
+
−
 
+
−
<div class="wiki_title_withline">微博登录按钮</div>
+
−
 
+
−
<div class="wiki_txtJ">第三方与微博进行连接登录的按钮，可实现登录与退出功能。</div>
+
  
 
<div style="margin:15px 0;">'''示例'''</div>
 
<div style="margin:15px 0;">'''示例'''</div>
−
 
−
<div class="code_type">HTML</div>
 
−
<pre class="brush:html">
 
−
<div id="wb_connect_btn"></div>
 
−
</pre>
 
  
 
<div class="code_type">Javascript</div>
 
<div class="code_type">Javascript</div>
 
<pre class="brush:js">
 
<pre class="brush:js">
−
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');
 
−
            }
 
−
        }
 
−
    });
 
−
});
 
−
</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>
+
<div style="margin:15px 0;">'''参数说明'''</div>
  
 +
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
 +
<html><colgroup></colgroup></html>
 +
!width="20%"|参数名称
 +
!width="20%"|类型
 +
!width="60%"|说明描述
 +
|-
 +
|success
 +
|Function
 +
|调用成功后的回调函数。
 +
|-
 +
|fail
 +
|Function
 +
|调用失败后的回调函数。
 +
|}
  
−
<div class="wiki_title_withline">微博关注按钮</div>
 
  
−
<div class="wiki_txtJ">关注按钮可以部署在任何支持HTML的网页。用户在这些网页点击关注按钮，就可以快速成为你的微博粉丝; 关注按钮会自动判断与用户的关系，对于已关注用户，将显示其微博动态。</div>
+
<div class="wiki_title_withline"></div>
  
−
<div style="margin:15px 0;">'''示例'''</div>
+
<div class="wiki_txtJ"></div>
−
 
+
−
<div class="code_type">HTML</div>
+
−
<pre class="brush:html">
+
−
<div id="wb_follow_btn"></div>
+
−
</pre>
+
−
 
+
−
<div class="code_type">Javascript</div>
+
−
<pre class="brush:js">
+
−
WB2.anyWhere(function(W){
+
−
    W.widget.followButton({
+
−
        'nick_name': '姚晨',  //用户昵称
+
−
        'id': "wb_follow_btn",
+
−
        'show_head' : true, //是否显示头像
+
−
        'show_name' : true, //是否显示名称
+
−
        'show_cancel': true //是否显示取消关注按钮
+
−
    });
+
−
});
+
−
</pre>
+
−
 
+
−
<div class="code_type">WBML</div>
+
−
<pre class="brush:html">
+
−
<wb:follow-button uid="1052981072" type="red_4">关注按钮</wb:follow-button>
+
−
</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/follow-button.php 微博关注按钮 - 详细代码示例与参数说明]</div>
+
−
 
+
−
 
+
−
<div class="wiki_title_withline">微博名片</div>
+
−
 
+
−
<div class="wiki_txtJ">微博名片组件可在一段纯文本中，自动识别@用户名，添加用户名片功能。鼠标移动到"@用户名"上时，浮出一个展示用户信息的名片，名片中同时带有微博关注按钮功能。支持单独处理及批量处理两种方式。</div>
+
  
 
<div style="margin:15px 0;">'''示例'''</div>
 
<div style="margin:15px 0;">'''示例'''</div>
−
 
−
<div class="code_type">HTML</div>
 
−
<pre class="brush:html">
 
−
<a id="wb_card_alone" wb_screen_name="woiweb" href="#">woiweb</a>
 
−
</pre>
 
  
 
<div class="code_type">Javascript</div>
 
<div class="code_type">Javascript</div>
 
<pre class="brush:js">
 
<pre class="brush:js">
−
WB2.anyWhere(function(W){
 
−
    W.widget.hoverCard({
 
−
        id : "wb_card_alone"
 
−
    });
 
−
});
 
−
</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>
 
−
 
−
 
−
<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>
 
</pre>
  
−
<div class="code_type">Javascript</div>
+
<div style="margin:15px 0;">'''参数说明'''</div>
−
<pre class="brush:js">
+
−
WB2.anyWhere(function(W){
+
−
    W.widget.publish({
+
−
        'id' : 'wb_publish',
+
−
        'default_text' : '预置方案　& \r\n我可以换行.',
+
−
        'callback' : function(o) {
+
−
            //do something...
+
−
        }
+
−
    });
+
−
});
+
−
</pre>
+
  
−
<div class="code_type">WBML</div>
 
−
<pre class="brush:html">
 
−
<wb:publish></wb:publish>
 
−
</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/publish.php 微博发布器 - 详细代码示例与参数说明]</div>
+
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table"
 +
<html><colgroup></colgroup></html>
 +
!width="20%"|参数名称
 +
!width="20%"|类型
 +
!width="60%"|说明描述
 +
|-
 +
|success
 +
|Function
 +
|调用成功后的回调函数。
 +
|-
 +
|fail
 +
|Function
 +
|调用失败后的回调函数。
 +
|}
  
  
−
<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>
 
−
 
−
<div class="code_type">Javascript</div>
 
−
<pre class="brush:js">
 
−
WB2.anyWhere(function(W){
 
−
    W.widget.selector({
 
−
        id : "wb_selector"
 
−
    });
 
−
});
 
−
</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>
 
  
  

2020年12月23日 (三) 15:48的版本

JS SDK

JS SDK 2020是微博开放平台最新的升级版，它较之前版本有较大改变：

  • 1、聚焦移动端H5场景，去除了原来PC时代的旧组件；
  • 2、分享功能，适配多场景，无论是在微博、微信、手机浏览器，还是PC上，都可以方便使用；
  • 3、采用开放标签，样式完全由开发者自己控制；
  • 4、更加安全，因此去除了原来的JS前端直接授权、直接调接口的功能，防止数据外泄，相应的页面授权需求，需要开发者按照标准授权流程接入，调用开放接口则需要放在服务端完成；


下面我们来一起体验一下这些特性。



开发指南

如果你没有AppKey请先在开放平台网站，注册自己的应用，申请入口。


1、绑定安全域名

在使用JS SDK 2020时，需要为该应用绑定安全域名，其中微博客户端JS 接口将以此域名来进行校验。


绑定安全域名的操作可以在 我的应用 的 高级信息 页面完成。


2、引用JS SDK 2020文件

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

HTML
<script src="https://open.weibo.com/views/js/wbsdk.js" type="text/javascript" charset="utf-8"></script>


3、初始化JS SDK 2020

调用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'
    });
});

如果你的应用处于开发调试过程，建议使用JS SDK 2020的调试模式，可以在初始化时，配置 debug 为 true，开启调试模式，此时在调用出错时，出错信息将通过 alert 弹出，方便在移动端调试。

JS
wb.init({
    debug: false,
    ...
});


开放标签

开放标签类似原来的组件，目前主要就是分享功能。


分享开放标签
分享当前页面到微博，适配各种场景。
示例
HTML
<wb-share-button>分享到微博</wb-share-button>
开放标签中的样式，完全由开发者自己控制，例如。
HTML
<wb-share-button><div class="myStyle">分享到微博</div></wb-share-button>
指定分享的内容和页面地址，可以通过 data:title，data:url 属性标签完成自定义，例如。
HTML
<wb-share-button data:title="title" data:url="url">分享到微博</wb-share-button>
如果需要在分享的时候，指定一张分享图片，需要先将图片上传到微博图床，然后再开放标签上指定图片的PID，例如。
HTML
<wb-share-button data:pid="53b515f0ly1glgemvpjwfj20gi0aw114">分享到微博</wb-share-button>


内容聚合流开放标签
按照关键词，输入一个内容聚合流。
示例
HTML
<wb-topic-timeline data:keyword="王者荣耀" data:height="500"></wb-topic-timeline>
其中，data:keyword 属性为需要指定的关键词，data:height 属性为显示 view 的高度。


微博客户端JS 接口说明

微博客户端JS 接口。


wb.getNetworkType
获取网络类型。
示例
Javascript
WB2.logout(function() {
    //callback function
});
参数说明
参数名称 类型 说明描述
success Function 调用成功后的回调函数。
fail Function 调用失败后的回调函数。


wb.setBrowserTitle
设置页面标题。
示例
Javascript
WB2.logout(function() {
    //callback function
});
参数说明
参数名称 类型 说明描述
success Function 调用成功后的回调函数。
fail Function 调用失败后的回调函数。


wb.setSharingContent
设置在微博内分享到微信的内容。
示例
Javascript
参数说明
参数名称 类型 说明描述
success Function 调用成功后的回调函数。
fail Function 调用失败后的回调函数。


示例
Javascript
参数说明


参数名称 类型 说明描述
success Function 调用成功后的回调函数。
fail Function 调用失败后的回调函数。




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