js怎么和native交互

JavaScript和Native（原生）交互的方式有多种，包括通过WebView、使用桥接（Bridge）技术、调用API以及通过插件等方式。最常见的方式包括使用WebView加载网页内容、通过JavaScript桥接与原生代码进行通信、调用原生API、使用插件和库实现复杂交互。其中，通过WebView加载网页内容 是一种非常常见的方法，这种方式既可以在iOS和Android上实现，也可以在其他平台上实现。下面将详细介绍这种方法。

一、通过WebView加载网页内容

WebView概述

WebView是一种可以在移动应用中显示网页内容的组件。它允许在应用内嵌入一个浏览器控件，使得开发者可以使用HTML、CSS和JavaScript来构建用户界面。通过WebView加载网页内容，是JavaScript和Native交互的一种常见方式。

在Android中使用WebView

在Android应用中，WebView是一个用于显示网页内容的视图。开发者可以通过WebView来加载网页，并与JavaScript进行交互。

初始化WebView

首先，在Android项目中添加一个WebView控件：

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

然后，在Activity中初始化WebView：

WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true); // 启用JavaScript
webView.loadUrl("file:///android_asset/index.html");

与JavaScript交互

为了实现与JavaScript的交互，可以使用WebView的addJavascriptInterface方法：

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

定义WebAppInterface类：

public class WebAppInterface {
    Context mContext;
    WebAppInterface(Context c) {
        mContext = c;
    }
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
    }
}

在网页中调用原生方法：

<!DOCTYPE html>
<html>
  <head>
    <title>WebView Example</title>
    <script type="text/javascript">
      function showToast() {
        Android.showToast("Hello from JavaScript!");
      }
    </script>
  </head>
  <body>
    <button onclick="showToast()">Show Toast</button>
  </body>
</html>

在iOS中使用WKWebView

在iOS平台上，WKWebView是一个用于显示网页内容的组件。它是UIWebView的替代品，提供了更好的性能和更多的功能。

初始化WKWebView

首先，在iOS项目中添加一个WKWebView控件：

import WebKit
class ViewController: UIViewController {
    var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        webView = WKWebView(frame: self.view.frame)
        self.view.addSubview(webView)
        let url = Bundle.main.url(forResource: "index", withExtension: "html")!
        webView.loadFileURL(url, allowingReadAccessTo: url)
    }
}

与JavaScript交互

为了实现与JavaScript的交互，可以使用WKWebView的evaluateJavaScript方法和WKScriptMessageHandler协议：

import WebKit
class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let contentController = WKUserContentController()
        contentController.add(self, name: "iOS")
        let config = WKWebViewConfiguration()
        config.userContentController = contentController
        webView = WKWebView(frame: self.view.frame, configuration: config)
        self.view.addSubview(webView)
        let url = Bundle.main.url(forResource: "index", withExtension: "html")!
        webView.loadFileURL(url, allowingReadAccessTo: url)
    }
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "iOS" {
            if let messageBody = message.body as? String {
                showToast(message: messageBody)
            }
        }
    }
    func showToast(message: String) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        present(alert, animated: true)
    }
}

在网页中调用原生方法：

<!DOCTYPE html>
<html>
  <head>
    <title>WKWebView Example</title>
    <script type="text/javascript">
      function showToast() {
        window.webkit.messageHandlers.iOS.postMessage("Hello from JavaScript!");
      }
    </script>
  </head>
  <body>
    <button onclick="showToast()">Show Toast</button>
  </body>
</html>

二、使用桥接（Bridge）技术

React Native中的桥接技术

React Native是一个流行的框架，用于构建跨平台移动应用。它使用JavaScript和React来构建用户界面，并允许与原生代码进行交互。桥接技术是React Native实现JavaScript与原生代码交互的核心。

创建原生模块

在Android中创建一个原生模块：

package com.example;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
public class ToastModule extends ReactContextBaseJavaModule {
    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Override
    public String getName() {
        return "ToastModule";
    }
    @ReactMethod
    public void showToast(String message) {
        Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
    }
}

在iOS中创建一个原生模块：

import Foundation
import React
@objc(ToastModule)
class ToastModule: NSObject {
    @objc
    func showToast(_ message: String) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        UIApplication.shared.keyWindow?.rootViewController?.present(alert, animated: true)
    }
}

使用原生模块

在JavaScript代码中使用原生模块：

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

Cordova中的桥接技术

Cordova是一个用于构建跨平台移动应用的框架。它允许使用HTML、CSS和JavaScript来构建用户界面，并与原生代码进行交互。

创建插件

在Android中创建一个插件：

package com.example;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
public class ToastPlugin extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("showToast")) {
            String message = args.getString(0);
            this.showToast(message, callbackContext);
            return true;
        }
        return false;
    }
    private void showToast(String message, CallbackContext callbackContext) {
        Toast.makeText(cordova.getActivity(), message, Toast.LENGTH_SHORT).show();
        callbackContext.success();
    }
}

在iOS中创建一个插件：

import Foundation
import Cordova
@objc(ToastPlugin) class ToastPlugin: CDVPlugin {
    @objc(showToast:)
    func showToast(command: CDVInvokedUrlCommand) {
        let message = command.arguments[0] as! String
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        self.viewController.present(alert, animated: true)
        let pluginResult = CDVPluginResult(status: CDVCommandStatus_OK)
        self.commandDelegate.send(pluginResult, callbackId: command.callbackId)
    }
}

使用插件

在JavaScript代码中使用插件：

cordova.exec(function() {
    console.log('Toast shown successfully');
}, function(err) {
    console.error('Error showing toast:', err);
}, 'ToastPlugin', 'showToast', ['Hello from JavaScript!']);

三、调用API

使用JavaScript调用原生API

在某些情况下，JavaScript可以直接调用原生API。以下是一些常见的场景：

调用Geolocation API

Geolocation API允许JavaScript获取设备的地理位置。以下是一个示例：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        console.log('Latitude:', position.coords.latitude);
        console.log('Longitude:', position.coords.longitude);
    }, function(error) {
        console.error('Error getting location:', error);
    });
} else {
    console.error('Geolocation is not supported by this browser.');
}

调用WebRTC API

WebRTC API允许JavaScript进行实时音视频通信。以下是一个示例：

const constraints = { video: true, audio: true };
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    const videoElement = document.querySelector('video');
    videoElement.srcObject = stream;
}).catch(function(error) {
    console.error('Error accessing media devices:', error);
});

使用原生调用JavaScript API

在某些情况下，原生代码可以调用JavaScript API。以下是一些常见的场景：

调用JavaScript函数

在Android中调用JavaScript函数：

webView.evaluateJavascript("javascript:showToast('Hello from Native!')", null);

在iOS中调用JavaScript函数：

webView.evaluateJavaScript("showToast('Hello from Native!')", completionHandler: nil);

四、使用插件和库

使用插件和库实现复杂交互

在开发过程中，有时需要使用插件和库来实现复杂的JavaScript和Native交互。以下是一些常见的插件和库：

使用React Native插件

React Native有许多插件可以帮助实现复杂的交互。例如，使用react-native-camera插件可以实现相机功能：

import { RNCamera } from 'react-native-camera';
<RNCamera
    style={{ flex: 1 }}
    type={RNCamera.Constants.Type.back}
    flashMode={RNCamera.Constants.FlashMode.on}
    captureAudio={false}
/>

使用Cordova插件

Cordova有许多插件可以帮助实现复杂的交互。例如，使用cordova-plugin-camera插件可以实现相机功能：

navigator.camera.getPicture(function(imageData) {
    const image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}, function(error) {
    console.error('Error taking picture:', error);
}, {
    quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
});

五、总结

JavaScript和Native的交互方式多种多样，包括通过WebView加载网页内容、使用桥接技术、调用API以及使用插件和库等。在实际开发过程中，可以根据具体需求选择合适的方式来实现JavaScript与Native的交互。通过合理地选择和使用这些技术，可以构建出功能丰富且性能优异的移动应用。

推荐的项目管理系统包括研发项目管理系统PingCode和通用项目协作软件Worktile，这些工具可以帮助开发团队更高效地协作和管理项目。

js怎么和native交互

WebView概述

在Android中使用WebView

初始化WebView

与JavaScript交互

在iOS中使用WKWebView

初始化WKWebView

与JavaScript交互

React Native中的桥接技术

创建原生模块

使用原生模块

Cordova中的桥接技术

创建插件

使用插件

使用JavaScript调用原生API

调用Geolocation API

调用WebRTC API

使用原生调用JavaScript API

调用JavaScript函数

使用插件和库实现复杂交互

使用React Native插件

使用Cordova插件

相关问答FAQs：