微博开放平台
微连接
移动应用
网站接入
电商服务商
电商商家
数据服务
数据服务
合作伙伴
微博支付
轻应用
粉丝服务
文档
推广
我的应用
登录
weibo
开发文档
首页
平台政策与指引
概述
平台公约
新手指南
开发者协议
应用运营管理规范
微连接分级管理办法
应用审核产品指南
应用安全开发注意事项
平台应用设计规范
微服务接入指南
微博登录接入
用微博帐号登录
授权机制
移动应用接入
移动应用介绍
移动应用SSO授权
微博Deep Link
媒体接入平台
头条文章开放接口
视频上传开放接口
电商接入平台
电商服务商接入
电商商家端接入
电商平台能力接口
粉丝服务平台
粉丝服务平台
新手接入指南
微信开发者迁移指南
接收消息
发送消息
自定义菜单
用户管理
生成带参数的二维码
Fans Service Platform
商业接口
商业数据接入指南
订阅服务手册(中文版)
订阅服务手册(英文版)
商业接口-REST API
商业数据常见问题
网站接入
网站接入介绍
微博API
微博API
接口访问频次权限
资源下载
SDK
微博标识下载
常见问题
联系我们
工具箱
链入页面
链出更改
特殊页面
查看源代码
跳转到:
导航
,
搜索
根据下列原因,你没有权限编辑本页:
您刚才请求的操作只有这个用户组中的用户才能使用:
用户
您可以查看并复制此页面的源代码:
=JS SDK 2020= <div class="wiki_txtJ"> JS SDK 2020 是微博开放平台最新版的、针对移动端网页的SDK,它较之前版本有较大改变: <ul class="wiki_indent_list"> <li clas="wiki_indent_item">1、聚焦移动端H5场景,去除了原来PC时代的旧组件;</li> <li clas="wiki_indent_item">2、分享、关注功能,适配多场景,无论是在微博、微信、手机浏览器,还是PC上,都可以方便使用;</li> <li clas="wiki_indent_item">3、采用开放标签,样式完全由开发者自己控制;</li> <li clas="wiki_indent_item">4、更加安全,因此去除了原来的JS前端直接授权、直接调接口的功能,防止数据外泄,因此页面授权功能需要开发者按照标准授权流程接入,调用开放接口则需要放在服务端完成;</li> </ul> 下面我们来一起体验一下这些特性。 <div style="width:230px;margin:30px auto 0;"> {{Img_polaroid|src=https://wx2.sinaimg.cn/large/53b515f0ly1glxt9dys97j208c08c3yd.jpg}} </div> </div> ==开发指南== <div class="wiki_txtJ"> 如果你没有AppKey请先在开放平台网站,注册自己的应用,[https://open.weibo.com/connect 申请入口]。 </div> <div class="wiki_title_withline">1、绑定安全域名</div> <div style="margin:15px 0;"> 在使用JS SDK 2020时,需要为该应用绑定安全域名,其中微博客户端JS 接口将以此域名来进行校验,如果你不打算使用微博客户端JS 接口可以跳过此步骤。 绑定安全域名的操作可以在 我的应用 的 高级信息 页面完成。 </div> {{Img_polaroid|src=https://wx2.sinaimg.cn/large/53b515f0ly1gm4r8agxmuj20rk0ex44k.jpg}} <div class="wiki_title_withline">2、引用JS SDK 2020文件</div> <div style="margin:15px 0;"> 在你的页面部署 wbsdk.js 文件,同时,如果你的页面编码不是UTF-8,请添加charset="utf-8"属性。 </div> <div class="code_type">HTML</div> <pre class="brush:html"> <script src="https://open.weibo.com/views/js/wbsdk.js" type="text/javascript" charset="utf-8"></script> </pre> <div style="margin:15px 0;"> 支持使用 AMD/CMD 标准模块加载方法加载。 </div> <div class="wiki_title_withline">3、初始化JS SDK 2020</div> <div style="margin:15px 0;"> 通过 wb.init 接口注入权限验证配置,所有需要使用微博客户端内JS SDK 的页面必须先注入配置信息,否则将无法调用。如果你不打算使用微博客户端JS 接口可以采用简易初始化方法。 </div> <div style="margin:15px 0;"> '''完全初始化,使用微博客户端JS 接口与开放标签时,需要完全初始化:''' </div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.init({ debug: false, appkey: '', timestamp: , noncestr: '', signature: '', scope: [ 'getNetworkType', 'setBrowserTitle', 'setSharingContent', 'openMenu', 'scanQRCode', 'pickContact' ] }); </pre> <div style="margin:15px 0;"> 其中,配置参数,debug:开启调试模式,appkey:应用唯一标识,timestamp:生成签名的时间戳,noncestr:生成签名的随机串,signature:签名,scope:需要使用的JS接口列表。 </div> <div style="margin:15px 0;"> '''简易初始化,不使用微博客户端JS 接口,只使用开放标签时,可以简化初始方法,减少开发难度:''' </div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.init({ appkey: '' }); </pre> <div style="margin:15px 0;"> 如果你的应用处于开发调试过程,建议使用JS SDK 2020的调试模式,可以在初始化时,配置 debug 为 true,开启调试模式,此时在调用出错时,出错信息将通过 alert 弹出,方便在移动端调试。 </div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.init({ debug: true, ... }); </pre> <div style="margin:15px 0;"> 签名算法见文档后面的说明,JS 接口的说明见后面。 </div> <div class="wiki_title_withline">4、通过 ready 接口处理成功验证</div> <div style="margin:15px 0;"> init 初始化后会执行 ready 方法,所有JS 接口调用都必须在 ready 接口获得结果之后。如果你没有使用微博客户端JS 接口可以跳过此步骤。 </div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.ready(function () { alert("## init success"); }); </pre> <div style="margin:15px 0;"> init 是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在 ready 函数中。 </div> <div class="wiki_title_withline">5、通过 error 接口处理失败验证</div> <div style="margin:15px 0;"> 初始化失败的处理。如果你没有使用微博客户端JS 接口可以跳过此步骤。 </div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.error(function (res) { alert("## init error: " + res); }); </pre> <div style="margin:15px 0;"> init 初始化失败会执行 error 函数,如签名过期导致验证失败,错误信息可以在返回的 res 参数中查看,可以在这里更新签名,重新尝试初始化。 </div> ==开放标签== <div class="wiki_txtJ">开放标签类似原来的组件,目前主要是分享、关注功能。</div> <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"> <wb-share-button>分享到微博</wb-share-button> </pre> <div style="margin:15px 0;">开放标签中的样式,完全由开发者自己控制,例如。</div> <div class="code_type">HTML</div> <pre class="brush:html"> <wb-share-button><div class="myStyle">分享到微博</div></wb-share-button> </pre> <div style="margin:15px 0;">指定分享的内容和页面地址,可以通过 data:title,data:url 属性标签完成自定义,例如。</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 style="margin:15px 0;">如果需要在分享的时候,指定一张分享图片,需要先将图片上传到微博图床,然后在开放标签上指定图片的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 class="code_type">HTML</div> <pre class="brush:html"> <wb-follow-account data:uid="1904178193">在微博上关注我</wb-follow-account> </pre> <div style="margin:15px 0;">指定要关注的微博账号,通过 data:uid 属性标签完成。</div> <div style="margin:15px 0;">开放标签中的样式,完全由开发者自己控制,例如。</div> <div class="code_type">HTML</div> <pre class="brush:html"> <wb-follow-account data:uid="1904178193"><div class="myStyle">在微博上关注我</div></wb-follow-account> </pre> <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"> <wb-topic-timeline data:keyword="王者荣耀" data:height="500"></wb-topic-timeline> </pre> <div style="margin:15px 0;">其中,data:keyword 属性为需要指定的关键词,data:height 属性为显示 view 的高度。</div> ==微博客户端内JS 接口说明== <div class="wiki_txtJ">微博客户端JS 接口。</div> <div class="wiki_title_withline">wb.getNetworkType</div> <div class="wiki_txtJ">获取网络类型。</div> <div style="margin:15px 0;">'''示例'''</div> <div class="code_type">Javascript</div> <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> <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 style="margin:15px 0;">'''返回值'''</div> <div class="code_type">Javascript</div> <pre class="brush:js"> { "network_type": "wifi" } </pre> <div class="wiki_title_withline">wb.setBrowserTitle</div> <div class="wiki_txtJ">设置页面标题。</div> <div style="margin:15px 0;">'''示例'''</div> <div class="code_type">Javascript</div> <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> <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%"|说明描述 |- |title |String |需要设置的页面标题。 |- |success |Function |调用成功后的回调函数。 |- |fail |Function |调用失败后的回调函数。 |} <div style="margin:15px 0;">'''错误码'''</div> {|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table" <html><colgroup></colgroup></html> !width="40%"|错误码 !width="60%"|说明描述 |- |MISSING_PARAMS |缺少title参数。 |} <div class="wiki_title_withline">wb.setSharingContent</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%"|说明描述 |- |icon |String |分享到微信的卡片图标的图片地址。 |- |title |String |分享到微信的卡片标题。 |- |desc |String |分享到微信的卡片描述。 |- |success |Function |调用成功后的回调函数。 |- |fail |Function |调用失败后的回调函数。 |} <div class="wiki_title_withline">wb.openMenu</div> <div class="wiki_txtJ">打开分享菜单</div> <div style="margin:15px 0;">'''示例'''</div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.openMenu({ success: function (res) { alert("## openMenu success: " + JSON.stringify(res)); }, fail: function (res) { alert("## openMenu 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 style="margin:15px 0;">'''返回值'''</div> <div class="code_type">Javascript</div> <pre class="brush:js"> { "selected_code": "1005", "selected_title": "朋友圈" } </pre> <div style="margin:15px 0;">'''错误码'''</div> {|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table" <html><colgroup></colgroup></html> !width="40%"|错误码 !width="60%"|说明描述 |- |USER_CANCELLED |用户直接关闭了菜单。 |} <div class="wiki_title_withline">wb.shareToWxTimeline</div> <div class="wiki_txtJ">分享到微信朋友圈</div> <div style="margin:15px 0;">'''示例'''</div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.shareToWxTimeline({ success: function (res) { alert("## shareToWxTimeline success: " + JSON.stringify(res)); }, fail: function (res) { alert("## shareToWxTimeline 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">wb.shareToWxMessage</div> <div class="wiki_txtJ">分享到微信好友</div> <div style="margin:15px 0;">'''示例'''</div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.shareToWxMessage({ success: function (res) { alert("## shareToWxMessage success: " + JSON.stringify(res)); }, fail: function (res) { alert("## shareToWxMessage 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">wb.scanQRCode</div> <div class="wiki_txtJ">扫描二维码</div> <div style="margin:15px 0;">'''示例'''</div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.scanQRCode({ success: function (res) { alert("## scanQRCode success: " + JSON.stringify(res)); }, fail: function (res) { alert("## scanQRCode 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 style="margin:15px 0;">'''返回值'''</div> <div class="code_type">Javascript</div> <pre class="brush:js"> { "result": "http://weibo.com" } </pre> <div style="margin:15px 0;">'''错误码'''</div> {|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table" <html><colgroup></colgroup></html> !width="40%"|错误码 !width="60%"|说明描述 |- |USER_CANCELLED |用户取消了扫描。 |- |SERVICE_FORBIDDEN |没有摄像头权限或用户不允许使用摄像头。 |} <div class="wiki_title_withline">wb.pickContact</div> <div class="wiki_txtJ">选择微博好友</div> <div style="margin:15px 0;">'''示例'''</div> <div class="code_type">Javascript</div> <pre class="brush:js"> wb.pickContact({ count: 3, success: function (res) { alert("## pickContact success: " + JSON.stringify(res)); }, fail: function (res) { alert("## pickContact 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%"|说明描述 |- |count |Int |可以选择的人数,例如,传1就是只能选一个人,最大不能超过10。 |- |success |Function |调用成功后的回调函数。 |- |fail |Function |调用失败后的回调函数。 |} <div style="margin:15px 0;">'''返回值'''</div> <div class="code_type">Javascript</div> <pre class="brush:js"> { "contacts": [{ "uid": "1404376560", "screen_name": "zaku", "avatar_url": "https://tva2.sinaimg.cn/53b515f0jw1e8qgp5bmzyj2050050aa8.jpg" }] } </pre> <div style="margin:15px 0;">'''错误码'''</div> {|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table" <html><colgroup></colgroup></html> !width="40%"|错误码 !width="60%"|说明描述 |- |USER_CANCELLED |用户直接取消了选择。 |} ==JS SDK 2020 使用权限签名算法== <div class="wiki_txtJ">生成签名之前必须先了解一下 jsapi_ticket,jsapi_ticket 是网页用于调用微博客户端内JS接口的临时票据。正常情况下,jsapi_ticket 的有效期为7200秒。由于有效期内再次调用该接口会导致 ticket 刷新,旧的直接失效。因此频繁刷新 jsapi_ticket 有可能导致签名校验失败,影响自身业务,因此,建议开发者在自己的服务全局缓存 jsapi_ticket 。</div> <div class="wiki_title_withline">获取 jsapi_ticket 的接口</div> <div style="margin:15px 0;">接口为 POST 请求</div> <div class="code_type">API</div> <pre class="brush:html"> https://api.weibo.com/oauth2/js_ticket/generate?client_id=APPKEY&client_secret=APPSECRET </pre> <div style="margin:15px 0;">'''返回值'''</div> <div class="code_type">JSON</div> <pre class="brush:js"> { "result": true, "appkey": "", "js_ticket": "", "expire_time": 7199 } </pre> <div style="margin:15px 0;">其中,js_ticket 为需要获取的 jsapi_ticket ,expire_time 为过期时间。</div> <div class="wiki_title_withline">签名算法</div> <div style="margin:15px 0;"> 签名生成规则如下:参与签名的字段包括 noncestr,有效的 jsapi_ticket,timestamp,url。对所有待签名参数按照字段名的 ASCII 码从小到大排序(字典序)后,使用 key1=value1&key2=value2… 的格式拼接成字符串。这里需要注意的是所有参数名均为小写字符,之后对字符串进行 sha1 加密,字段名和字段值都采用原始值,其中,url 为当前网页的完整地址,但是不包含 # 及其后面部分,也不要进行 URL 转义。 </div> <div class="code_type">签名字符串</div> <pre class="brush:js"> 签名字符串 = "jsapi_ticket={jsapi_ticket}&noncestr={noncestr}×tamp={timestamp}&url={url}" </pre> <div class="code_type">签名</div> <pre class="brush:js"> 签名 = sha1(签名字符串) </pre> <div style="margin:15px 0;"> 签名用的 noncestr 和 timestamp 必须与 init 中的 noncestr 和 timestamp 相同。签名用的 url 必须是调用JS接口页面的完整地址。出于安全考虑,开发者必须在服务器端实现签名的逻辑。 </div> ==附录一、菜单按钮code== <div class="wiki_txtJ">菜单按钮 code 对照表</div> <div style="margin:15px 0;">'''code'''</div> {|width="100%" border="0" cellspacing="0" cellpadding="0" class="wiki_table" <html><colgroup></colgroup></html> !width="40%"|编码 !width="60%"|说明描述 |- |1001 |分享到微博。 |- |1003 |分享到微博群和私信。 |- |1004 |分享到微信好友。 |- |1005 |分享到微信朋友圈。 |- |1101 |分享到短信。 |- |1012 |分享到支付宝好友。 |- |1010 |分享到QQ。 |- |1011 |分享到QQ空间。 |- |1102 |分享到邮件。 |} {{#a:nobtns|noheading}} __NOTOC__
该页面使用的模板:
模板:Img polaroid
(
查看源代码
)
返回到
Sdk/javascript
。
反馈
分享
顶部