Android WebView：我是怎么和 JavaScript 互撩的？

如今React Native都紅火了一年多了，現(xiàn)在還整WebView 和 JavaScript這些？ 哈哈，事情總有個循序漸進，況且現(xiàn)在這個還是主流處理方案吧，大家還是有必要了解的，文章很基礎(chǔ)，高手輕噴。

Demo動圖演示

動圖鎮(zhèn)樓，演示功能點的順序是：5-1-2-3-4

功能點動圖演示
功能點動圖演示

怎么生成我們需要的 HTML 頁面？

當我們get了WebView 和 JavaScript交互的技能時，準備躍躍欲試的時候，就會對這個被這個問題搞懵逼了，他娘的我又不是前端，要我立馬寫個自己想要的HTML頁面臣妾真的辦不到啊。

w3school 是什么？

是什么？你咋不點進去看看呢？

我們需要的 HTML 頁面

按照w3school的簡單教程我們就可以拼湊出我們所需要的頁面了，如下圖。


我們需要的 HTML 頁面
我們需要的 HTML 頁面

我們要實現(xiàn)的5個功能

  • Android Native 端調(diào)用 HTML 中的 javascript 腳本
  • Android Native 端調(diào)用 HTML 中的 javascript 腳本并傳遞參數(shù)
  • HTML 中的 javascript 腳本調(diào)用 Android Native 端的函數(shù)
  • HTML 中的 javascript 腳本調(diào)用Android Native 端的函數(shù)并傳遞參數(shù)
  • HTML 中的 javascript 腳本與 Android Native端的 Java 代碼完整交互流程

Android Native 端調(diào)用 HTML 中的 js 腳本

該例子中Android Native 端的 java 代碼會直接調(diào)用 HTML 頁面中的js 腳本，實現(xiàn)更改 HTML 頁面 subtitle 的功能。
Android Native 端的代碼為：

 mCallJsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("Native調(diào)用WebView的有參JS腳本");
            mWebView.loadUrl("javascript:changeDemoSubtitle()");
        }
    });

HTML 對應(yīng)的 js 方法是：

function changeDemoSubtitle(){
document.getElementById("subtitle").innerHTML="我加了點料";

}

Android Native 端調(diào)用 HTML 中的 js 腳本并傳遞參數(shù)

Android Native 端的代碼為：

mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("參數(shù)為：" + showDevInfo());
            showDevInfoToH5();
        }
    });
    private String showDevInfo() {
    return "showDevInfo('手機型號:" + android.os.Build.MODEL +
            ",SDK版本:" + android.os.Build.VERSION.SDK +
            ",系統(tǒng)版本:" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
    mWebView.loadUrl("javascript:" + showDevInfo());
}

HTML 對應(yīng)的 js 方法是：

function showDevInfo(info){
document.getElementById("subtitle").innerHTML=info;

}

HTML 中的 javascript 腳本調(diào)用 Android Native 端的函數(shù)

HTML 對應(yīng)的 js 方法是：

function disp_confirm(){
    confirm();
}

Android Native 端的代碼為：

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
            }
            result.confirm();
            return true;
        }
    });

HTML 中的 javascript 腳本調(diào)用Android Native 端的函數(shù)并傳遞參數(shù)

HTML 對應(yīng)的 js 方法是：

function disp_confirm_with_args(message){
    confirm(message);
    }

Android Native 端的代碼為：

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的參數(shù)message：" + message, Toast.LENGTH_SHORT).show();
            }
            result.confirm();
            return true;
        }
    });

HTML 中的 javascript 腳本與 Android Native端的 Java 代碼完整交互流程

HTML 對應(yīng)的 js 方法是：

function disp_confirm_with_args(message){
    confirm(message);
    }
    <input type="button" onclick="disp_confirm_with_args('getDevInfo')" value="點擊獲取用戶手機信息"/>

Android Native 端的代碼為：

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            if ("getDevInfo".equals(message)) {
                showDevInfoToH5();
            } 
            }
            result.confirm();
            return true;
        }
    });
    private String showDevInfo() {
    return "showDevInfo('手機型號:" + android.os.Build.MODEL +
            ",SDK版本:" + android.os.Build.VERSION.SDK +
            ",系統(tǒng)版本:" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
    mWebView.loadUrl("javascript:" + showDevInfo());
}

Android Native 端代碼完整展示：

Activity 代碼：

package cn.mtalks.jsbridgedemo;
import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity2 extends Activity {

private WebView mWebView;
private Button mCallJsBtn;
private Button mCallJsWithArgsBtn;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_2);
    initView();
    initWebView();
}

private void initView() {
    mWebView = (WebView) findViewById(R.id.webview);
    mCallJsBtn = (Button) findViewById(R.id.call_js_without_args_btn);
    mCallJsWithArgsBtn = (Button) findViewById(R.id.call_js_with_args_btn);

    mCallJsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("Native調(diào)用WebView的有參JS腳本");
            mWebView.loadUrl("javascript:changeDemoSubtitle()");
        }
    });

    mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("參數(shù)為：" + showDevInfo());
            showDevInfoToH5();
        }
    });
}

private void initWebView() {
    //開啟JavaScript功能
    mWebView.getSettings().setJavaScriptEnabled(true);
    //加載本地html
    mWebView.loadUrl("file:///android_asset/JsDemo.html");

    mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            if ("getDevInfo".equals(message)) {
                showDevInfoToH5();
            } else if (TextUtils.isEmpty(message)) {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的參數(shù)message：" + message, Toast.LENGTH_SHORT).show();
            }
            //回調(diào)通知H5頁面用戶操作已完成，可以再次點擊相關(guān)按鈕
            result.confirm();
            //設(shè)為true，可以消耗掉H5頁面的confirm彈窗。
            return true;
        }
    });
}

private String showDevInfo() {
    return "showDevInfo('手機型號:" + android.os.Build.MODEL +
            ",SDK版本:" + android.os.Build.VERSION.SDK +
            ",系統(tǒng)版本:" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
        mWebView.loadUrl("javascript:" + showDevInfo());
    }
}

XML 代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="Android_Native"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/call_js_without_args_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Native調(diào)用WebView的JS腳本" />

    <Button
        android:id="@+id/call_js_with_args_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="Native調(diào)用WebView的有參JS腳本" />
</LinearLayout>

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    />
</LinearLayout>

AndroidManifest 文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.mtalks.jsbridgedemo">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity2"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>
    </application>
</manifest>

友情提示

其實在JavaScript調(diào)用 Java本地方法，谷歌官方的實現(xiàn)方法應(yīng)該是使用 JavascriptInterface 方式。但是該方式在 Android4.2版本之前存在安全漏洞，感興趣的看這里。在Android4.2版本之后加入了@JavascriptInterface注解才得以解決，考慮到目前 Android 版本碎片化太嚴重，使用JavascriptInterface并不適合，這也是上篇文章沒把它放入效率對比的原因。

以上就是一個完整的 WebView 與 JavaScript 的交互例子。大家可以自己動手試試上篇文章介紹的ShouldInterceptRequest方式來實現(xiàn)這個例子。

下篇預(yù)告

Webview 頁面展示優(yōu)化。除了 HTML 頁面自己的優(yōu)化，在 Android Native 端能為加載速度做些什么優(yōu)化么？下篇文章會給你答案，比如公共 Js 方法提取放入本地，JS,CSS,圖片資源預(yù)加載等等。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容