微博开放平台
微连接
移动应用
网站接入
电商服务商
电商商家
数据服务
数据服务
合作伙伴
微博支付
轻应用
粉丝服务
文档
推广
我的应用
登录
weibo
开发文档
首页
平台政策与指引
概述
平台公约
新手指南
开发者协议
应用运营管理规范
微连接分级管理办法
应用审核产品指南
应用安全开发注意事项
平台应用设计规范
微服务接入指南
微博登录接入
用微博帐号登录
授权机制
移动应用接入
移动应用介绍
移动应用SSO授权
微博Deep Link
媒体接入平台
头条文章开放接口
视频上传开放接口
电商接入平台
电商服务商接入
电商商家端接入
电商平台能力接口
粉丝服务平台
粉丝服务平台
新手接入指南
微信开发者迁移指南
接收消息
发送消息
自定义菜单
用户管理
生成带参数的二维码
Fans Service Platform
商业接口
商业数据接入指南
订阅服务手册(中文版)
订阅服务手册(英文版)
商业接口-REST API
商业数据常见问题
网站接入
网站接入介绍
微博API
微博API
接口访问频次权限
资源下载
SDK
微博标识下载
常见问题
联系我们
工具箱
链入页面
链出更改
特殊页面
查看源代码
跳转到:
导航
,
搜索
根据下列原因,你没有权限编辑本页:
您刚才请求的操作只有这个用户组中的用户才能使用:
用户
您可以查看并复制此页面的源代码:
=H5 版轻应用组件调用= '''H5 版轻应用组件'''指的是轻应用移动版(内嵌在微博客户端中)为接入方应用提供的、唤起微博原生功能的 JavaScript 功能包。 让轻应用能实现诸如获取当前网络状态、获取定位信息、唤起客户端二维码扫描、查看大图等功能,同时也提供了一些组件供接入方调用,如共享地址簿组件。 ==使用条件== 微博 Android 与 iPhone 官方客户端 5.3.0 以上版本的内置浏览器。 ==引入 JS 文件== 使用 H5 版 JS API,需要首先引入一个 JS 文件。 <pre class="brush:html"> <script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/jsapi/mobile.js" charset="utf-8"></script> </pre> 该 JS 文件会使用全局命名空间 WeiboJS,提供了三个 JS 方法: * • WeiboJS.init() 用途:调用 Bridge 前进行初始化 * • WeiboJS.invoke() 用途:调用 Bridge 的 Action 或组件 * • WeiboJS.on() 用途:监听 Bridge 的事件 下面,一一进行说明: ==WeiboJS.init()== 通过 `window.WeiboJS` 的 `init` 方法进行初始化。 - 参数列表: * `appkey`: 必填,轻应用的 appkey * `debug`: 可选,调试开关 * `timestamp`: 必填,签名使用的时间戳 * `noncestr`: 必填,签名使用的随机字符串 * `signature`: 必填,计算出的签名 * `scope`: 必填,轻应用需要调用的 API 列表,是一个字符串数组 * `callback`: 必填,初始化成功或失败后的回调函数,WeiboJS.invoke() 或者 WeiboJS.on() 都需要等这里回调成功后,才执行 例如: <pre class="brush:js"> window.WeiboJS.init({ 'appkey' : '1851269287', 'debug': true, 'timestamp': 1429258653, 'noncestr': '8505b6ef40', 'signature': 'be7081890979fd5fe46234f48d68f64828ff11d7', 'scope': [ 'getNetworkType', 'networkTypeChanged', 'getBrowserInfo', 'checkAvailability', 'setBrowserTitle', 'openMenu', 'setMenuItems', 'menuItemSelected', 'setSharingContent', 'openImage', 'scanQRCode', 'pickImage', 'getLocation', 'pickContact', 'apiFromTheFuture' ] }, function(ret){ console.log('init done\n' + JSON.stringify(ret)); }); </pre> ==WeiboJS.invoke()== 通过 `window.WeiboJS` 的 `invoke` 方法来调用 bridge 的 action。 例如: <pre class="brush:js"> WeiboJS.invoke("getNetworkType", {"param" : "value"}, function (params, success, code) { if (success) { document.write('网络状态是' + params.network_type); } else { if (code == WeiboJS.STATUS_CODE.NO_RESULT) { // do something. } } }); </pre> 第一个参数为要调用的 action,第二个为 参数列表,第三个为回调函数。 ===Action 列表=== ====openImage 查看大图==== - 参数列表: * `url`: 当前选中的图片src; * `urls`: 当前页面中的所有图片src,用于支持横滑查看 - 返回值:无 - 错误码: * `MISSING_PARAMS`: `url` 与 `urls` 至少需要传递一个 ====getNetworkType 获取网络状态==== - 参数列表:无 - 返回值:`{"network_type": "wwan"}`,`wwan` 代表 2G 或 3G, `wifi` 代表 WIFI, `fail` 代表无网络 ====scanQRCode 扫描二维码==== - 参数列表:无 - 返回值:`{"result": "http://weibo.com"}` - 错误码: * `USER_CANCELLED`: 用户取消了扫描 * `SERVICE_FORBIDDEN`: 设备没有摄像头或用户不允许使用摄像头 ====pickImage 获取照片==== - 参数列表: * `source`: `camera` 为拍照,其他为从相册选择 - 返回值:`{"base64": "9sa1..."}` - 错误码: * `USER_CANCELLED`: 用户取消了选图 * `SERVICE_FORBIDDEN`: 设备没有摄像头或用户不允许选图 ====getLocation 定位==== - 参数列表:无 - 返回值:`{"lat": 100, "long": 100}` - 错误码: * `SERVICE_FORBIDDEN`: 定位服务不可用 * `NO_RESULT`: 获取位置失败 ====queryPreloadCache 获取预加载内容==== - 使用条件: * 仅 weibo.com、weibo.cn 及其子域名可以调用 - 参数列表: * `cid`: 内容的id,必需 - 返回值:`{"result": "{'key': 'value'}"}`,result为内容预加载接口返回值 - 错误码: * `MISSING_PARAMS`: 未传递 `cid` 参数 * `NO_RESULT`: 指定缓存不存在 * `INTERNAL_ERROR`: 缓存读取失败 * `ILLEGAL_ACCESS`: 调用域名无权限访问 ====deletePreloadCache 删除预加载缓存==== - 使用条件: * 仅 weibo.com、weibo.cn 及其子域名可以调用 - 参数列表: * `cid`: 内容的id,必需 - 返回值:无 - 错误码: * `MISSING_PARAMS`: 未传递 `cid` 参数 * `INTERNAL_ERROR`: 文件删除失败(不包括缓存不存在) * `ILLEGAL_ACCESS`: 调用域名无权限访问 ====setBrowserTitle 设置顶导标题==== - 参数列表: * `title`: 新标题,必需 - 返回值:无 - 备注:通过此方法设置的标题优先级最高 - 错误码: * `MISSING_PARAMS`: 未传递 `title` 参数 ====login 唤起登录功能==== - 参数列表: * `redirect_uri`: 登录后回调的地址,必需。并且该 URL 必须是 http://apps.weibo.com 开头,不接受任何其他域名的 URL - 返回值:无 <pre class="brush:js"> WeiboJS.invoke("login", { "redirect_uri" : encodeURIComponent("http://apps.weibo.com/test/1406758883/2I8KtA/demo/game/yangtuo") }, function (params, success, code) {}); </pre> '''组件的使用在下文说明''' ===Status Code 列表=== 状态码会在 action 的回调中提供 <pre class="brush:html"> OK: 操作成功 MISSING_PARAMS: 缺少必须的参数 ILLEGAL_ACCESS: 非法调用 INTERNAL_ERROR: 客户端内部处理错误 ACTION_NOT_FOUND: 客户端未实现此 action NO_RESULT: 客户端没有获取到结果 USER_CANCELLED: 用户取消了操作 SERVICE_FORBIDDEN: 相关服务未启用或被禁止 (如定位服务,相册权限) </pre> 网页通过比对回调的code值和以上值进行处理 <pre class="brush:js"> if (code == WeiboJS.STATUS_CODE.NO_RESULT) { // 客户端没有获取到结果 } </pre> ==WeiboJS.on()== 有时 native 会给网页发送一些事件通知,网页可以选择性接收。 <pre class="brush:js"> WeiboJS.on('networkTypeChanged', function(params){ document.write('网络状态已变为:' + params.network_type); }); </pre> ===Event 列表=== ====networkTypeChanged 网络状态改变==== - 使用条件: * 目前仅iPhone支持 - 返回结果: * `network_type`: 改变后的状态,`wwan` 或 `wifi` 或 `fail` ====orientationChange屏幕旋转事件==== - 使用条件:无 - 返回结果: * `orientation`: 屏幕方向的状态,即 window.orientation 的取值 ==共享地址簿组件== 共享地址簿组件用于接入方获得当前微博用户在微博的收货地址。目前处于内部体验阶段,不向所有接入方开放。 组件有两种形态: PC 版: {{center|http://liming.sinaapp.com/weibo/address_web.png}} H5 版: {{center|http://liming.sinaapp.com/weibo/address.png}} 第一步、使用共享地址簿组件,需要申请,请将 appkey 发送给 chenlei6@staff.weibo.com 申请该组件的使用权限。 第二步、代码开发。共享地址簿组件提供了两个 Action 供调用: PC 版调用方法:(也可以[[#deliverAddress:default_.E3.80.90.E5.85.B1.E4.BA.AB.E5.9C.B0.E5.9D.80.E7.B0.BF.E7.BB.84.E4.BB.B6_PC_.E7.89.88.E3.80.91.E8.8E.B7.E5.BE.97.E5.BD.93.E5.89.8D.E7.99.BB.E5.BD.95.E7.94.A8.E6.88.B7.E7.9A.84.E9.BB.98.E8.AE.A4.E6.94.B6.E8.B4.A7.E5.9C.B0.E5.9D.80|点击这里]]) 1、获取默认收货地址 App.trigger('deliverAddress:default', function(addr){ /* 回调函数 */ }); 2、选择其他的收货地址(可以增加、删除、修改地址) App.trigger('deliverAddress:change', function(addr){ /* 回调函数 */ }); 完整 Web 版调用范例: <pre class="brush:html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>共享地址簿组件 Web 版</title> </head> <body> <div id="address">收货地址读取中……</div> <script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/frame/appclient.js" charset="utf-8"></script> <script> function $(o){ return document.getElementById(o); } // 显示地址组件返回的地址 function showAddress(addr){ var address = $("address"); if(addr == null){ address.innerHTML = "没有默认收货地址"; } else { address.innerHTML = addr.name + " " + addr.mobile + " " + addr.address; } } // 获取当前登录用户的默认收货地址 App.trigger('deliverAddress:default', showAddress); // 给地址区域绑定点击事件,点击该区域,唤起地址组件选择界面 $('address').onclick = function(){ App.trigger('deliverAddress:change', showAddress); }; </script> </body> </html> </pre> H5 版调用方法: 1、获取默认收货地址 WeiboJS.invoke("deliverAddress:default", {}, function(addr){ /* 回调函数 */ }); 2、选择其他的收货地址(可以增加、删除、修改地址) WeiboJS.invoke("deliverAddress:change", {}, function(addr){ /* 回调函数 */ }); 完整 H5 版调用范例: <pre class="brush:html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>共享地址簿组件 H5 版</title> </head> <body> <div id="address">收货地址读取中……</div> <script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/pageapp/mobile/jsapi.js" charset="utf-8"></script> <script> function $(o){ return document.getElementById(o); } // 显示地址组件返回的地址 function showAddress(addr){ var address = $("address"); if(addr == null){ address.innerHTML = "没有默认收货地址"; } else { address.innerHTML = addr.name + " " + addr.mobile + " " + addr.address; } } // 获取当前登录用户的默认收货地址 WeiboJS.invoke("deliverAddress:default", {}, showAddress); // 给地址区域绑定点击事件,点击该区域,唤起地址组件选择界面 $('address').onclick = function(){ WeiboJS.invoke("deliverAddress:change", {}, showAddress); }; </script> </body> </html> </pre> ==轻应用 H5 底导== 轻应用在微博客户端内现在都是在对象正文页的内置浏览器展示(底部有转评赞按钮),它是有一定缺陷的,如: * 不支持内页分享。比如你的应用内有一个对象,点击对象内的链接,iframe 内部跳转到一个非对象的 URL,这时候你点转发,仍然分享的是刚开始进来的对象的信息。 * 不支持定制分享文案。点转发唤起的发布器,文案是固定的,你无法修改。 * 可定制性差 目前,轻应用提供了一款 H5 底导组件,该组件用 HTML+JavaScript 实现,和现在的对象正文页底导 UI 几乎雷同,但能够支持内页分享,并且文案可以随心所欲的定制。目前处于内部体验阶段,不向所有接入方开放。 {{center|http://liming.sinaapp.com/weibo/h5nav.jpg}} 接入方式: 第一步、使用轻应用 H5 底导,需要申请,请将 appkey 发送给 chenlei6@staff.weibo.com 申请该组件的使用权限。 第二步、在需要支持内页分享的页面内,引入轻应用组件移动版的 JS。 <pre class="brush:html"> <script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/pageapp/mobile/jsapi.js" charset="utf-8"></script> </pre> 这时候,你就能直接看到组件了。 第三步、修改默认分享文案。 <pre class="brush:html"> WeiboJS.invoke('bottomNavigation:info', { "title" : "我的分享文案,爱怎么写就怎么写,哈哈" }, function(){}); </pre> 完整范例: <pre class="brush:html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轻应用 H5 底导</title> </head> <body> <script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/pageapp/mobile/jsapi.js" charset="utf-8"></script> <script> WeiboJS.invoke('bottomNavigation:info', { "title" : "我的分享文案,爱怎么写就怎么写,哈哈" }, function(){}); </script> </body> </html> </pre> ==轻应用 H5 组件Demo== 请使用微博客户端扫描下方二维码查看演示Demo: http://ww2.sinaimg.cn/mw690/8aafa3b9jw1eq42k689zxj20430433ym.jpg Demo中涉及到的接口详情详见以下文档: 微博支付应用接入指南:http://open.weibo.com/wiki/微博支付应用接入指南 微博API接口文档:http://open.weibo.com/wiki/%E5%BE%AE%E5%8D%9AAPI
该页面使用的模板:
模板:Icon new2
(
查看源代码
)
模板:Img polaroid
(
查看源代码
)
模板:Tip doc trash
(
查看源代码
)
返回到
轻应用H5新版JS
。
反馈
分享
顶部