本文記錄 Android 中 WebView 控制元件的相關使用，不斷完善中…

主要包括：

• 基本屬性的配置
• WebView 快取相關內容
• Java 與 Js 的互動
• WebView 開啟本地應用(支付寶等)
• 載入網路連結，本地 sd 卡路徑，assert 目錄路徑的方法
• WebView 支援下載等其它一些內容

基本配置彙總

彙總的記錄一下 WebView 的配置方法，重要的屬性後面會展開說明。

@SuppressLint("SetJavaScriptEnabled")
public static void initWebViewSettings(WebView mWebView) {
    //支援獲取手勢焦點
 

    mWebView.requestFocusFromTouch();
    // 觸覺反饋，暫時沒發現用處在哪裡
    mWebView.setHapticFeedbackEnabled(false);
    WebSettings settings = mWebView.getSettings();
    // 支援外掛
    settings.setPluginState(WebSettings.PluginState.ON);
    // 允許js互動
    settings.setJavaScriptEnabled(true);
    // 設定WebView是否可以由 JavaScript 自動開啟視窗，預設為 false
 

    // 通常與 JavaScript 的 window.open() 配合使用。
    settings.setJavaScriptCanOpenWindowsAutomatically(true);
    // 允許中文編碼
    settings.setDefaultTextEncodingName("UTF-8");
    // 使用大檢視，設定適應螢幕
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    // 支援多視窗
    settings.setSupportMultipleWindows(true
 
);
    // 隱藏自帶縮放按鈕
    settings.setBuiltInZoomControls(false);
    // 支援縮放
    settings.setSupportZoom(true);
    // 設定可訪問檔案
    settings.setAllowFileAccess(true);
    // 當WebView呼叫requestFocus時為WebView設定節點
    settings.setNeedInitialFocus(true);
    //支援自動載入圖片
    settings.setLoadsImagesAutomatically(true);
    // 指定WebView的頁面佈局顯示形式，呼叫該方法會引起頁面重繪。
    // NORMAL,SINGLE_COLUMN 過時, NARROW_COLUMNS 過時 ,TEXT_AUTOSIZING
    settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
    // 從Lollipop(5.0)開始WebView預設不允許混合模式，https當中不能載入http資源，需要設定開啟
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
    }
}

WebView 快取

清除快取，true 表示清除磁碟快取，這個方法是全域性的，也就是說會清除掉整個應用所有的 網頁快取。

mWebView.clearCache(true);

清除歷史記錄

mWebView.clearHistory();

網上有介紹說，設定快取的目錄，清除快取時刪除掉快取檔案，但是使用下面的方法設定快取路徑後，發現檔案並沒有快取到指定的目錄，不知道是怎麼回事？求指教

private static void initWebViewCache(WebView mWebView) {

    String cachePath = new File(Environment.getExternalStorageDirectory()
            , "webCache").getAbsolutePath();

    WebSettings settings = mWebView.getSettings();
    settings.setAppCacheEnabled(true);
    settings.setAppCachePath(cachePath);
    settings.setDatabaseEnabled(true);
    // 過時
    settings.setDatabasePath(cachePath);
    // 開啟dom快取
    settings.setDomStorageEnabled(true);
    // 載入模式
    settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
    // 快取最大值，過時
    settings.setAppCacheMaxSize(1000 * 1024);
}

載入 Url

載入網路路徑，headers 不是必選的

Map<String,String> headers = new HashMap<>();
headers.put("auth","110");
mWebView.loadUrl("https://www.baidu.com/",headers);

載入 assert 路徑

// WebViewUtil.java
public static String getAssertUrl(String fileUrl) {
    return "file:///android_asset/" + fileUrl;
}

mWebView.loadUrl(WebViewUtil.getAssertUrl("index.html"));

載入 sd 卡路徑

// WebViewUtil.java
public static String getSdUrl(String fileUrl) {
    return "file://" + Environment.getExternalStorageDirectory() + "/" + fileUrl;
}

mWebView.loadUrl(WebViewUtil.getSdUrl("index.html"));    

Js 呼叫 Java

Java 與 Js 互動需要定義一個帶有 @JavascriptInterface 註解方法的物件，如下：

public class JsBridge {

    @JavascriptInterface
    public void toast(String msg) {
        ToastUtils.show(msg);
    }

    @JavascriptInterface
    public void log(String msg) {
        Log.e(TAG, msg);
    }
}

使用 JsBridge 連線 Java 和 Js，使用 mWebView.addJavascriptInterface(obj, name); 方法。

• obj：帶有 JavascriptInterface 註解方法的物件例項。
• name：一個標誌符，js 將會使用該標誌來呼叫 java 層的方法。

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsBridge(), "android");

在新增呼叫介面時，我們添加了一個標記，如上面程式碼中新增的是 android，它相當於呼叫介面物件的一個別名，因此在 js 中呼叫 java 方法時，只需要使用 window 物件，如下:

window.android.log('test js invoke java method');

Java 呼叫 Js

使用 java 呼叫 js 方法相對簡單，假如在 js 中應該宣告如下 function，

<script>
// 有參無返回值
    function funcParam(param){
        alert(param+"");
    }

    // 有參有返回值
    function newFunc(param1,param2,param3){
        alert((param1 +  param2) + " " + param3);
        return param3;
    }
</script>

在 java 層呼叫時只需 loadUrl("Javascript:js方法名()) 即可，但是 Android 4.4 之後在呼叫 js 方法時可以獲取返回值，寫一個方法相容一下

public static final String JS_FUNC_PREFIX = "javascript:";

public void invokeJs(String jsFunc, final ValueCallback<String> callback) {
    if (!jsFunc.startsWith(JS_FUNC_PREFIX)) {
        jsFunc = JS_FUNC_PREFIX + jsFunc;
    }
    // api 19
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        mWebView.evaluateJavascript(jsFunc, callback);
    } else {
        mWebView.loadUrl(jsFunc);
    }
}

在與 js 進行引數傳遞時，基本資料型別可以直接傳遞，字串型別要使用引號包含，而且直接拼接字串不太好，因此寫一個簡化構建 js 方法，自動按順序進行引數的拼接。

// 建立一個 js 方法
public static String generateJsFunc(String funcName, Object... params) {
    StringBuilder sb = new StringBuilder(funcName).append("(");
    for (int i = 0; i < params.length; i++) {
        if (params[i] != null) {
            if (params[i] instanceof String) {
                sb.append("'").append(params[i]).append("'");
            } else {
                sb.append(params[i]);
            }
            if (i != params.length - 1) {
                sb.append(",");
            }
        }
    }
    sb.append(")");
    return sb.toString();
}

簡單呼叫

// 呼叫有參有返回值的方法
String jsFunc = JsBridge.generateJsFunc("newFunc", "str", 100, 100);
mJsBridge.invokeJs(jsFunc, new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        Log.e(TAG, "value = " + value);
    }
});

// 呼叫有參無返回值方法
String funcParam = JsBridge.generateJsFunc("funcParam", 100);
mJsBridge.invokeJs(funcParam, null);

攔截 Url 開啟應用(支付寶)

主要原理是由於某些應用會暴露一些頁面出來供別的 app 喚起，因此我們只需要攔截這種 Url，然後使用 intent 開啟即可，下面以支付寶為例說明：

前端使用支付寶進行支付時，需要開啟手機支付寶客戶端，斷點看到支付寶會載入一個 scheme 為 alipays 的url，連結中配置了支付的相關資訊，客戶端要做的就是攔截該 Url，使用 intent 開啟支付寶。

當 html 載入網頁之前會先走 shouldOverrideUrlLoading() 方法，此時截斷不使用 webView 載入，而是使用 intent 開啟，此方法不僅適用支付寶，也適用開啟其他應用。

mWebView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 如果不使用 intent 覆蓋載入這個連結，就走原來
        if (!shouldOverrideIntentUrl(getContext(), url)) {
            view.loadUrl(url, Api.makeHttpHeaders(getContext()));
        }
        return true;
    }
});


private boolean shouldOverrideIntentUrl(Context context, String url) {
    Uri uri = Uri.parse(url);
    if (uri.getScheme().equals("alipays")) {
        try {
            Intent intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
            intent.addCategory(Intent.CATEGORY_BROWSABLE);
            intent.setComponent(null);
            intent.setSelector(null);
            context.startActivity(intent);
            return true;
        } catch (URISyntaxException e) {
            e.printStackTrace();
            return false;
        }
    }
    return false;
}

支援下載連結

當網頁中載入一個下載的連結，如 http://xxx.apk 這種連結，會走 shouldOverrideUrlLoading() 方法，但是，它是無法載入一個網頁的，結果就是沒有任何反應，此時需要設定 DownloadListener，需要下載的連結會進入監聽，你可以在監聽中自己進行網路下載儲存到檔案，下面我使用直接開啟瀏覽器的方式，更簡單一些。

public static void setDefDownloadListener(final WebView webView) {
    webView.setDownloadListener(new DownloadListener() {
        @Override
        public void onDownloadStart(String url, String userAgent,
                                    String contentDisposition,
                                    String mimetype,
                                    long contentLength) {
            //去下載
            Intent intent = new Intent(Intent.ACTION_VIEW);
            String downLoadUrl = url;
            if (!downLoadUrl.contains("http://")) {
                downLoadUrl = "http://" + downLoadUrl;
            }
            intent.setData(Uri.parse(downLoadUrl));
            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
            webView.getContext().startActivity(intent);
        }
    });
}

WebChromeClient

WebView 預設是無法彈出 alert() 的，需要設定 WebChromeClient

mWebView.setWebChromeClient(new WebChromeClient());

todo

更多內容補充中 …