Android webview 與 js(Vue) 交互

js 與原生交互分爲兩種狀況：js 調用原生方法，原生調用 js 方法。

本文將對這兩種狀況分別講解，H5 端用 vue 實現。

1、前期準備（Vue項目準備）

本文的 H5 端用Vue 實現，因此在正式開始前先把 Vue 項目環境準備好。

項目寫好後，執行 npm run serve 命令啓動項目，啓動成功後會在命令行看到兩個地址：

http://localhost:8080/ 和 http://10.0.0.188:8080/

10.0.0.188 是我本機的 ip 地址，每一個人的不同。

在電腦的瀏覽器訪問的話哪一個都行，但在手機或模擬器訪問的話須要用第二個帶 ip 地址的，且要保證手機跟電腦鏈接同一個 wifi 或在同一網段。

注意：這裏用的是 vue-cli 3.0，運行命令跟 vue-cli 2.X 有所區別。詳情請自行查詢官方文檔。

啓動成功後在 Android 項目中將 http://10.0.0.188:8080/ 地址配置給 WebView 便可

Intent intent = new Intent(getActivity(), ProgressWebviewActivity.class);
intent.putExtra("url", "http://10.0.0.188:8080/");
startActivity(intent);
複製代碼

到此，在手機中就能夠訪問 Vue 項目了。

2、Android 原生調用 JS 中的方法

Android 調用 JS 有兩種方式，都是經過 WebView 的方法：

1. webview.loadUrl()
2. webview.evaluateJavascript()

兩者區別：

1. loadUrl() 會刷新頁面，evaluateJavascript() 則不會使頁面刷新，因此 evaluateJavascript() 的效率更高

2. loadUrl() 得不到 js 的返回值，evaluateJavascript() 能夠獲取返回值

3. evaluateJavascript() 在 Android 4.4 以後纔可使用

要實現的效果：

以下圖，頁面上有一行文字 」哈哈「，要在 WebView 頁面加載完的時候經過 Android 原生代碼將這行字改成 」我經過原生方法改變了文字「 + Android 傳遞過來的參數，並給 Android 返回一個字符串 」js調用成功「。

2.1 Vue 代碼

先看 Vue 中代碼怎麼寫

mounted() {
    //將要給原生調用的方法掛載到 window 上面
    window.callJsFunction = this.callJsFunction
},
data() {
    return {
    	msg: "哈哈"
	}
},
methods: {
    callJsFunction(str) {
        this.msg = "我經過原生方法改變了文字" + str
        return "js調用成功"
	}
}
複製代碼

在 methods 中定義一個供 Android 調用的方法 callJsFunction(str) , 並可接收一個參數 str，而後改變頁面中的文字。

若是隻是在 methods 中定義方法，原生調用會找不到這個方法。因此要在頁面加載的時候將方法掛載在 window 上，這樣 WebView 就能夠拿到此方法了。注意，這步很重要必定要寫！

注意一個細節，this.callJsFunction 後面不要加括號 ()，加括號至關於直接調用了。

總結起來 Vue 中要作的事情就兩步：

1. 在 methods 中定義方法
2. 在 mounted 中將方法掛載在 window 上

2.2 Android 中代碼

須要等頁面加載完在 WebView 的 onPageFinished 方法中寫調用邏輯，不然不會執行。

2.2.1 loadUrl() 實現

tbsWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url, headerMap);
                return true;
            }

            @Override
            public void onPageFinished(WebView webView, String s) {
                super.onPageFinished(webView, s);
                //安卓調用js方法。注意須要在 onPageFinished 回調裏調用
                tbsWebView.post(new Runnable() {
                    @Override
                    public void run() {
                        tbsWebView.loadUrl("javascript:callJsFunction('soloname')");
                    }
                });
            }
        });
    }
});
複製代碼

若是不須要傳參數，把參數去掉便可 tbsWebView.loadUrl("javascript:callJsFunction()");

2.2.2 evaluateJavascript() 實現

其餘地方跟loadUrl()同樣，只是把 tbsWebView.loadUrl("javascript:callJsFunction('soloname')"); 替換掉

@Override
public void onPageFinished(WebView webView, String s) {
    super.onPageFinished(webView, s);
    //安卓調用js方法。注意須要在 onPageFinished 回調裏調用
    tbsWebView.post(new Runnable() {
        @Override
        public void run() {
            tbsWebView.evaluateJavascript("javascript:callJsFunction('soloname')", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String s) {
                    Logger.d("js返回的結果： " + s);
                }
            });
        }
    });
}
複製代碼

能夠看到頁面更新了，第二種方法也拿到了返回的結果。

3、JS 調用 Android 原生方法

對於JS調用Android代碼的方法有3種：

1. 經過 WebView 的 addJavascriptInterface() 進行對象映射
2. 經過 WebViewClient 的 shouldOverrideUrlLoading()方法回調攔截 url
3. 經過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回調攔截JS對話框alert()、confirm()、prompt() 消息

對比： 第一種最簡潔，但在 Android 4. 2 如下存在漏洞；第二種和第三種使用複雜，但不存在漏洞問題。

因爲目前的設備系統版本基本都在 4.2 以上，因此用第一種就能夠了，簡單快捷。時間有限本文只實現第一種，第二種和第三種就不實現了，想了解的能夠參考 這篇文章 。

3.1 效果展現

要實現的效果就是點擊 H5 頁面上的按鈕，彈出 Android 原生的 Toast

3.2 Vue 代碼

methods: {
  showAndroidToast() {
    $App.showToast("哈哈，我是js調用的")
  }
}
複製代碼

在 methods 中定義方法 showAndroidToast() , 點擊頁面上按鈕 "調用Android原生Toast" 時調用。

3.3 Android 代碼

新建類 JsJavaBridge

public class JsJavaBridge {

    private Activity activity;
    private WebView webView;

    public JsJavaBridge(Activity activity, WebView webView) {
        this.activity = activity;
        this.webView = webView;
    }

    @JavascriptInterface
    public void onFinishActivity() {
        activity.finish();
    }

    @JavascriptInterface
    public void showToast(String msg) {
        ToastUtils.show(msg);
    }
}
複製代碼

而後經過 WebView 設置 Android 類與 JS 代碼的映射

tbsWebView.addJavascriptInterface(new JsJavaBridge(this, tbsWebView), "$App");
複製代碼

這裏將類 JsJavaBridge 在 JS 中映射爲了 $App，因此在 Vue 中能夠這樣調用 $App.showToast("哈哈，我是js調用的")。

以上就是 Android 與 JS 的互相調用。