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。