(未显示1个用户的22个中间版本) | |||
第1行: | 第1行: | ||
− | =JS SDK= | + | =JS SDK 2020= |
<div class="wiki_txtJ"> | <div class="wiki_txtJ"> | ||
− | JS SDK | + | JS SDK 2020 是微博开放平台最新版的、针对移动端网页的SDK,它较之前版本有较大改变: |
<ul class="wiki_indent_list"> | <ul class="wiki_indent_list"> | ||
− | <li clas="wiki_indent_item"> | + | <li clas="wiki_indent_item">1、聚焦移动端H5场景,去除了原来PC时代的旧组件;</li> |
− | <li clas="wiki_indent_item"> | + | <li clas="wiki_indent_item">2、分享、关注功能,适配多场景,无论是在微博、微信、手机浏览器,还是PC上,都可以方便使用;</li> |
− | <li clas="wiki_indent_item"> | + | <li clas="wiki_indent_item">3、采用开放标签,样式完全由开发者自己控制;</li> |
− | <li clas="wiki_indent_item"> | + | <li clas="wiki_indent_item">4、更加安全,因此去除了原来的JS前端直接授权、直接调接口的功能,防止数据外泄,因此页面授权功能需要开发者按照标准授权流程接入,调用开放接口则需要放在服务端完成;</li> |
− | + | ||
</ul> | </ul> | ||
− | + | ||
+ | 下面我们来一起体验一下这些特性。 | ||
+ | |||
+ | |||
+ | <div style="width:230px;margin:30px auto 0;"> | ||
+ | {{Img_polaroid|src=https://wx2.sinaimg.cn/large/53b515f0ly1glxt9dys97j208c08c3yd.jpg}} | ||
+ | </div> | ||
</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> | </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> | ||
− | <pre> | + | <div class="code_type">Javascript</div> |
− | + | <pre class="brush:js"> | |
− | + | wb.error(function (res) { | |
+ | alert("## init error: " + res); | ||
}); | }); | ||
</pre> | </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> | |
− | <pre> | + | <div style="margin:15px 0;">'''示例'''</div> |
− | + | ||
+ | <div class="code_type">HTML</div> | ||
+ | <pre class="brush:html"> | ||
+ | <wb-share-button>分享到微博</wb-share-button> | ||
</pre> | </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;">如果需要在分享的时候,指定一张分享图片,可以通过 data:pic 属性标签指定图片的地址,例如。</div> | |
− | + | <div class="code_type">HTML</div> | |
+ | <pre class="brush:html"> | ||
+ | <wb-share-button data:pic="https://wx2.sinaimg.cn/large/53b515f0ly1glgemvpjwfj20gi0aw114.jpg">分享到微博</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> | </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 style="margin:15px 0;">当你的页面在微博客户端内打开并进行关注时,可以通过微博客户端JS 接口,获取到关注结果的回调事件,具体请参见下面的 微博客户端JS 接口 - 监听关注回调事件。</div> | |
− | |||
− | |||
− | + | ==微博客户端内JS 接口说明== | |
− | + | <div class="wiki_txtJ">微博客户端JS 接口。</div> | |
− | |||
− | + | <div class="wiki_title_withline">wb.followCallBack</div> | |
− | < | + | <div class="wiki_txtJ">监听关注回调事件。</div> |
− | + | ||
− | + | <div style="margin:15px 0;">'''示例'''</div> | |
− | + | ||
− | + | <div class="code_type">Javascript</div> | |
− | alert( | + | <pre class="brush:js"> |
− | + | wb.followCallBack({ | |
− | + | complete: function (res) { | |
− | + | alert("## followCallBack event: " + JSON.stringify(res)); | |
− | } | + | } |
− | + | ||
− | + | ||
}); | }); | ||
</pre> | </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%"|说明描述 | ||
+ | |- | ||
+ | |complete | ||
+ | |Function | ||
+ | |当用户进行关注操作时,接收关注结果事件的回调函数。 | ||
+ | |} | ||
+ | <div style="margin:15px 0;">'''返回值'''</div> | ||
− | ''' | + | <div style="margin:15px 0;">'''用户取消操作,没有完成关注'''</div> |
− | + | <div class="code_type">Javascript</div> | |
+ | <pre class="brush:js"> | ||
+ | { | ||
+ | "result": false, | ||
+ | "message": "USER_CANCELLED" | ||
+ | } | ||
+ | </pre> | ||
+ | <div style="margin:15px 0;">'''用户完成了关注,同时返回该用户的UID'''</div> | ||
− | + | <div class="code_type">Javascript</div> | |
+ | <pre class="brush:js"> | ||
+ | { | ||
+ | "result": true, | ||
+ | "uid": "10568" | ||
+ | } | ||
+ | </pre> | ||
− | + | <div style="margin:15px 0;">'''用户已经关注过'''</div> | |
− | + | <div class="code_type">Javascript</div> | |
+ | <pre class="brush:js"> | ||
+ | { | ||
+ | "result": false, | ||
+ | "message": "IS_FOLLOWING" | ||
+ | } | ||
+ | </pre> | ||
− | + | <div style="margin:15px 0;">该关注回调事件,只能监听通过关注开放标签进行关注这一场景,其他场景的关注事件不会在此返回回调事件。</div> | |
− | + | <div style="margin:15px 0;">如果采用的是简易初始化模式,则不能使用微博客户端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> | </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> | </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"> | |
− | <pre> | + | { |
− | + | "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> | + | |
+ | |||
+ | <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> | </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> | </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> | </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 | ||
+ | |分享到邮件。 | ||
+ | |} | ||
2022年8月8日 (一) 13:49的版本
JS SDK 2020
JS SDK 2020 是微博开放平台最新版的、针对移动端网页的SDK,它较之前版本有较大改变:
- 1、聚焦移动端H5场景,去除了原来PC时代的旧组件;
- 2、分享、关注功能,适配多场景,无论是在微博、微信、手机浏览器,还是PC上,都可以方便使用;
- 3、采用开放标签,样式完全由开发者自己控制;
- 4、更加安全,因此去除了原来的JS前端直接授权、直接调接口的功能,防止数据外泄,因此页面授权功能需要开发者按照标准授权流程接入,调用开放接口则需要放在服务端完成;
下面我们来一起体验一下这些特性。
开发指南
如果你没有AppKey请先在开放平台网站,注册自己的应用,申请入口。
在使用JS SDK 2020时,需要为该应用绑定安全域名,其中微博客户端JS 接口将以此域名来进行校验,如果你不打算使用微博客户端JS 接口可以跳过此步骤。
绑定安全域名的操作可以在 我的应用 的 高级信息 页面完成。
在你的页面部署 wbsdk.js 文件,同时,如果你的页面编码不是UTF-8,请添加charset="utf-8"属性。
<script src="https://open.weibo.com/views/js/wbsdk.js" type="text/javascript" charset="utf-8"></script>
支持使用 AMD/CMD 标准模块加载方法加载。
通过 wb.init 接口注入权限验证配置,所有需要使用微博客户端内JS SDK 的页面必须先注入配置信息,否则将无法调用。如果你不打算使用微博客户端JS 接口可以采用简易初始化方法。
完全初始化,使用微博客户端JS 接口与开放标签时,需要完全初始化:
wb.init({ debug: false, appkey: '', timestamp: , noncestr: '', signature: '', scope: [ 'getNetworkType', 'setBrowserTitle', 'setSharingContent', 'openMenu', 'scanQRCode', 'pickContact' ] });
其中,配置参数,debug:开启调试模式,appkey:应用唯一标识,timestamp:生成签名的时间戳,noncestr:生成签名的随机串,signature:签名,scope:需要使用的JS接口列表。
简易初始化,不使用微博客户端JS 接口,只使用开放标签时,可以简化初始方法,减少开发难度:
wb.init({ appkey: '' });
如果你的应用处于开发调试过程,建议使用JS SDK 2020的调试模式,可以在初始化时,配置 debug 为 true,开启调试模式,此时在调用出错时,出错信息将通过 alert 弹出,方便在移动端调试。
wb.init({ debug: true, ... });
签名算法见文档后面的说明,JS 接口的说明见后面。
init 初始化后会执行 ready 方法,所有JS 接口调用都必须在 ready 接口获得结果之后。如果你没有使用微博客户端JS 接口可以跳过此步骤。
wb.ready(function () { alert("## init success"); });
init 是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在 ready 函数中。
初始化失败的处理。如果你没有使用微博客户端JS 接口可以跳过此步骤。
wb.error(function (res) { alert("## init error: " + res); });
init 初始化失败会执行 error 函数,如签名过期导致验证失败,错误信息可以在返回的 res 参数中查看,可以在这里更新签名,重新尝试初始化。
开放标签
<wb-share-button>分享到微博</wb-share-button>
<wb-share-button><div class="myStyle">分享到微博</div></wb-share-button>
<wb-share-button data:title="title" data:url="url">分享到微博</wb-share-button>
<wb-share-button data:pic="https://wx2.sinaimg.cn/large/53b515f0ly1glgemvpjwfj20gi0aw114.jpg">分享到微博</wb-share-button>
<wb-follow-account data:uid="1904178193">在微博上关注我</wb-follow-account>
<wb-follow-account data:uid="1904178193"><div class="myStyle">在微博上关注我</div></wb-follow-account>
微博客户端内JS 接口说明
wb.followCallBack({ complete: function (res) { alert("## followCallBack event: " + JSON.stringify(res)); } });
参数名称 | 类型 | 说明描述 |
---|---|---|
complete | Function | 当用户进行关注操作时,接收关注结果事件的回调函数。 |
{ "result": false, "message": "USER_CANCELLED" }
{ "result": true, "uid": "10568" }
{ "result": false, "message": "IS_FOLLOWING" }
wb.getNetworkType({ success: function (res) { alert("## getNetworkType success: " + JSON.stringify(res)); }, fail: function (res) { alert("## getNetworkType fail: " + JSON.stringify(res)); } });
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
{ "network_type": "wifi" }
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 | 调用失败后的回调函数。 |
错误码 | 说明描述 |
---|---|
MISSING_PARAMS | 缺少title参数。 |
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)); } });
参数名称 | 类型 | 说明描述 |
---|---|---|
icon | String | 分享到微信的卡片图标的图片地址。 |
title | String | 分享到微信的卡片标题。 |
desc | String | 分享到微信的卡片描述。 |
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
wb.openMenu({ success: function (res) { alert("## openMenu success: " + JSON.stringify(res)); }, fail: function (res) { alert("## openMenu fail: " + JSON.stringify(res)); } });
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
{ "selected_code": "1005", "selected_title": "朋友圈" }
错误码 | 说明描述 |
---|---|
USER_CANCELLED | 用户直接关闭了菜单。 |
wb.shareToWxTimeline({ success: function (res) { alert("## shareToWxTimeline success: " + JSON.stringify(res)); }, fail: function (res) { alert("## shareToWxTimeline fail: " + JSON.stringify(res)); } });
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
wb.shareToWxMessage({ success: function (res) { alert("## shareToWxMessage success: " + JSON.stringify(res)); }, fail: function (res) { alert("## shareToWxMessage fail: " + JSON.stringify(res)); } });
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
wb.scanQRCode({ success: function (res) { alert("## scanQRCode success: " + JSON.stringify(res)); }, fail: function (res) { alert("## scanQRCode fail: " + JSON.stringify(res)); } });
参数名称 | 类型 | 说明描述 |
---|---|---|
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
{ "result": "http://weibo.com" }
错误码 | 说明描述 |
---|---|
USER_CANCELLED | 用户取消了扫描。 |
SERVICE_FORBIDDEN | 没有摄像头权限或用户不允许使用摄像头。 |
wb.pickContact({ count: 3, success: function (res) { alert("## pickContact success: " + JSON.stringify(res)); }, fail: function (res) { alert("## pickContact fail: " + JSON.stringify(res)); } });
参数名称 | 类型 | 说明描述 |
---|---|---|
count | Int | 可以选择的人数,例如,传1就是只能选一个人,最大不能超过10。 |
success | Function | 调用成功后的回调函数。 |
fail | Function | 调用失败后的回调函数。 |
{ "contacts": [{ "uid": "1404376560", "screen_name": "zaku", "avatar_url": "https://tva2.sinaimg.cn/53b515f0jw1e8qgp5bmzyj2050050aa8.jpg" }] }
错误码 | 说明描述 |
---|---|
USER_CANCELLED | 用户直接取消了选择。 |
JS SDK 2020 使用权限签名算法
https://api.weibo.com/oauth2/js_ticket/generate?client_id=APPKEY&client_secret=APPSECRET
{ "result": true, "appkey": "", "js_ticket": "", "expire_time": 7199 }
签名生成规则如下:参与签名的字段包括 noncestr,有效的 jsapi_ticket,timestamp,url。对所有待签名参数按照字段名的 ASCII 码从小到大排序(字典序)后,使用 key1=value1&key2=value2… 的格式拼接成字符串。这里需要注意的是所有参数名均为小写字符,之后对字符串进行 sha1 加密,字段名和字段值都采用原始值,其中,url 为当前网页的完整地址,但是不包含 # 及其后面部分,也不要进行 URL 转义。
签名字符串 = "jsapi_ticket={jsapi_ticket}&noncestr={noncestr}×tamp={timestamp}&url={url}"
签名 = sha1(签名字符串)
签名用的 noncestr 和 timestamp 必须与 init 中的 noncestr 和 timestamp 相同。签名用的 url 必须是调用JS接口页面的完整地址。出于安全考虑,开发者必须在服务器端实现签名的逻辑。
附录一、菜单按钮code
编码 | 说明描述 |
---|---|
1001 | 分享到微博。 |
1003 | 分享到微博群和私信。 |
1004 | 分享到微信好友。 |
1005 | 分享到微信朋友圈。 |
1101 | 分享到短信。 |
1012 | 分享到支付宝好友。 |
1010 | 分享到QQ。 |
1011 | 分享到QQ空间。 |
1102 | 分享到邮件。 |