安卓和js怎么交互

安卓和JS交互的方式主要包括：通过WebView、使用桥接库、通过WebSocket、原生插件开发。 这些方法各有优势，其中通过WebView是最常见且灵活性较高的方式。通过WebView，可以在Android应用内嵌入一个网页视图，支持JavaScript与Android原生代码的交互。WebView提供了丰富的API，允许开发者在JavaScript中调用Android方法，反之亦然。

通过WebView实现安卓和JS交互具体步骤如下：首先需要在Android布局文件中添加一个WebView组件，然后在Activity中初始化这个WebView，并加载需要与之交互的网页。接下来，使用WebView的addJavascriptInterface方法，将一个Java对象暴露给JavaScript。在JavaScript中，可以通过这个对象调用Android方法。

一、通过WebView交互

1、初始化和加载网页

在Android布局文件中添加WebView组件，并在Activity中初始化它。接下来，通过loadUrl方法加载一个网页。

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

在Activity中：

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.loadUrl("file:///android_asset/myfile.html");

2、设置JavaScript接口

使用WebView的addJavascriptInterface方法，将一个Java对象暴露给JavaScript：

myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");

在JavaScript中，可以通过Android对象调用Android方法：

function callAndroidFunction() {
    Android.showToast("Hello from JavaScript!");
}

3、实现Java接口

定义一个Java类，包含需要在JavaScript中调用的方法：

public class WebAppInterface {
    Context mContext;
    / Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }
    / Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

二、使用桥接库

1、概述

桥接库如JsBridge、BridgeWebView等，可以简化Android和JavaScript之间的交互，提供更高层次的抽象和更方便的API。

2、JsBridge使用示例

首先，添加JsBridge库到项目中：

implementation 'com.github.lzyzsd:jsbridge:1.0.4'

然后，初始化BridgeWebView并设置JavaScript接口：

BridgeWebView webView = findViewById(R.id.webView);
webView.setDefaultHandler(new DefaultHandler());
webView.loadUrl("file:///android_asset/myfile.html");
webView.registerHandler("submitFromWeb", new BridgeHandler() {
    @Override
    public void handler(String data, CallBackFunction function) {
        // Handle the data from JavaScript
        Toast.makeText(MainActivity.this, data, Toast.LENGTH_SHORT).show();
        // Send a response to JavaScript
        function.onCallBack("Response from Android");
    }
});

在JavaScript中，可以通过Bridge对象调用Android方法：

function callAndroidFunction() {
    WebViewJavascriptBridge.callHandler(
        'submitFromWeb'
        , {'param': 'value'}
        , function(responseData) {
            console.log("Response from Android: " + responseData);
        }
    );
}

三、通过WebSocket

1、概述

WebSocket是一种在单个TCP连接上进行全双工通讯的协议，适用于需要实时数据交换的应用。它可以在Android和JavaScript之间建立实时通信通道。

2、实现步骤

在Android中使用OkHttp或其他WebSocket库：

OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder().url("ws://yourserver.com").build();
WebSocketListener listener = new WebSocketListener() {
    @Override
    public void onMessage(WebSocket webSocket, String text) {
        // Handle incoming messages from JavaScript
    }
};
WebSocket ws = client.newWebSocket(request, listener);

在JavaScript中使用WebSocket API：

var ws = new WebSocket("ws://yourserver.com");
ws.onmessage = function(event) {
    var message = event.data;
    // Handle incoming messages from Android
};

四、原生插件开发

1、概述

对于使用React Native、Cordova等跨平台框架的项目，可以通过开发原生插件，实现Android和JavaScript的交互。

2、React Native示例

在React Native中创建一个原生模块：

public class ToastModule extends ReactContextBaseJavaModule {
    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Override
    public String getName() {
        return "ToastModule";
    }
    @ReactMethod
    public void show(String message) {
        Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
    }
}

在JavaScript中调用这个原生模块：

import { NativeModules } from 'react-native';
const { ToastModule } = NativeModules;
ToastModule.show("Hello from JavaScript!");

通过以上多种方式，可以实现Android和JavaScript之间的交互，每种方式都有其适用的场景和优势。通过WebView是最常见的方法，适用于大多数需要嵌入网页的应用场景；使用桥接库可以简化开发过程，提供更方便的API；通过WebSocket适用于需要实时数据交换的场景；原生插件开发则适用于使用跨平台框架的项目。选择适合的方式，可以使Android和JavaScript之间的交互更加高效和灵活。

安卓和js怎么交互

一、通过WebView交互

1、初始化和加载网页

2、设置JavaScript接口

3、实现Java接口

二、使用桥接库

1、概述

2、JsBridge使用示例

三、通过WebSocket

1、概述

2、实现步骤

四、原生插件开发

1、概述

2、React Native示例

相关问答FAQs：