轻应用H5新版JS
第204行: | 第204行: | ||
}, function (params, success, code) {}); | }, function (params, success, code) {}); | ||
</pre> | </pre> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
'''组件的使用在下文说明''' | '''组件的使用在下文说明''' |
2015年4月17日 (五) 16:29的版本
目录 |
H5 版轻应用组件调用
H5 版轻应用组件指的是轻应用移动版(内嵌在微博客户端中)为接入方应用提供的、唤起微博原生功能的 JavaScript 功能包。
让轻应用能实现诸如获取当前网络状态、获取定位信息、唤起客户端二维码扫描、查看大图等功能,同时也提供了一些组件供接入方调用,如共享地址簿组件。
使用条件
微博 Android 与 iPhone 官方客户端 5.3.0 以上版本的内置浏览器。
引入 JS 文件
使用 H5 版 JS API,需要首先引入一个 JS 文件。
<script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/jsapi/mobile.js" charset="utf-8"></script>
该 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() 都需要等这里回调成功后,才执行
例如:
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)); });
WeiboJS.invoke()
通过 `window.WeiboJS` 的 `invoke` 方法来调用 bridge 的 action。
例如:
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. } } });
第一个参数为要调用的 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
- 返回值:无
WeiboJS.invoke("login", { "redirect_uri" : encodeURIComponent("http://apps.weibo.com/test/1406758883/2I8KtA/demo/game/yangtuo") }, function (params, success, code) {});
组件的使用在下文说明
Status Code 列表
状态码会在 action 的回调中提供
OK: 操作成功 MISSING_PARAMS: 缺少必须的参数 ILLEGAL_ACCESS: 非法调用 INTERNAL_ERROR: 客户端内部处理错误 ACTION_NOT_FOUND: 客户端未实现此 action NO_RESULT: 客户端没有获取到结果 USER_CANCELLED: 用户取消了操作 SERVICE_FORBIDDEN: 相关服务未启用或被禁止 (如定位服务,相册权限)
网页通过比对回调的code值和以上值进行处理
if (code == WeiboJS.STATUS_CODE.NO_RESULT) { // 客户端没有获取到结果 }
WeiboJS.on()
有时 native 会给网页发送一些事件通知,网页可以选择性接收。
WeiboJS.on('networkTypeChanged', function(params){ document.write('网络状态已变为:' + params.network_type); });
Event 列表
networkTypeChanged 网络状态改变
- 使用条件:
- 目前仅iPhone支持
- 返回结果:
- `network_type`: 改变后的状态,`wwan` 或 `wifi` 或 `fail`
orientationChange屏幕旋转事件
- 使用条件:无
- 返回结果:
- `orientation`: 屏幕方向的状态,即 window.orientation 的取值
共享地址簿组件
共享地址簿组件用于接入方获得当前微博用户在微博的收货地址。目前处于内部体验阶段,不向所有接入方开放。
组件有两种形态:
PC 版:
H5 版:
第一步、使用共享地址簿组件,需要申请,请将 appkey 发送给 chenlei6@staff.weibo.com 申请该组件的使用权限。
第二步、代码开发。共享地址簿组件提供了两个 Action 供调用:
PC 版调用方法:(也可以点击这里)
1、获取默认收货地址
App.trigger('deliverAddress:default', function(addr){ /* 回调函数 */ });
2、选择其他的收货地址(可以增加、删除、修改地址)
App.trigger('deliverAddress:change', function(addr){ /* 回调函数 */ });
完整 Web 版调用范例:
<!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>
H5 版调用方法:
1、获取默认收货地址
WeiboJS.invoke("deliverAddress:default", {}, function(addr){ /* 回调函数 */ });
2、选择其他的收货地址(可以增加、删除、修改地址)
WeiboJS.invoke("deliverAddress:change", {}, function(addr){ /* 回调函数 */ });
完整 H5 版调用范例:
<!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>
轻应用 H5 底导
轻应用在微博客户端内现在都是在对象正文页的内置浏览器展示(底部有转评赞按钮),它是有一定缺陷的,如:
- 不支持内页分享。比如你的应用内有一个对象,点击对象内的链接,iframe 内部跳转到一个非对象的 URL,这时候你点转发,仍然分享的是刚开始进来的对象的信息。
- 不支持定制分享文案。点转发唤起的发布器,文案是固定的,你无法修改。
- 可定制性差
目前,轻应用提供了一款 H5 底导组件,该组件用 HTML+JavaScript 实现,和现在的对象正文页底导 UI 几乎雷同,但能够支持内页分享,并且文案可以随心所欲的定制。目前处于内部体验阶段,不向所有接入方开放。
接入方式:
第一步、使用轻应用 H5 底导,需要申请,请将 appkey 发送给 chenlei6@staff.weibo.com 申请该组件的使用权限。
第二步、在需要支持内页分享的页面内,引入轻应用组件移动版的 JS。
<script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/pageapp/mobile/jsapi.js" charset="utf-8"></script>
这时候,你就能直接看到组件了。
第三步、修改默认分享文案。
WeiboJS.invoke('bottomNavigation:info', { "title" : "我的分享文案,爱怎么写就怎么写,哈哈" }, function(){});
完整范例:
<!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>
轻应用 H5 组件Demo
请使用微博客户端扫描下方二维码查看演示Demo:
Demo中涉及到的接口详情详见以下文档:
微博支付应用接入指南:http://open.weibo.com/wiki/微博支付应用接入指南