Android JS交互詳解

現在的APP開發越來越注重交互性，前端技術也在不斷發展，所以如何在Android中實現JS交互成為了一個急需解決的問題。本篇文章就從多個方面詳細闡述Android JS交互，並給出具體的代碼實現。

一、WebView實現

WebView是Android中內置的一個瀏覽器組件，在頁面加載時會自動執行頁面內的JavaScript。通過WebView可以實現Android與JS的交互。下面給出一個簡單的示例，演示如何通過WebView調起Android原生的Toast組件。

WebView webView = findViewById(R.id.web_view);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    }
}, "app");
webView.loadUrl("file:///android_asset/index.html");

上述代碼中，首先通過findViewById獲取到WebView組件並使其支持JavaScript。然後通過addJavascriptInterface方法向JS注入一個名為“app”的接口，該接口有一個名為showToast的方法，用於在Android中調起Toast。最後通過loadUrl方法加載HTML文件。下面給出JS代碼片段。

調用Toast

上述代碼中，通過一個按鈕觸發調用showToast方法，傳遞一個字符串參數“Hello World”，調起Android原生的Toast。通過上述代碼，我們可以看到Android與JS的交互非常方便，只需要通過addJavascriptInterface方法注入一個接口即可。

二、JSBridge實現

WebView雖然可以實現Android與JS的交互，但其存在一些安全性問題，因為addJavascriptInterface方法有一個漏洞，即允許你暴露Java對象給JS調用，在一定程度上增加了攻擊者的威脅。為了解決這個問題，JSBridge應運而生，JSBridge基於WebView的特點實現了安全性更高的交互方式。

下面給出JSBridge庫中的具體代碼實現。

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

WebView webView = findViewById(R.id.web_view);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    }
}, "app");
webView.loadUrl("file:///android_asset/index.html");
BridgeWebView bridgeWebView = new BridgeWebView(this);
bridgeWebView.loadUrl("file:///android_asset/jsbridge.html");

上述代碼中，首先通過implementation引入JSBridge庫，並使WebView組件支持JavaScript，並注入一個名為“app”的接口，其中包含一個名為showToast的方法。然後通過BridgeWebView組件加載HTML文件。下面給出JS代碼片段。

調用Toast

上述代碼中，調用showToast方法時通過javascript:android前綴的方式，直接調用到了注入的接口方法，跨平台交互更加高效、安全。

三、React Native實現

React Native是Facebook推出的一種跨平台移動應用開發框架，能夠通過JavaScript語言來構建原生移動應用。React Native基於執行JavaScript代碼的方式來跨平台成為了一個實現跨平台開發的利器，因此在Android與JS交互中也能夠發揮巨大的作用。

下面給出React Native中實現JS交互的代碼示例。

1、Java代碼

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "example";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ReactRootView rootView = new ReactRootView(this);
        setContentView(rootView);
        ReactInstanceManager mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        rootView.startReactApplication(mReactInstanceManager, "example", null);
    }

    @ReactMethod
    public void showToast(String message) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }
}

上述代碼中，首先繼承ReactActivity，並複寫getMainComponentName方法。然後在onCreate方法中創建ReactRootView組件，並通過ReactInstanceManager實現React Native環境的初始化，最後調用startReactApplication方法加載React Native組件，並注入一個名為“example”的接口，其中包含一個名為showToast的方法。

2、JS代碼

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {NativeModules} from 'react-native';

export default class App extends Component {
    render() {
        return (
            &ltView style={styles.container}>
                &ltTouchableOpacity onPress={() => NativeModules.MainActivity.showToast('Hello World')} style={styles.btn}>
                    &ltText style={{color: '#ffffff'}}>調用Toast&lt/Text>
                &lt/TouchableOpacity>
            &lt/View>
        );
    }
}

上述代碼中，在引入NativeModules模塊後，直接調用MainActivity中注入的showToast方法即可實現Android與JS的交互。

四、jQuery Mobile實現

jQuery Mobile是一個開源的，跨平台的，針對移動設備的JavaScript框架，它整合了HTML5、CSS3以及jQuery核心庫的功能，能夠實現跨平台開發和UI實現。下面給出jQuery Mobile的代碼實現方式，這裡以調用Android的Toast組件為例。

&lt!DOCTYPE html&gt
&lthtml&gt
    &lthead&gt
        &lttitle&gtjQuery Mobile Example&lt/title&gt
        &ltmeta name="viewport" content="width=device-width, initial-scale=1" /&gt
        &ltlink rel="stylesheet" href="./jquery.mobile-1.4.5.min.css" /&gt
        &ltscript src="./jquery-1.11.1.min.js"&gt&lt/script&gt
        &ltscript src="./jquery.mobile-1.4.5.min.js"&gt&lt/script&gt
    &lt/head&gt
    &ltbody&gt
        &ltdiv data-role="page" id="page"&gt
            &ltdiv data-role="header"&gt
                &lta href="#" id="show-button" class="ui-btn-right"&gtShow&lt/a&gt
                &ltimg src="./android.png" style="max-width: 100%;" /&gt
                &ltH1&gtAndroid &ltspan id="title-text"&gt&lt/span&gt&lt/H1&gt
            &lt/div&gt

            &ltdiv data-role="content"&gt
                &lt!-- Content goes here --&gt
            &lt/div&gt

            &ltdiv data-role="footer"&gt
                &ltH1&gtFooter&lt/H1&gt
            &lt/div&gt

            &ltscript&gt
                $("#show-button").click(function() {
                    var message = "Hello World";
                    window.location.href = "app://showToast?message=" + message;
                });
            &lt/script&gt
        &lt/div&gt
    &lt/body&gt
&lt/html&gt

上述代碼中，在點擊Show按鈕後，調用了一個名為app://showToast的URI。下面給出Android原生代碼的實現方式。

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("app://showToast")) {
            String message = Uri.decode(url.substring(18));
            showToast(message);
            return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
});

@JavascriptInterface
public void showToast(String message) {
    Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
}

上述代碼中，通過WebViewClient的重寫，實現攔截app://showToast的URI，並通過showToast方法實現調起Android原生的Toast組件。

五、總結

本篇文章從WebView、JSBridge、React Native和jQuery Mobile四個方面詳細闡述了Android JS交互的實現方式，並給出了具體的代碼實現，希望讀者可以通過本文更加深入的了解Android與JS交互，並在實際開發中靈活運用。