Android WebView:這是一份 詳細 & 易懂的WebView學習攻略(含與JS互動、快取構建等)

Carson_Ho發表於2019-03-03

Android WebView:這是一份 詳細 & 易懂的WebView學習攻略(含與JS互動、快取構建等)


前言

  • 現在很多App裡都內建了Web網頁(Hybrid App),比如說很多電商平臺,淘寶、京東、聚划算等等,如下圖

    京東首頁

  • 那麼這種該如何實現呢?其實這是Android裡一個叫WebView元件實現

  • 今天,我將獻上一份全面 & 詳細的 WebView攻略,含具體介紹、使用教程、與前端JS互動、快取機制構建等等,希望您們會喜歡。


目錄

示意圖


1. 簡介

一個基於webkit引擎、展現web頁面的控制元件

a. Android 4.4前:Android Webview在低版本 & 高版本採用了不同的webkit版本的核心 b. Android 4.4後:直接使用了Chrome核心


2. 作用

  • Android 客戶端上載入h5頁面
  • 在本地 與 h5頁面實現互動 & 呼叫
  • 其他:對 url 請求、頁面載入、渲染、對話方塊 進行額外處理。

3. 具體使用

  • Webview的使用主要包括:Webview類 及其 工具類(WebSettings類、WebViewClient類、WebChromeClient類)

示意圖


4. WebView與 JS 的互動方式

  • Android WebView的使用中,與前端h5頁面互動的需求十分常見
  • AndroidJS 通過WebView互相呼叫方法,實際上是:Android 去呼叫JS的程式碼 + JS去呼叫Android的程式碼

二者溝通的橋樑是WebView

示意圖


5. 使用漏洞

  • WebView 使用過程中存在許多漏洞,容易造成使用者資料洩露等等危險,而很多人往往會忽視這個問題
  • WebView中,主要漏洞有3類:任意程式碼執行漏洞、密碼明文儲存漏洞、域控制不嚴格漏洞
  • 漏洞具體介紹 & 修復方式請看文章: Android:你不知道的 WebView 使用漏洞

6. 快取機制構建

  • Android WebView由於前端h5本身的原因,存在載入效率慢 & 流量耗費的效能問題,具體介紹如下:

示意圖

至此,關於Android WebView的所有知識講解完畢。


7. 總結

  • 本文全面講解了 WebView的相關知識,含具體介紹、使用教程、與前端JS互動、快取機制構建等等,相信你對Android WebView的使用已經非常熟悉了。
  • 關於WebView的系列文章希望對你有所幫助

Android開發:最全面、最易懂的Webview詳解

Android:你要的WebView與 JS 互動方式 都在這裡了

手把手教你構建 Android WebView 的快取機制 & 資源預載入方案

Android:你不知道的 WebView 使用漏洞


請幫頂點贊!因為你們的贊同/鼓勵是我寫作的最大動力!


歡迎關注carson_ho的微信公眾號

示意圖

示意圖

相關文章