Java和Android架構
歡迎關注我們，一起討論技術，掃描和長按下方的二維碼可快速關注我們。或搜索微信公衆號:JANiubility。
公衆號：JANiubility
WebView 用來顯示網頁的一個View，它使用WebKit渲染引擎顯示web頁面，可以加載在線的或者本地的html頁面，WebView可以對頁面進行一系列操作，如歷史頁面的向前、向後，放大和縮小，執行文本搜索，與JS交互等等；
在使用Webview時，請記得在AndroidManifest.xml文件中聲明INTERNET權限：
<uses-permission android:name="android.permission.INTERNET" />默認情況下，WebView不支持JavaScript，web頁面的錯誤也會被忽略，如果只是用Webview來顯示網頁而不用交互，默認配置就可以了，如果需要交互，就需要自定義配置了。
WebView初始化及加載URL
1、通過XML初始化：
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>或者直接New：
WebView webview = new WebView(this);2、加載URL：
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");
或者可以直接加載Html：
String summary = "<html><body>You scored <b>192</b> points.</body></html>";
myWebView.loadData(summary, "text/html", null);如果在加載URL的時候想添加Header信息，可以複寫loadUrl()方法，如：
@Override public void loadUrl(String url) {
Map<String, String> map = new HashMap<String, String>();
map.put("ajax", "true");
map.put("appversion", SharedPreferencesUtil.getAppVersion(getContext()));
map.put("clientid", SharedPreferencesUtil.getClientId(getContext()));
loadUrl(url, map);
}
WebSettings
WebSettings 中可以對WebView進行一系列配置，如：
WebSettings settings = getSettings(); //默認是false 設置true允許和js交互
settings.setJavaScriptEnabled(true); // WebSettings.LOAD_DEFAULT 如果本地緩存可用且沒有過期則使用本地緩存，否加載網絡數據 默認值
// WebSettings.LOAD_CACHE_ELSE_NETWORK 優先加載本地緩存數據，無論緩存是否過期
// WebSettings.LOAD_NO_CACHE 只加載網絡數據，不加載本地緩存
// WebSettings.LOAD_CACHE_ONLY 只加載緩存數據，不加載網絡數據
//Tips:有網絡可以使用LOAD_DEFAULT 沒有網時用LOAD_CACHE_ELSE_NETWORK
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //開啓 DOM storage API 功能 較大存儲空間，使用簡單
settings.setDomStorageEnabled(true); //設置數據庫緩存路徑 存儲管理複雜數據 方便對數據進行增加、刪除、修改、查詢 不推薦使用
settings.setDatabaseEnabled(true);
final String dbPath = context.getApplicationContext().getDir("db", Context.MODE_PRIVATE).getPath();
settings.setDatabasePath(dbPath); //開啓 Application Caches 功能 方便構建離線APP 不推薦使用
settings.setAppCacheEnabled(true);
final String cachePath = context.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
settings.setAppCachePath(cachePath);
settings.setAppCacheMaxSize(5 * 1024 * 1024);
Webview中可以設置的幾種緩存對比：
WebviewClient
WebCromeClient常用方法：
1、shouldOverrideUrlLoading(WebView view, String url)
在API 24以後過時，當一個url即將被webview加載時，給Application一個機會來接管處理這個url，方法返回true代表Application自己處理url；返回false代表Webview處理url。
舉個例子，項目中需要處理傳過來的URL是一個事件還是一個HTTP鏈接，可以通過自定義協議頭 (nativeapi://) 來過濾，如：
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Uri uri = Uri.parse(url);
String scheme = uri.getScheme();
if (TextUtils.isEmpty(scheme)) return true;
if (scheme.equals("nativeapi")) {
//如定義nativeapi://showImg是用來查看大圖，這裏添加查看大圖邏輯
return true;
} else if (scheme.equals("http") || scheme.equals("https")) {
//處理http協議
if (Uri.parse(url).getHost().equals("www.example.com")) {
// 內部網址，不攔截，用自己的webview加載
return false;
} else {
//跳轉外部瀏覽器
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
context.startActivity(intent);
return true;
}
} return super.shouldOverrideUrlLoading(view, url);
}注：如果使用的是Post請求方式，則此方法不會被回調
2、shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
在API 24以後新加的，使用同上。
3、shouldInterceptRequest(WebView view, String url)
在API 21以後過時，通知Application加載資源的請求並返回請求的資源，如果返回值是Null，Webview仍然會按正常加載資源；否則返回的數據將會被使用。
注：回調發生在子線程中,不能直接進行UI操作
4、shouldInterceptRequest(WebView view, WebResourceRequest request)
在API 21以後新加，使用同上。
5、onPageStarted(WebView view, String url, Bitmap favicon)
通知Application頁面已經開始加載資源，頁面加載過程中，onPageStarted至多會被執行一次。
6、onPageFinished(WebView view, String url)
通知Application頁面已經加載完畢。
7、onReceivedError(WebView view, int errorCode, String description, String failingUrl)
通知Application有錯誤發生，這些錯誤是不可恢復的(即主要的資源不可用)。errorCode參數對應於一個ERROR_ *常量
WebCromeClient
1、onProgressChanged(WebView view, int newProgress)
通知Application的加載進度，newProgress取值範圍[0,100]，可以通過這個方法來編寫一個帶加載進度條的Webview，具體例子請參考：Android 編寫一個帶進度條的Webview
2、onReceivedTitle(WebView view, String title)
當加載頁面標題有改變時會通知Application，title即爲新標題。
控制Webview加載歷史網頁
WebView重寫URL加載時,它會自動累積的歷史訪問的web頁面。可以通過向後goBack()和向前goForward()。
舉例，可以在Activity中的回退鍵控制向後回退到前一個頁面：
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// Check if the key event was the Back button and if there's history
if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
webview.goBack();
return true;
} // If it wasn't the Back key or there's no web page history, bubble up to the default
// system behavior (probably exit the activity)
return super.onKeyDown(keyCode, event);
}
Webview和Js交互
1、Js調用Android接口：
public class WebAppInterface {
Context mContext;
/** Instantiate the interface and set the context */
WebAppInterface(Context c) {
mContext = c;
} /** Show a toast from the web page */
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}
SDK>=17（Android4.2）以上，必須添加@JavascriptInterface聲明，然後通過 addJavascriptInterface() 方式供Js調用，如：
webView.addJavascriptInterface(new WebAppInterface(this), "android");通過上面的配置，就可以在Js中調用了：
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
function showAndroidToast(toast) {
//調用Android中的showToast方法
Android.showToast(toast);
}</script>2、Android調用Js的接口：
可以通過webview.loadUrl("javascript:JsMethod()")方式加載Js接口，如果有參數，直接加到JsMethod()裏面即可，下面封裝了兩個方法，分別是加載帶參數和不帶參數的Js函數：
/**
* 加載帶參數的JS函數
*
* @param JsName JS函數名
* @param params 不定參數
*/
public void loadJSWithParam(String JsName, String... params) {
String TotalParam = "";
for (int i = 0; i < params.length; i++) {
if (i == params.length - 1) {
//最後一個
TotalParam += (params[i]);
} else {
TotalParam += (params[i] + "','");
}
} this.loadUrl("javascript:" + JsName + "('" + TotalParam + "')");
} /**
* 加載不帶參數的JS函數
*
* @param JsName JS函數名
*/
public void loadJS(String JsName) {
this.loadUrl("javascript:" + JsName + "()");
}
Webview的一些優化和遇到的坑
1、Webview打開一個鏈接，播放一段音樂，退出Activity時音樂還在後臺播放，可以通過在Activity的onPause中調用webview.onPause()解決，並在Activity的onResume中調用webview.onResume()恢復，如下：
@Override
protected void onPause() {
h5_webview.onPause();
h5_webview.pauseTimers();
super.onPause();
} @Override
protected void onResume() {
h5_webview.onResume();
h5_webview.resumeTimers();
super.onResume();
}Webview的onPause()方法官網是這麼解釋的：
Does a best-effort attempt to pause any processing that can be paused safely, such as animations and geolocation. Note that this call does not pause JavaScript. To pause JavaScript globally, use pauseTimers(). To resume WebView, call onResume().
通知內核嘗試停止所有處理，如動畫和地理位置，但是不能停止Js，如果想全局停止Js，可以調用pauseTimers()全局停止Js，調用onResume()恢復。
2、5.0 以後的WebView加載的鏈接爲Https開頭，但是鏈接裏面的內容，比如圖片爲Http鏈接，這時候，圖片就會加載不出來，解決方法：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
webSetting.setMixedContentMode(webSetting.getMixedContentMode());
}原因是5.0之後不支持Https和Http的混合模式，具體可參看：Android5.0 WebView中Http和Https混合問題
3、WebView與JavaScript相互調用時，如果是debug沒有配置混淆時，調用時沒問題的，但是當設置混淆後發現無法正常調用了，解決方法：
在proguard-rules.pro文件中配置：
-keepattributes *Annotation*
-keepattributes *JavascriptInterface*
-keep public class org.mq.study.webview.DemoJavaScriptInterface{
public <methods>;
}如果是內部類：
-keepattributes *Annotation*
-keepattributes *JavascriptInterface*
-keep public class org.mq.study.webview.webview.DemoJavaScriptInterface$InnerClass{
public <methods>;
}
Java和Android架構
歡迎關注我們，一起討論技術，掃描和長按下方的二維碼可快速關注我們。或搜索微信公衆號:JANiubility。
公衆號：JANiubility
