第2行: | 第2行: | ||
<div class="wiki_txtJ"> | <div class="wiki_txtJ"> | ||
− | JS SDK | + | JS SDK 2020是微博开放平台最新的升级版,它较之前版本有较大改变: |
<ul class="wiki_indent_list"> | <ul class="wiki_indent_list"> | ||
− | <li clas="wiki_indent_item"> | + | <li clas="wiki_indent_item">1、聚焦移动端H5场景,去除了原来PC时代的旧组件;</li> |
− | <li clas="wiki_indent_item"> | + | <li clas="wiki_indent_item">2、分享功能,适配多场景,无论是在微博、微信、手机浏览器,还是PC上,都可以方便使用;</li> |
− | <li clas="wiki_indent_item"> | + | <li clas="wiki_indent_item">3、采用开放标签,样式完全由开发者自己控制;</li> |
− | <li clas="wiki_indent_item"> | + | <li clas="wiki_indent_item">4、更加安全,因此去除了原来的JS前端直接授权、直接调接口的功能,防止数据外泄,相应的页面授权需求,需要开发者按照标准授权流程接入,调用开放接口则需要放在服务端完成;</li> |
− | + | ||
</ul> | </ul> | ||
− | + | 下面我们来一起体验一下这些特性。 | |
+ | |||
+ | |||
+ | <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请先在开放平台网站,注册自己的应用,[https://open.weibo.com/connect 申请入口]。 | |
</div> | </div> | ||
− | <div class="wiki_title_withline"> | + | <div class="wiki_title_withline">1、绑定安全域名</div> |
<div style="margin:15px 0;"> | <div style="margin:15px 0;"> | ||
− | + | 在使用JS SDK 2020时,需要为该应用绑定安全域名,其中微博客户端JS 接口将以此域名来进行校验。 | |
− | + | 绑定安全域名的操作可以在 我的应用 的 高级信息 页面完成。 | |
</div> | </div> | ||
第36行: | 第41行: | ||
− | <div class="wiki_title_withline"> | + | <div class="wiki_title_withline">2、引用JS SDK 2020文件</div> |
<div style="margin:15px 0;"> | <div style="margin:15px 0;"> | ||
− | + | 在你的页面部署 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"> | ||
− | < | + | <script src="https://open.weibo.com/views/js/wbsdk.js" type="text/javascript" charset="utf-8"></script> |
</pre> | </pre> | ||
− | <div class="wiki_title_withline"> | + | <div class="wiki_title_withline">3、初始化JS SDK 2020</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"> | + | <div class="code_type">JS</div> |
− | <pre class="brush: | + | <pre class="brush:js"> |
− | + | wb.init({ | |
+ | debug: false, | ||
+ | ... | ||
+ | }); | ||
</pre> | </pre> | ||
− | |||
− | + | ==开放标签== | |
+ | <div class="wiki_txtJ">开放标签类似原来的组件,目前主要就是分享功能。</div> | ||
− | |||
− | <div class="wiki_txtJ"> | + | <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"> | + | <div class="code_type">HTML</div> |
− | <pre class="brush: | + | <pre class="brush:html"> |
− | + | <wb-share-button>分享到微博</wb-share-button> | |
− | + | ||
− | + | ||
</pre> | </pre> | ||
− | <div | + | <div class="wiki_txtJ">开放标签中的样式,完全由开发者自己控制,例如。</div> |
− | + | <div class="code_type">HTML</div> | |
− | + | <pre class="brush:html"> | |
− | + | <wb-share-button><div class="myStyle">分享到微博</div></wb-share-button> | |
− | + | </pre> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="wiki_txtJ">指定分享的内容和页面地址,可以通过 data:title,data:url 属性标签完成自定义,例如。</div> | ||
− | <div class=" | + | <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 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"> | + | <div class="code_type">HTML</div> |
− | <pre class="brush: | + | <pre class="brush:html"> |
− | + | <wb-topic-timeline data:keyword="王者荣耀" data:height="500"></wb-topic-timeline> | |
− | + | ||
− | + | ||
</pre> | </pre> | ||
− | <div | + | <div class="wiki_txtJ">其中,data:keyword 属性为需要指定的关键词,data:height 属性为显示 view 的高度。</div> |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ==微博客户端JS 接口说明== | |
− | <div class="wiki_txtJ"> | + | <div class="wiki_txtJ">微博客户端JS 接口。</div> |
− | |||
− | <div class=" | + | <div class="wiki_title_withline">wb.getNetworkType</div> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="wiki_txtJ">获取网络类型。</div> | |
− | + | ||
− | + | ||
− | <div class="wiki_txtJ"> | + | |
<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. | + | WB2.logout(function() { |
− | // | + | //callback function |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
}); | }); | ||
</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=" | + | !width="20%"|参数名称 |
− | !width=" | + | !width="20%"|类型 |
− | !width=" | + | !width="60%"|说明描述 |
− | + | ||
− | + | ||
|- | |- | ||
− | | | + | |success |
|Function | |Function | ||
− | | | + | |调用成功后的回调函数。 |
− | | | + | |- |
− | | | + | |fail |
+ | |Function | ||
+ | |调用失败后的回调函数。 | ||
|} | |} | ||
− | <div class="wiki_title_withline"> | + | <div class="wiki_title_withline">wb.setBrowserTitle</div> |
− | <div class="wiki_txtJ"> | + | <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. | + | WB2.logout(function() { |
− | // | + | //callback function |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
}); | }); | ||
</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=" | + | !width="20%"|参数名称 |
− | !width=" | + | !width="20%"|类型 |
− | !width=" | + | !width="60%"|说明描述 |
− | + | ||
− | + | ||
|- | |- | ||
− | | | + | |success |
− | | | + | |Function |
− | | | + | |调用成功后的回调函数。 |
− | + | ||
− | + | ||
|- | |- | ||
− | | | + | |fail |
|Function | |Function | ||
− | | | + | |调用失败后的回调函数。 |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
|} | |} | ||
− | = | + | <div class="wiki_title_withline">wb.setSharingContent</div> |
− | <div class="wiki_txtJ"> | + | <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">Javascript</div> | ||
<pre class="brush:js"> | <pre class="brush:js"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
− | <div style=" | + | <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=" | + | <div class="wiki_title_withline"></div> |
− | + | <div class="wiki_txtJ"></div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <div class="wiki_txtJ"> | + | |
<div style="margin:15px 0;">'''示例'''</div> | <div style="margin:15px 0;">'''示例'''</div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
<div class="code_type">Javascript</div> | <div class="code_type">Javascript</div> | ||
<pre class="brush:js"> | <pre class="brush:js"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
− | <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 | ||
+ | |调用失败后的回调函数。 | ||
+ | |} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
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 | 调用失败后的回调函数。 |