JavaScript 和 原生端的数据通信

上篇文章我们讲述了 React Native 的原理，其中讲到 React Native 与 原生模端的数据通信。那么脱离 React Native，JavaScrip 是怎样和原生端的数据通信的呢？作为补充，我们需要了解它们的工作原理。下面我们仅以 Android 原生端为例进行讲解。

通信方式

JavaScript 和 Android 之间的通信可以通过以下方式实现：

• 使用 WebView 的 addJavascriptInterface 方法，将 Java 对象暴露给 JavaScript，从而实现 JavaScript 调用 Java 方法的功能。
• 使用 JavaScriptInterface 注解，将 Java 对象暴露给 JavaScript，从而实现 JavaScript 调用 Java 方法的功能。
• 使用 WebView 的 evaluateJavascript 方法，将 JavaScript 代码传递给 WebView 执行，并通过回调函数获取执行结果。
• 使用 WebViewClient 的 shouldOverrideUrlLoading 方法，拦截 WebView 加载的 URL，从而实现 JavaScript 和 Java 之间的通信。
• 使用 Android 的 Intent 机制，通过 Intent 向其他应用程序发送消息，从而实现 JavaScript 和 Java 之间的通信。

WebView 工作原理

不难看出，JavaScript Android 原生端的通信最主要是通过 WebView 来实现的。下面我们来谈谈 WebView 工作原理。

• 加载网页：当应用程序调用 WebView 的 loadUrl() 方法时，WebView 会向指定的 URL 发送 HTTP 请求，并将响应内容显示在 WebView 中。
• 渲染网页：WebView 会将 HTML、CSS 和 JavaScript 代码解析成 DOM 树、CSS 树和 JavaScript 引擎执行的代码，并将它们渲染成可视化的网页。
• 处理用户交互：WebView 可以处理用户的点击、滑动、缩放等交互操作，并将这些操作转换成相应的 JavaScript 事件，以便网页可以响应用户的操作。
• 与应用程序交互：WebView 可以通过 JavaScript 接口与应用程序进行交互，例如调用应用程序的方法、获取应用程序的数据等。
• 缓存网页：WebView 可以缓存网页，以便在下次访问相同的 URL 时可以更快地加载网页。

总的来说，WebView 将网页的 HTML、CSS 和 JavaScript 代码解析成可视化的网页，并处理用户的交互操作，同时还可以与应用程序进行交互和缓存网页。

JavaScript 怎样调用 Android Native

要在 JavaScript 中调用 Android Native，需要使用 Android 的 WebView 组件。WebView 是一个 Android 组件，它允许在应用程序中嵌入 Web 页面。在 WebView 中，可以使用 JavaScript 与 Android 原生端代码进行交互。

以下是在 JavaScript 中调用 Android 原生端的步骤：

1. 在 Android 原生端代码中创建一个 Java 类，该类将包含要在 JavaScript 中调用的方法。
2. 在 Android 原生端代码中创建一个 WebViewClient 类，该类将处理 WebView 中的 JavaScript 调用。
3. 在 Android 原生端代码中将 WebView 设置为客户端 WebViewClient。
4. 在 JavaScript 中使用 window.android 对象调用 Android 原生端代码中的方法。

下面是一个简单的示例，演示如何在 JavaScript 中调用 Android Native：

在 Android 原生端代码中创建一个 Java 类：

public class MyJavaScriptInterface {
  Context mContext;

  MyJavaScriptInterface(Context c) {
    mContext = c;
  }

  @JavascriptInterface
  public void showToast(String toast) {
    Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
  }
}

在 Android 原生端代码中创建一个 WebViewClient 类：

private class MyWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url);
    return true;
  }

  @Override
  public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    view.loadUrl("javascript:window.android.onPageLoaded(document.getElementsByTagName('html')[0].innerHTML);");
  }
}

在 Android 原生端代码中将 WebView 设置为客户端 WebViewClient：

WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new MyJavaScriptInterface(this), "android");
webView.setWebViewClient(new MyWebAndroid NativeViewClient());
webView.loadUrl("http://www.example.com");

在 JavaScript 中使用 window.android 对象调用 Android 原生端代码中的方法：

window.android.showToast("Hello, Android!");

在这个例子中，当 WebView 加载完页面后，它将调用 onPageLoaded 方法，该方法将调用 JavaScript 中的 onPageLoaded 函数。在 onPageLoaded 函数中，可以使用 window.android 对象调用 Android 原生端代码中的 showToast 方法。这将在 Android 应用程序中显示一个 Toast 消息。

请注意，为了确保安全性，应该仅允许调用受信任的方法，并且应该对传递给方法的参数进行验证。

Android 怎样调用 JavaScript

Android 调用 JavaScript 方法可以通过 WebView 的 loadUrl() 方法或 evaluateJavascript() 方法实现。

在 Android 中，可以通过 WebView 控件来调用 JavaScript。以下是一些示例代码：

1. loadUrl() 方法

loadUrl() 方法可以直接调用 JavaScript 方法，例如：

• 调用 JavaScript 函数：

WebView webView = findViewById(R.id.webView);
webView.loadUrl("javascript:methodName()");

• 传递参数给 JavaScript 函数：

WebView webView = findViewById(R.id.webView);
String param = "Hello, world!";
webView.loadUrl("javascript:methodName('" + param + "')");

其中，methodName() 是 JavaScript 中的方法名。

2. evaluateJavascript() 方法

evaluateJavascript() 方法可以调用 JavaScript 方法并获取返回值，例如：

webView.evaluateJavascript("methodName()", new ValueCallback<String>() {
  @Override
  public void onReceiveValue(String value) {
    // value 是 JavaScript 方法的返回值
  }
});

其中，methodName() 是 JavaScript 中的方法名，ValueCallback 是回调接口，用于接收 JavaScript 方法的返回值。

总结

可以看出，无论是 JavaScript 调用 Android 原生端，还是 Android 原生端 调用 JavaScript 方法，最主要都是通过 WebView 这个“中介”来实现的——这也是混合应用的精髓。

?Happy coding!