h5与native交互方法说明
已实现的基本交互(未来可用后面的替代)
●设置顶部导航标题
setNativeTitle(string)
●设置地址
setFullAddress(json)
H5调用native方法:
http:///gasq/uploadimg?
统一方法名 callNativeHandler
根据传的jsonData数据区分不同的原生方法
●iOS
window.webkit.messageHandlers.callNativeHandler.postMessage(JSON);
●Android
window.JSBridge.callNativeHandler(JSON)
JSON 数据格式:
{"handlerName":"uploadImage","data":null,"callbackId":"callback_1_1497518893399”}
- handlerName: h5调用原生的方法名,此例中是调用原生”uploadImage”的功能
- data: h5传给原生的参数,没有传null
- callbackId: 回调函数id, 没有回调则不传
具体方法名称约定:
方法名 | 作用描述 | 回调数据 |
uploadImage | 上传单张图片: 调用原生图库/拍照, | String 图片url |
scanCode | 扫码:启动原生摄像头扫码(快递单) | String 具体编码 |
Native调用h5方法
统一方法JSBridge.handleMessageFromNative(JSON)
作为h5调用原生后的回调使用
在js调用原生方法callNativeHandler后,原生处理完数据,回调js时使用 JSBridge.handleMessageFromNative(JSON)
JSBridge.handleMessageFromNative({"responseId": "callback_1_1497518893399", "responseData": “url...”})
JSON数据格式:
{"responseId": "callback_1_1497518893399", "responseData": "123abcdef”}
- responseId: 回调函数id,需要跟h5调用原生方法callNativeHandler时传的callbackId一致
- responseData: 回调数据,原生处理后需要返给h5的数据,嵌套数据转JSON
作为直接调用h5方法使用
原生直接调用h5暴露的方法
JSBridge.handleMessageFromNative({"handlerName": "setData", "data": "1234abcd”})
JSON数据格式:
{"handlerName": "setData", "data": "1234abcd”}
- handlerName: h5在暴露给原生来调用的方法名
- data: 原生传输给h5的数据 JSON格式
具体方法名称约定:
方法名 | 作用描述 |
setData | 客户端给h5页面传输数据,数据格式为JSON,一般是进入h5页面后传输header相关数据(token, 各种id等等) |
@韩培