h5和app原生通信的方法，什么是jsBridge，jsBridge 原理和步骤

本文主要是介绍h5和app原生通信的方法，什么是jsBridge，jsBridge 原理和步骤，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

H5 和 App 原生应用之间通信的方法

url scheme
jsBridge
1. 也就是 javascript interface
2. 原生应用通过注入 JavaScript 接口到 WebView 中，让 H5 页面可以调用原生方法，从而实现双向通信【本质还是利用了 android webview 提供了注入的方法】
WebSocket
Hybrid 框架的通信机制
LocalStorage 或者 IndexedDB

什么是jsBridge

JSBridge 是一种机制，用于在 WebView 中的 JavaScript 和原生应用之间进行通信。它允许 JavaScript 代码调用原生应用的方法，并且允许原生应用调用 JavaScript 中的方法，实现了两者之间的双向通信。

jsBridge实现的详细步骤：

原生应用给webview注册接口：原生应用在加载 WebView 时，会提供一些接口供 JavaScript 调用。

调用 andorid webview 提供的原生方法，webview.addJavascriptInterface 给 webview注册一个接口，名字叫 NativeInterface【可以自定义这个名字，和前端对好就行】
addJavascriptInterface 有两个参数
1. Object obj：要添加的Java对象，它可以是Java代码中的任何对象（如活动，服务等）。
2. String interfaceName：该Java对象在JavaScript代码中使用的名称【我们这里叫NativeInterface】【可以自定义这个名字，和前端对好就行】。
3. NativeInterface 会被挂载到 js 的全局作用域，webview中前端可以使用 window.NativeInterface 访问

// 注册 JSBridge 接口，命名为 NativeInterface
// AndroidNativeInterface 这个也要自己定义
// AndroidNativeInterface里面通常有一个 方法，供js调用
webView.addJavascriptInterface(new AndroidNativeInterface(), "NativeInterface");class AndroidNativeInterface {// 接收来自 H5 页面的消息，并在原生应用中处理@JavascriptInterfacepublic void handleMessage(String message) {// 处理来自 H5 页面的消息// 这里可以执行一些原生操作，或者将数据传递给其他组件// 为了简单起见，我们只是打印接收到的消息System.out.println("Received message from H5: " + message);// 在这里可以执行一些原生操作，例如弹出一个 Toast// Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();// 接收到消息后，可以调用 H5 页面中定义的接口来传递数据给 H5 页面// webView.evaluateJavascript("JSBridge.receiveMessageFromNative('" + message + "')", null);}}

Javascript 封装 jsBridge对象：

通常是包括【给原生应用发送消息】和【接收原生应用发来的消息】

var JSBridge = {// 调用原生应用的方法，参数为要传递给原生方法的数据callNativeMethod: function(data) {// 调用原生方法，并传递数据window.NativeInterface.handleMessage(data);},// 接收原生应用传递的数据，并处理receiveMessageFromNative: function(data) {// 处理接收到的数据onsole.log("Received data from native: " + data);}
};

【原生应用】可以调用下面的 JSBridge.receiveMessageFromNative 给 webview 传递数据，具体语法如下

webView.evaluateJavascript("JSBridge.receiveMessageFromNative('" + message + "')", null);

webView.evaluateJavascript 也是 andorid webview 提供的原生方法，参数是我们 js 里面声明的 JSBridge 全局对象【JSBridge这个名字可以自定义，但是原生应用和 js 要统一】

js 给【原生应用】发送消息
1. 调用完这一句，就是调用原生应用的 handleMessage，handleMessage里面有响应方法
2. ```
//给原生应用发送消息, 传递对象数据 {name: 'test'}
JSBridge.callNativeMethod({name: 'test'})
```
原生应用给 js 发送消息
1. 就是在 handleMessage 里面的这条语句， JSBridge.receiveMessageFromNative 给webview传递数据
2. ```
webView.evaluateJavascript("JSBridge.receiveMessageFromNative('" + message + "')", null);
```

完整代码如下，由chatgpt生成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSBridge Demo</title><script>// 定义 JSBridge 对象，用于与原生应用通信var JSBridge = {// 调用原生应用的方法，参数为要传递给原生方法的数据callNativeMethod: function(data) {// 调用原生方法，并传递数据window.NativeInterface.handleMessage(data);},// 接收原生应用传递的数据，并处理receiveMessageFromNative: function(data) {// 处理接收到的数据console.log("Received data from native: " + data);}};</script>
</head>
<body><button onclick="JSBridge.callNativeMethod('Hello from H5!')">Call Native Method</button>
</body>
</html>

import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);WebView webView = findViewById(R.id.webview);webView.setWebViewClient(new WebViewClient());webView.setWebChromeClient(new WebChromeClient());webView.getSettings().setJavaScriptEnabled(true);// 注册 JSBridge 接口，命名为 AndroidNativeInterfacewebView.addJavascriptInterface(new AndroidNativeInterface(), "NativeInterface");// 加载 H5 页面webView.loadUrl("file:///android_asset/index.html");}// 自定义的 Android 原生接口class AndroidNativeInterface {// 接收来自 H5 页面的消息，并在原生应用中处理@JavascriptInterfacepublic void handleMessage(String message) {// 处理来自 H5 页面的消息// 这里可以执行一些原生操作，或者将数据传递给其他组件// 为了简单起见，我们只是打印接收到的消息System.out.println("Received message from H5: " + message);// 在这里可以执行一些原生操作，例如弹出一个 Toast// Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();// 接收到消息后，可以调用 H5 页面中定义的接口来传递数据给 H5 页面// webView.evaluateJavascript("JSBridge.receiveMessageFromNative('" + message + "')", null);}}
}

这篇关于h5和app原生通信的方法，什么是jsBridge，jsBridge 原理和步骤的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！