Hybrid相关

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”}
  1. handlerName: h5调用原生的方法名,此例中是调用原生”uploadImage”的功能
  2. data: h5传给原生的参数,没有传null
  3. 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”}
 
  1. responseId: 回调函数id,需要跟h5调用原生方法callNativeHandler时传的callbackId一致
  2. responseData: 回调数据,原生处理后需要返给h5的数据,嵌套数据转JSON

作为直接调用h5方法使用

原生直接调用h5暴露的方法
 
JSBridge.handleMessageFromNative({"handlerName": "setData", "data": "1234abcd”})
 
JSON数据格式:
{"handlerName": "setData", "data": "1234abcd”}
 
  1. handlerName: h5在暴露给原生来调用的方法名
  2. data: 原生传输给h5的数据 JSON格式

具体方法名称约定:

方法名 作用描述
setData 客户端给h5页面传输数据,数据格式为JSON,一般是进入h5页面后传输header相关数据(token, 各种id等等)

@韩培

原文地址:https://www.cnblogs.com/fangfeiyue/p/7457872.html