移动端 h5和原生交互的方式

本文详细介绍了H5与原生WebView的交互方式,包括数据协议、调用方法以及Android端的处理。内容涉及H5传递数据给原生应用、原生应用回传数据给H5的JSON格式协议,以及Android端的处理和Vue应用中的交互实现。主要使用了JavaScript和WebView的交互,如window.nativeCaller.postMessage方法,并讨论了不同传值方法的安全性和简便性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、h5传递给原生WebView的数据协议

传递的是个json字符串:

{
    "id": "random_value",
    "action": "action_name",
    "callback": "function_name",  // optional
    "data": {...}  // optional
}

id:这次操作的id,回调时会再传回来。因为交互有可能是异步的,对同一个接口调用多次时,回调时以id来区分是哪一次。id由js自己定义保证唯一即可,简单的做法是使用Math.random()
action:操作名称,取名应该能反映其意义,例如getIp(获取ip地址)
callback:可选,操作完成后的js回调函数名。不用回调就不传此参数
data:可选,某些操作才需要。app会解析data中的数据使用。

例如:h5调用原生的网络请求可以这么定义

{
     "id":100,
     "action":"doRequest",
     "callback","onResponse"
     "data":{
         "method":"get",
         "url":"",
         "body":""
         "header":""
         "type":"noCache"
     }
}


二、原生WebView传递给h5的数据协议

原生WebView传给h5的也是个json字符串:

{
    "id": "random_value"
    "action": "action_name",
    "platform": "android"
    "data": {...}  
}


id:与传给WebView的一致。
action:与传给WebView的一致。如果各种操作都用同一个回调函数,则可以此区分是哪个操作。
platform:平台
data:操作结果对应的数据,是原生提供给h5的具体数据


三、h5通过js的调用方式

注入的对象在android是全局变量,也即是window的成员变量,android这边会提供一个统一的调用方法入口,叫postMessage,注入的对象名叫nativeCaller,调用方式如下:

function callNative(object) {
  if (window.nativeCaller) {
    window.nativeCaller.postMessage(JSON.stringify(object))
  } else {
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值