移动端 h5和原生交互的方式_html5和原生app 如何相互调用-优快云博客

本文详细介绍了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 {