微博开放平台
微连接
移动应用
网站接入
电商服务商
电商商家
数据服务
数据服务
合作伙伴
微博支付
轻应用
粉丝服务
文档
推广
我的应用
登录
weibo
开发文档
首页
平台政策与指引
概述
平台公约
新手指南
开发者协议
应用运营管理规范
微连接分级管理办法
应用审核产品指南
应用安全开发注意事项
平台应用设计规范
微服务接入指南
微博登录接入
用微博帐号登录
授权机制
移动应用接入
移动应用介绍
移动应用SSO授权
微博Deep Link
媒体接入平台
头条文章开放接口
视频上传开放接口
电商接入平台
电商服务商接入
电商商家端接入
电商平台能力接口
粉丝服务平台
粉丝服务平台
新手接入指南
微信开发者迁移指南
接收消息
发送消息
自定义菜单
用户管理
生成带参数的二维码
Fans Service Platform
商业接口
商业数据接入指南
订阅服务手册(中文版)
订阅服务手册(英文版)
商业接口-REST API
商业数据常见问题
网站接入
网站接入介绍
微博API
微博API
接口访问频次权限
资源下载
SDK
微博标识下载
常见问题
联系我们
工具箱
链入页面
链出更改
特殊页面
查看源代码
跳转到:
导航
,
搜索
根据下列原因,你没有权限编辑本页:
您刚才请求的操作只有这个用户组中的用户才能使用:
用户
您可以查看并复制此页面的源代码:
=JS SDK 2020= <div class="wiki_txtJ"> JS SDK 2020 是微博开放平台最新的升级版,它较之前版本有较大改变: <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 接口将以此域名来进行校验。 绑定安全域名的操作可以在 我的应用 的 高级信息 页面完成。 </div> {{Img_polaroid|src=http://jssdk.sinaapp.com/img/step/step2.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 class="wiki_title_withline">3、初始化JS SDK 2020</div> <div style="margin:15px 0;"> 通过 wb.init 接口注入权限验证配置,所有需要使用微博客户端内JS SDK 的页面必须先注入配置信息,否则将无法调用。 </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;"> 如果你的应用处于开发调试过程,建议使用JS SDK 2020的调试模式,可以在初始化时,配置 debug 为 true,开启调试模式,此时在调用出错时,出错信息将通过 alert 弹出,方便在移动端调试。 </div> <div class="code_type">JS</div> <pre class="brush:js"> wb.init({ debug: false, ... }); </pre> <div style="margin:15px 0;"> 签名算法见文档后面的说明,JS 接口的说明见后面。 </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 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="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">如果需要在分享的时候,指定一张分享图片,需要先将图片上传到微博图床,然后再开放标签上指定图片的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-topic-timeline data:keyword="王者荣耀" data:height="500"></wb-topic-timeline> </pre> <div class="wiki_txtJ">其中,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 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 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%"|说明描述 |- |success |Function |调用成功后的回调函数。 |- |fail |Function |调用失败后的回调函数。 |} <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 |调用失败后的回调函数。 |} <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 |调用失败后的回调函数。 |} <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> {{#a:nobtns|noheading}} __NOTOC__
该页面使用的模板:
模板:Img polaroid
(
查看源代码
)
返回到
Sdk/javascript
。
反馈
分享
顶部