前言

昨天路過公司外面花園時候，不知覺臘梅已經開花了，才發覺春天來了。來城市生活這幾年，完全忘記了時令的交替，只知道冷了加衣服，熱了脫衣服。好久沒感受到春天的氣息了，內心泛起一絲惆悵。城市的生活總是那么匆忙，多了一分煩躁，少了一分寧靜。

那金黃色的油菜花，粉色的桃花，白色的李子花櫻花 … 兒時 …

WebView簡介

純原生app開發，時間成本太高，現在市面上已經很多混合式開發app。那么什么是混合式？指的是在我們的頁面中嵌入html網頁。Android當中給我們提供了WebView實現這一功能。

有關WebView的一些常見方法，我這里就不再講解，網上這部分資源太多。接著我們來看看以下幾個案列。

參考文獻：

WebView詳解與簡單實現Android與H5互調

案例一header

直接上需求效果圖：

需求：WebView添加header，h5讀取頭部，并且隱藏底部菜單欄。

需要添加的header數據：ECR-APP:android

我們平時大多數情況使用的是loadUrl(String url)加載方法，下面我們來看另一個loadUrl構造方法。

參數additionalHttpHeaders字面上的意思是：額外的http頭部信息。這個方法是Android 2.2 （也就是API 8），WebView新增加了一個接口方法，就是為了便于我們加載網頁同時又可以發送HTTP頭信息的。

看看具體的使用：

馬上運行效驗一下：

網頁上底部的菜單已經去掉了。

案例二cookie

cookie用于記錄用戶登錄信息，用戶下次進入需要登錄的界面不再需要重復登錄。

先看看需求：

會一直出現登錄界面。那么怎么解決多次登錄問題？WebView會將加載的url通過http請求傳輸到服務器。那么Cookie信息會通過header傳遞過去。

設置cookie代碼如下：

以下是調用代碼：

CookieManager會將這個Cookie存入該應用程序/data/data/databases/目錄下的webviewCookiesChromium.db數據庫的cookies表中。打開網頁，WebView從數據庫中讀取該cookie值，放到http請求的頭部，傳遞到服務器。

運行一下，看看還會出現多次登錄的問題嗎？

跳轉正常，沒有出現多次登錄的問題。

案例三注入js

不知道你在項目中遇到這樣的場景沒有？手機端與h5交互，提供數據支持。如調本地相機，獲取到的圖片上傳到網頁；調用定位返回地址給網頁；調用二維碼掃描界面返回掃描結果等等。

如下，有這樣一個場景，網頁上有【掃描】圖標，點擊打開手機掃描界面，掃描成功后上傳掃描結果。那么在手機端一般會有如下方法：

參數callbackFunction表示掃描成功后webview.load調用的方法并且只有一個參數（掃描結果）。

一般前端h5會這樣進行調用Android手機端打開二維碼的方法：

ios端會這樣調用：

在h5端會分步處理，無疑會增加開發人員的工作量，試想一下，如果交互的地方很多，那么h5端開發人員作何感想？而且后期的維護也是一件非常繁瑣的事情，就沒有更好的方案嗎？

如果h5端可以像調用本地方法那樣簡單調用手機端方法，那不是非常fashion。

那么就需要分別在Android端和ios端分布注入js代碼，方便h5端調用。

注入的方式如下：

在onPageStarted方法下注入js方法：

這樣h5只需要調用JsOpenScanFunction(s)方法就可以實現不同平臺調用二維碼掃描的功能。從此媽媽在已不擔心多端調用的問題了。

注意：JsOpenScanFunction(s) 方法，需要前端和移動端事先約定。

文章就講到這里了，如果有什么不對的地方還請指出，有什么好的意見請給我留言，我會在第一時間給予回復。

樓主不才，新建了QQ群討論技術，歡迎大家的加入 478720016

我非常喜歡【平凡世界】里的一句話。我是一個平凡的人，但一個平凡的人，也可以過得不平凡。