跳转到: 导航, 搜索
第1行: 第1行:
=JS SDK=
+
=JS SDK 2020=
  
 
<div class="wiki_txtJ">
 
<div class="wiki_txtJ">
JS SDK 2020是微博开放平台最新的升级版,它较之前版本有较大改变:
+
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;">
调用JSSDK访问API接口。
+
通过 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">
WB2.anyWhere(function(W){
+
wb.init({
    W.parseCMD("/users/show.json", function(sResult, bStatus){
+
debug: false,
        try{
+
appkey: '',
            //to do something...
+
timestamp: ,
        }catch(e){}
+
noncestr: '',
    },{
+
signature: '',
        uid: '123456789'
+
scope: [
    }{
+
'getNetworkType',
        method: 'get'
+
'setBrowserTitle',
    });
+
'setSharingContent',
 +
'openMenu',
 +
'scanQRCode',
 +
'pickContact'
 +
]
 
});
 
});
 
</pre>
 
</pre>
第85行: 第89行:
 
});
 
});
 
</pre>
 
</pre>
 +
 +
<div style="margin:15px 0;">
 +
签名算法见文档后面的说明,JS 接口的说明见后面。
 +
</div>
  
  
第141行: 第149行:
  
  
==微博客户端JS 接口说明==
+
==微博客户端内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">
WB2.logout(function() {
+
wb.getNetworkType({
    //callback function
+
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">
WB2.logout(function() {
+
wb.setBrowserTitle({
    //callback function
+
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。