前言
昨天路過公司外面花園時候，不知覺臘梅已經開花了，才發覺春天來了。來城市生活這幾年，完全忘記了時令的交替，只知道冷了加衣服，熱了脫衣服。好久沒感受到春天的氣息了，內心泛起一絲惆悵。城市的生活總是那么匆忙，多了一分煩躁，少了一分寧靜。
那金黃色的油菜花，粉色的桃花，白色的李子花櫻花 . . . 兒時 . . .
WebView簡介
純原生app開發，時間成本太高，現在市面上已經很多混合式開發app。那么什么是混合式？指的是在我們的頁面中嵌入html網頁。Android當中給我們提供了WebView實現這一功能。
有關WebView的一些常見方法，我這里就不再講解，網上這部分資源太多。接著我們來看看以下幾個案列。
參考文獻：
案例一header
直接上需求效果圖：
需求：WebView添加header，h5讀取頭部，并且隱藏底部菜單欄。
需要添加的header數據：ECR-APP:android
我們平時大多數情況使用的是loadUrl(String url)加載方法，下面我們來看另一個loadUrl構造方法。
loadUrl(String url, Map<String, String> additionalHttpHeaders)
參數additionalHttpHeaders字面上的意思是：額外的http頭部信息。這個方法是Android 2.2 （也就是API 8），WebView新增加了一個接口方法，就是為了便于我們加載網頁同時又可以發送HTTP頭信息的。
看看具體的使用：
HashMap<String, String> header = new HashMap<>();
header.put("ECR-APP", "android");
mWebView.loadUrl("http://m.test.366ec.net/Default2c.aspx",header);
馬上運行效驗一下：
網頁上底部的菜單已經去掉了。
案例二cookie
cookie用于記錄用戶登錄信息，用戶下次進入需要登錄的界面不再需要重復登錄。
先看看需求：
會一直出現登錄界面。那么怎么解決多次登錄問題？WebView會將加載的url通過http請求傳輸到服務器。那么Cookie信息會通過header傳遞過去。
設置cookie代碼如下：
private void syncCookieToWebView(String url, List<String> cookies) {
CookieSyncManager.createInstance(this);
CookieManager cm = CookieManager.getInstance();
cm.setAcceptCookie(true);
if (cookies != null) {
for (String cookie : cookies) {
cm.setCookie(url, cookie);//注意端口號和域名，這種方式可以同步所有cookie，包括sessionid
}
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
CookieManager.getInstance().flush();
} else {
CookieSyncManager.getInstance().sync();
}
}
以下是調用代碼：
List<String> cookies = new ArrayList<>();
//鍵值對類型 用等號（"="）連接 具體根據后臺給定
cookies.add("StoreManagerTicket=" + "加密token");//根據后臺協商而定
syncCookieToWebView("加載的地址", cookies);
CookieManager會將這個Cookie存入該應用程序/data/data/databases/目錄下的webviewCookiesChromium.db數據庫的cookies表中。打開網頁，WebView從數據庫中讀取該cookie值，放到http請求的頭部，傳遞到服務器。
運行一下，看看還會出現多次登錄的問題嗎？
跳轉正常，沒有出現多次登錄的問題。
案例三注入js
不知道你在項目中遇到這樣的場景沒有？手機端與h5交互，提供數據支持。如調本地相機，獲取到的圖片上傳到網頁；調用定位返回地址給網頁；調用二維碼掃描界面返回掃描結果等等。
如下，有這樣一個場景，網頁上有【掃描】圖標，點擊打開手機掃描界面，掃描成功后上傳掃描結果。那么在手機端一般會有如下方法：
JsOpenScanFunction(String callbackFunction)
參數callbackFunction表示掃描成功后webview.load調用的方法并且只有一個參數（掃描結果）。
一般前端h5會這樣進行調用Android手機端打開二維碼的方法：
//callback回調方法
window.JsInterface.JsOpenScanFunction(callback)
ios端會這樣調用：
window.webkit.messageHandlers.JsOpenScanFunction.postMessage(callback)
在h5端會分步處理，無疑會增加開發人員的工作量，試想一下，如果交互的地方很多，那么h5端開發人員作何感想？而且后期的維護也是一件非常繁瑣的事情，就沒有更好的方案嗎？
如果h5端可以像調用本地方法那樣簡單調用手機端方法，那不是非常fashion。
那么就需要分別在Android端和ios端分布注入js代碼，方便h5端調用。
注入的方式如下：
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
if (mIsAddJsCode) {//默認true
mIsAddJsCode = false;
mWebView.loadUrl("javascript:" + "function JsOpenScanFunction(s) {\n window.JsInterface.JsOpenScanFunction(s);\n}");
}
}
在onPageStarted方法下注入js方法：
function JsOpenScanFunction(s) {
window.JsInterface.JsOpenScanFunction(s);
}
這樣h5只需要調用JsOpenScanFunction(s)方法就可以實現不同平臺調用二維碼掃描的功能。從此媽媽在已不擔心多端調用的問題了。
注意：JsOpenScanFunction(s) 方法，需要前端和移動端事先約定。
文章就講到這里了，如果有什么不對的地方還請指出，有什么好的意見請給我留言，我會在第一時間給予回復。
樓主不才，新建了QQ群討論技術，歡迎大家的加入 478720016
我非常喜歡【平凡世界】里的一句話。我是一個平凡的人，但一個平凡的人，也可以過得不平凡。
