第1行: | 第1行: | ||
− | =JS SDK= | + | =JS SDK 2020= |
<div class="wiki_txtJ"> | <div class="wiki_txtJ"> | ||
− | JS SDK | + | JS SDK 2020 是微博开放平台最新的升级版,它较之前版本有较大改变: |
<ul class="wiki_indent_list"> | <ul class="wiki_indent_list"> | ||
第56行: | 第56行: | ||
<div style="margin:15px 0;"> | <div style="margin:15px 0;"> | ||
− | + | 通过 wb.init 接口注入权限验证配置,所有需要使用微博客户端内JS SDK 的页面必须先注入配置信息,否则将无法调用。 | |
</div> | </div> | ||
<div class="code_type">Javascript</div> | <div class="code_type">Javascript</div> | ||
<pre class="brush:js"> | <pre class="brush:js"> | ||
− | + | wb.init({ | |
− | + | debug: false, | |
− | + | appkey: '', | |
− | + | timestamp: , | |
− | + | noncestr: '', | |
− | + | signature: '', | |
− | + | scope: [ | |
− | + | 'getNetworkType', | |
− | + | 'setBrowserTitle', | |
− | + | 'setSharingContent', | |
+ | 'openMenu', | ||
+ | 'scanQRCode', | ||
+ | 'pickContact' | ||
+ | ] | ||
}); | }); | ||
</pre> | </pre> | ||
第85行: | 第89行: | ||
}); | }); | ||
</pre> | </pre> | ||
+ | |||
+ | <div style="margin:15px 0;"> | ||
+ | 签名算法见文档后面的说明,JS 接口的说明见后面。 | ||
+ | </div> | ||
第141行: | 第149行: | ||
− | == | + | ==微博客户端内JS 接口说明== |
<div class="wiki_txtJ">微博客户端JS 接口。</div> | <div class="wiki_txtJ">微博客户端JS 接口。</div> | ||
第154行: | 第162行: | ||
<div class="code_type">Javascript</div> | <div class="code_type">Javascript</div> | ||
<pre class="brush:js"> | <pre class="brush:js"> | ||
− | + | wb.getNetworkType({ | |
− | + | success: function (res) { | |
+ | alert("## getNetworkType success: " + JSON.stringify(res)); | ||
+ | }, | ||
+ | fail: function (res) { | ||
+ | alert("## getNetworkType fail: " + JSON.stringify(res)); | ||
+ | } | ||
}); | }); | ||
</pre> | </pre> | ||
第185行: | 第198行: | ||
<div class="code_type">Javascript</div> | <div class="code_type">Javascript</div> | ||
<pre class="brush:js"> | <pre class="brush:js"> | ||
− | + | wb.setBrowserTitle({ | |
− | + | title: "JS SDK DEMO", | |
+ | success: function (res) { | ||
+ | alert("## setBrowserTitle success: " + JSON.stringify(res)); | ||
+ | }, | ||
+ | fail: function (res) { | ||
+ | alert("## setBrowserTitle fail: " + JSON.stringify(res)); | ||
+ | } | ||
}); | }); | ||
</pre> | </pre> | ||
第197行: | 第216行: | ||
!width="20%"|类型 | !width="20%"|类型 | ||
!width="60%"|说明描述 | !width="60%"|说明描述 | ||
+ | |- | ||
+ | |title | ||
+ | |String | ||
+ | |需要设置的页面标题。 | ||
|- | |- | ||
|success | |success | ||
第211行: | 第234行: | ||
<div class="wiki_txtJ">设置在微博内分享到微信的内容。</div> | <div class="wiki_txtJ">设置在微博内分享到微信的内容。</div> | ||
+ | |||
+ | <div style="margin:15px 0;">'''示例'''</div> | ||
+ | |||
+ | <div class="code_type">Javascript</div> | ||
+ | <pre class="brush:js"> | ||
+ | wb.setSharingContent({ | ||
+ | icon: "https://img.t.sinajs.cn/t6/style/images/face/face_card_longwb.png", | ||
+ | title: "SDK Sharing Content", | ||
+ | desc: "SDK Sharing Content", | ||
+ | success: function (res) { | ||
+ | alert("## setSharingContent success: " + JSON.stringify(res)); | ||
+ | }, | ||
+ | fail: function (res) { | ||
+ | alert("## setSharingContent fail: " + JSON.stringify(res)); | ||
+ | } | ||
+ | }); | ||
+ | </pre> | ||
+ | |||
+ | <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"></div> | ||
<div style="margin:15px 0;">'''示例'''</div> | <div style="margin:15px 0;">'''示例'''</div> | ||
第220行: | 第282行: | ||
<div style="margin:15px 0;">'''参数说明'''</div> | <div style="margin:15px 0;">'''参数说明'''</div> | ||
+ | |||
{|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table" | {|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table" | ||
第265行: | 第328行: | ||
|调用失败后的回调函数。 | |调用失败后的回调函数。 | ||
|} | |} | ||
+ | |||
+ | |||
+ | <div class="wiki_title_withline"></div> | ||
+ | |||
+ | <div class="wiki_txtJ"></div> | ||
+ | |||
+ | <div style="margin:15px 0;">'''示例'''</div> | ||
+ | |||
+ | <div class="code_type">Javascript</div> | ||
+ | <pre class="brush:js"> | ||
+ | |||
+ | </pre> | ||
+ | |||
+ | <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 | ||
+ | |调用失败后的回调函数。 | ||
+ | |} | ||
+ | |||
+ | |||
+ | |||
+ | ==JS SDK 2020 使用权限签名算法== | ||
+ | |||
+ | <div class="wiki_txtJ">生成签名之前必须先了解一下jsapi_ticket。</div> | ||
2020年12月23日 (三) 16:01的版本
JS SDK 2020
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
通过 wb.init 接口注入权限验证配置,所有需要使用微博客户端内JS SDK 的页面必须先注入配置信息,否则将无法调用。
Javascript
wb.init({ debug: false, appkey: '', timestamp: , noncestr: '', signature: '', scope: [ 'getNetworkType', 'setBrowserTitle', 'setSharingContent', 'openMenu', 'scanQRCode', 'pickContact' ] });
如果你的应用处于开发调试过程,建议使用JS SDK 2020的调试模式,可以在初始化时,配置 debug 为 true,开启调试模式,此时在调用出错时,出错信息将通过 alert 弹出,方便在移动端调试。
JS
wb.init({ debug: false, ... });
签名算法见文档后面的说明,JS 接口的说明见后面。
开放标签
开放标签类似原来的组件,目前主要就是分享功能。
分享开放标签
分享当前页面到微博,适配各种场景。
示例
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
wb.getNetworkType({ success: function (res) { alert("## getNetworkType success: " + JSON.stringify(res)); }, fail: function (res) { alert("## getNetworkType fail: " + JSON.stringify(res)); } });
参数说明
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
wb.setBrowserTitle
设置页面标题。
示例
Javascript
wb.setBrowserTitle({ title: "JS SDK DEMO", success: function (res) { alert("## setBrowserTitle success: " + JSON.stringify(res)); }, fail: function (res) { alert("## setBrowserTitle fail: " + JSON.stringify(res)); } });
参数说明
参数名称 | 类型 | 说明描述 |
---|---|---|
title | String | 需要设置的页面标题。 |
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
wb.setSharingContent
设置在微博内分享到微信的内容。
示例
Javascript
wb.setSharingContent({ icon: "https://img.t.sinajs.cn/t6/style/images/face/face_card_longwb.png", title: "SDK Sharing Content", desc: "SDK Sharing Content", success: function (res) { alert("## setSharingContent success: " + JSON.stringify(res)); }, fail: function (res) { alert("## setSharingContent fail: " + JSON.stringify(res)); } });
参数说明
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
示例
Javascript
参数说明
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
示例
Javascript
参数说明
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
示例
Javascript
参数说明
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
JS SDK 2020 使用权限签名算法
生成签名之前必须先了解一下jsapi_ticket。