当前位置: article > 正文

h5和app原生通信的方法，什么是jsBridge，jsBridge 原理和步骤_h5与客户端交互的js叫啥

作者：AllinToyou | 2024-06-13 01:25:21

踩

h5与客户端交互的js叫啥

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

url scheme
url 参数
jsBridge
1. 也就是 javascript interface
2. 原生应用通过注入 JavaScript 接口到 WebView 中，让 H5 页面可以调用原生方法，从而实现双向通信【本质还是利用了 android webview 提供了注入的方法】【简称API注入】
WebSocket
postMessage【没错这个也可以】
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 页面的消息，并在原生应用中处理
        @JavascriptInterface
        public 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 {
 
    @Override
    protected 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 接口，命名为 AndroidNativeInterface
        webView.addJavascriptInterface(new AndroidNativeInterface(), "NativeInterface");
 
        // 加载 H5 页面
        webView.loadUrl("file:///android_asset/index.html");
    }
 
    // 自定义的 Android 原生接口
    class AndroidNativeInterface {
        // 接收来自 H5 页面的消息，并在原生应用中处理
        @JavascriptInterface
        public 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);
        }
    }
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/710366