視頻教程  > 進階班教程  > 安卓

Android熱門技術-WebView

香港彩票透码 www.kptln.icu WebView使用進階

經過這么多的發展,目前的Android應用開發模式已經有了很多的改變,除了有原來的原生應用開發模式,隨著HTML5等前端技術的進步,也催生了多種開發模式。比如說目前非?;鴇腘ative+web混合模式,其實就是在開發某個頁面的時候,經?;岣?,我們就可以使用網頁的形式將頁面的內容展示,應用使用網頁進行交互。本質上來說,還是內嵌了一個網頁。

這種做法有什么優勢呢?

  • 1 開發方便,網頁開發的成本要比原生開發應用的成本低

  • 2 發布方便,如果我們的APP上線后,我們有了新的業務需求,開發完成后,我們只能更新客戶端或者使用熱修復等技術,但是使用Web的方式開 發的頁面,直接將新的頁面放上線上即可。


有優勢的同時肯定也有劣勢:

  • 1 用戶體驗差,由于目前的前端技術暫時無法和原生的應用相比,所以開發出來的頁面與原生的頁面還是有差距

  • 2 流量使用的多。



適合的場景:

  • 1 信息展示的頁面。HTML+CSS提供了強大的排版能力,能夠很方便的開發出需要的頁面。 

  • 2 電商行業的活動頁面。因為經常性的更改,網頁的靈活性非常適合這種情況。

講了這么多,我們知道了Web在我們現在開發的重要位置,那我們怎么才能開發出開始混合模式的開發呢?我們先介紹一個重要的系統控件給大家。


1 WebView

1.1 WebView介紹 

WebView是混合開發模式的主角,我們使用這個控件來進行加載,控制網頁,也是我們需要詳細掌握的一個系統控件。

1.png

從上面這個圖片上面我們可以看到,和大部分控件一樣,WebView繼承與View,也就是一個展示內容的控件。 

我們來看看怎么使用WebView


1.2 loadUrl 加載一個網頁文件

2.png


WebView提供了一個方法讓我們加載一個網頁。這個網頁可以是線上的網頁,可以是本地的網頁。 首先在布局文件中添加一個WebView

3.png

我們嘗試加載一個QQ的首頁

4.png

5.png


發現無法加載網絡的網頁,記得添加網絡權限。

6.png


7.png


這就是我們最簡單的使用WebView的方法,我們通過網絡加載一個頁面。

除了網絡的網頁之外,WebView也可以加載本地頁面。下面我就來教大家如何加載一個本地的網頁。

我們一般都會把本地的網頁放置在assert文件夾下面。默認情況下,項目是不會帶assert文件的,我們可以自己創建文件夾,也可以使用as來幫我們創建。

8.png

9.png


創建完成后我們可以在main文件夾找到我們的assets,我們常常在這個文件夾內部放置一些額外的數據,如數據庫,網頁的等等。 

我們創建一個簡單的網頁,這個網頁就顯示一個文字與一個網絡圖片

10.png


我們將網頁放置到assets文件夾內部

11.png



接著我們來加載這個網頁


loadUrl的兩種用法

  • 1 直接加載某個網址

  • 2 通過file:///android_asset/文件名,加載網頁


assetsres 文件夾的區別


拓展知識:

assets 與 res的區別 我們知道我們在開發Android應用的過程過,需要使用大量的資源文件,如果我們放置在res文件下,它會生成一個獨立的id,而在assets文件夾下不會 

如果我們需要獲取assets的文件,我們可以使用getAssets().open打開一個文件。下面是一個加載assets的代碼

12.png


13.png



loadDate加載HTML代碼 

上面我們學習了怎么加載一個網頁,我們在上面的例子加載的網頁都是一個完整的文件,但是在實際的開發過程中,我們可能會遇到這樣的需求,我們可

能需要動態的更改一些網頁的數據,再講網頁顯示出來,如果是一個完整的的網頁,我們可能會根據需要生成不同的HTML代碼,再加載到WebView中。 


WebView提供了兩個方法來加載網頁代碼

14.png

15.png

注意使用這個方法,如果HTML代碼里面有中文的話,可能會出現亂碼。我們必須在mini type里面添加這句話


16.png


loadDateWithBaseUrl加載html代碼 

一般我們在實際開發中不使用這個api,而是使用另外一個api


17.png


我們發現loadDataWithBaseURL 比loadData多了兩個參數

18.png



我們先看看baseUrl 是干嘛的。

19.png

我們看看上面的這個HTML代碼,里面有個圖片的地址,這個圖片的地址是一個絕對的地址,什么是絕對地址呢?就類型咱們的地址一樣,先是國家,再到 省,市,區,街道,再到門牌,絕對路徑代碼一個資源的查找路徑,根據這個路徑我們就可以找到這個圖片,但是有時我們的HTML代碼寫的是相對路徑, 比如下面的的代碼


20.png


比如這個圖片需要加載的圖片叫做abc.png,但是WebView不知道去哪里加載這個圖片。這個時候baseUrl就來干活了,我們告訴這個WebView當出現找不 到資源的時候去哪里找。

21.png


22.png

接著我們把這張圖片放入assets文件夾


23.png


我們要WebView從assets文件夾中加載資源怎么辦呢?

24.png

如果你的圖片放置公司的服務器怎么辦?將baseUrl指向你們的公司的服務器,比如你的圖片放在www.kptln.icu這個服務器的abc文件夾,那這個baseUrl怎么 寫呢?//www.kptln.icu/abc ,webview就會去//www.kptln.icu/abc這個路徑加載資源了。



處理跳轉

經過上面的教學,大家應該學會怎么加載一個HTML頁面,大家可以根據需求來選擇不同的方式加載頁面。下面我們來講解一下如何出來WebView的跳轉。 我們知道,我們在瀏覽一個網頁的時候,點一個鏈接后,會跳轉到另外一個網頁,我們看看如果在手機上面這樣會有什么問題。 當我們加載了www.qq.com這個網頁的時候,我們點擊一個鏈接,我們發現應用會跳轉系統的瀏覽器,非常影響體驗。


25.png


我們希望的是點擊某條鏈接后,WebView會自動打開這個頁面,當我們點擊返回鍵時,WebView會返回上一個頁面。應該怎么做呢?

26.png

27.png


historyUrl

講完跳轉后,我們來回來剛剛那個loadDatawithBaseUrl這個方法,剛剛我們講這個方法的時候最后一個參數沒有沒有和大家講,叫做historyUrl 我們來看看這個HTML代碼

28.png


當我們點擊了圖片后,網頁跳轉到www.baidu.com,但是當我們回到上一頁的時候,是一個空白頁面,為什么呢,因為我們這里的historyUrl傳遞的是null, 空的意思就是返回到一個空的頁面,我們可以指定我們返回的頁面。

29.png


其他方法

  • webView 除了上面的方法,我們還有一些其他的常用的方法 reload() 刷新當前頁面

  • getTitle() 獲取當前頁面的標題


WebViewClient

WebViewClient是webview的一個輔助類,我們經常使用WebViewClient這個類來監控WebView加載網頁的狀態。 下面的是我們在開發中經?;崾褂玫姆椒?。

  • onLoadResource (WebView view, String url)

    網頁加載網頁各種資源的回調,比如你的網頁使用了各種圖片和css文件與js文件

29.png


30.png

    我們可以使用這個方法監控資源加載的情況。

  • onPageStarted

    網頁開始加載的回調

  • onPageFinished

    網頁加載完成的回調


31.png

32.png


  • onReceivedError(WebView view, int errorCode, String description, String failingUrl) 頁面加載出錯的方法 

  • onReceivedError(WebView, WebResourceRequest, WebResourceError)

33.png

34.png


  • shouldOverrideUrlLoading

處理網頁內部的跳轉。

35.png


WebSettings

webview的設置類,能夠設置webview的各種詳細參數

  • setAllowFileAccess(boolean allow) 

    設置是否使用file協議訪問網頁,默認是開啟的。注意使用這個協議,可能照成應用的安全問題。 

  • setBuiltInZoomControls(boolean enabled)

    設置是否使用webview自帶的縮放功能。

  • setDefaultFontSize(int size)

    設置頁面的文字大小,設置后網頁的字體大小全部變大


36.png


  • setJavaScriptEnabled(boolean flag) 

    默認webview是不支持網頁的javaScript,設置webview是否執行頁面的js方法。 setDatabaseEnabled(boolean flag)

  • setDomStorageEnabled(boolean flag);

    html5支持數據庫的功能,數據庫有兩種第一種官方的規范,DOM Storage,另外一種是第三方api ,Web SQL Database。我們先來講講這兩種數 據庫存儲方式。對于以前來說,一個Web應用要存儲數據,大多會放置cookie中,但是cookie有一個限制,就是內容只能4K,且容易被篡改。所以 在Html5內增加存儲的概念,這個就是DOM Storage,DOM Storage 分為 sessionStorage 和 localStorage。 localStorage 對象和 sessionStorage 對象使用方法基本相同,它們的區別在于作用的范圍不同。sessionStorage 用來存儲與頁面相關的數據,它在頁面關閉后無法使用。而 localStorage 則持久存在,在頁面關閉后也可以使用。


37.png


38.png


上面是在pc端使用的情況,我們來看看在手機上使用會是什么情況。我們發現這個代碼在手機的webview上面是無法正常執行的。為什么呢?因為 我們沒有設置webview對數據的執行。

39.png

設置上面的支持后,我們的頁面就可以正常的工作了。我們來看看Dom數據庫的存儲情況。我們打開應用的存儲路徑 /data/data/應用包名,發現無 法找到相應的數據庫。

40.png

40.png

41.png


  • setCacheMode

    設置返回鍵的處理,是否使用緩存加載頁面,LOAD_DEFAULT(先從cache加載,沒有且沒有過期,再去網絡加載), 

    LOAD_CACHE_ELSE_NETWORK(先從cache加載,如果存在,不管有沒有過期,都不會再去網絡加載), LOAD_NO_CACHE(不使用cache) , LOAD_CACHE_ONLY(只使用cache)

42.png




WebChromeClient

WebChromeClient處理js交互與網頁內容的類,使用這個類,可以讓android的webview輕松的獲取到各種js的事件的回調

  • onJsAlert Alert()函數是JavaScript中最常見的方法,我們常常使用這個方法在網頁上面來彈出對話框與提示框。默認情況,webview不會響應Alert

方法。

    如果想響應alert的話,需要實現WebChromeClient的onJsAlert方法,這個方法有兩個返回值:

    1 不設置webChromerClient,不響應alert方法

    2 return true,不會彈出系統的對話框。需要自己處理。注意如果是Return true的情況,一定要出來完JsResult,調用confirm();或者cancel();否則 下次就不會攔截這個事件了。

    3 return false 或 return super, 會彈出默認的Alert對話框 

接收網頁的alert事件

43.png



  • onJsPrompt

prompt 是JavaScriptde 輸入對話框,可以接受一個輸入的值,下面這個例子就是在網頁上面顯示一個promt的例子

44.png 


45.png


如果想響應prompt的話,需要實現WebChromeClient的onJsPrompt方法,這個方法有兩個返回值: 

1 不設置webChromerClient,不響應prompt方法

2 return false 或 return super, 會彈出默認的Alert對話框

46.png

47.png


3 return true,不會彈出系統的對話框。需要自己處理。注意如果是Return true的情況,一定要處理完JsPromptResult,調用confirm(返回值);或者 cancel();否則下次就不會攔截這個事件了。

1497432373430939.png

48.png


  • onJsConfirm 

    用來處理confirm方法

49.png


    用法與onJsAlert用法類似 

  • onReceivedTitle 

    接收網頁的標題 

  • onProgressChanged 

    頁面加載的百分比

50.png


  • onExceededDatabaseQuota

    在上面的一個內容里面,我們將到了html5數據庫,但是我們只講了DOM Storage,還沒有將Web sql Storage,如果你的網頁使用的Web sql

Storage,除了要配置DOM Storage的方法外還需要你重寫onExceededDatabaseQuota。 

    為這個Web sql Storage申請新的空間。

51.png


編寫一個網頁使用Web sql Storage

52.png

53.png


54.png

55.png


Java代碼與JavaScript交互

我們在前面的課程學會怎么加載一個網頁,但是我們在應用最重要的就是完成頁面的交互功能,比如說點擊事件等等。但是界面是html代碼寫的,我們怎 么知道用戶做了什么操作呢?這個時候,我們可以通過webView提供給我的Api來進行實現html/JavaScript與Java代碼的交互,我們今天介紹5種方法來交互


  • addJavascriptInterface(Object object, String name)(最常用) 

    1 設置 addJavascriptInterface

56.png


2 在addJavascriptInterface的方法上面增加注解

57.png


3 編寫給JavaScript調用的方法,并增加注解

58.png


4 在javaScript中調用該方法

59.png


  • onJsAlert 通過alert()方法傳遞參數到Java的onJsAlert方法

    1 為webview 增加webChrome

60.png


    2 在網頁中使用alert傳遞值

61.png


  • onJsConfirm, 與上面的方式相同,在JavaScrpit中將alert改為confirm 

  • onJsPrompt

    1 重寫onJsPrompt方法,接收message與defaultmessage方法。

62.png


2 在html中通過promt傳遞值過來。運算完畢后接受java的返回值。 

63.png


  • shouldOverrideUrlLoading

可以通過捕獲頁面的跳轉進行數據的傳遞。定義安全的協議名稱,當出現指定的安全的協議后,進行相應的處理。

64.png

65.png

以上是JavaScript調用Java代碼的方法,我們接下來講講如何通過Java代碼調用JavaScript的方法。 

我們可以使用webView.loadUrl 來調用javascript方法。調用的格式為(webView.loadUrl(javascript:方法名))。


WebView 與 Cookie

在網站開發的時候,我們常常需要處理這樣的需求,比如我在app登陸了,在使用webview加載一個網頁,網頁就不需要再登陸了。在瀏覽器的時代,有 這樣一個技術來實現這個需求,就是使用cookie。 cookie是一個本地存放數據的機制。常見于網頁開發中。如網頁把一些文本信息存在硬盤。下面我們來 學習一下如何在Webview中保存cookie。

下面我們以一個例子來學習如何在本地保存Cookie,應用的界面如下

66.png


我們編寫一個工具來獲取網絡數據

67.png


編寫點擊邏輯

68.png



跳轉的頁面的布局

69.png


將cookie添加到數據庫后訪問相應的網頁

70.png




安全性的問題

webview的開發給我們帶了很大的便利同時,也帶了很多風險。最容易出現的問題有兩個: 

1 遠程代碼執行安全漏洞

在android 4.2版本以下的手機有一個問題就是,webview會被JavaScript注入,造成手機出現信息安全的問題,比如下載病毒,發送短信等等。問題就出 在addJavascriptInterface方法。JavaScript通過調用這個接口可以直接操作本地的JAVA接口。

google在4.2的版本上面解決了這個問題,解決的方法是在被js調用的方法上面加上一個聲明, @JavascriptInterface ,但是4.2版本以下的手機就沒有提 出官方的解決方法。目前來說在4.2版本以下的手機能夠采用以下幾個方法來解決安全問題

  • 1 通過自定義url來進行通信,我們可以重寫 shouldOverrideUrlLoading 方法來接收參數 

  • 2 通過js通過prompt方法傳遞參數到 onJsPrompt

71.png


通過js的漏洞獲取到java運行時的內容,接著執行命令,理論上可以干任何事情,竊取通訊錄,安裝廣告應用。



2 app跨源攻擊 

webView支持file協議,如果應用有sd卡的權限,這就意味著webView能夠去讀取到其他應用的私有的文件。目前跨源攻擊的主要問題是: 

    1 webview 獲取到其他應用的私密文件和信息,如保存的密碼,收藏夾,歷史記錄

    2 webview 在文件內執行JavaScript,http、file、https等協議,將竊取的信息上報 我們看看下面這個例子

setAllowFileAccessFromFileURLs() 設置允許通過file協議訪問其他的文件 setAllowUniversalAccessFromFileURLs() 設置允許通過file協議訪問http、https、file等協議


72.png

73.png

模擬盜取文件和模擬數據上報



內存的問題

    這幾年H5的發展速度很快,使得Hybrid混合開發越來越流行,而webview也成為了開發中必備的元素。但是我們知道WebView在加載頁面時,會占用非 常大的內存,無論是iOS還是Android系統上,加載一個Web頁面一般需要用到12M左右,而如果我們不及時清理WebView的內存,那最后可能會隨著內存 消耗的不斷增加而發生OOM(Out Of Memory)導致程序崩潰.

我們可以使用一個獨立的進程來加載這個activity,當這個頁面退出后,我們結束這個進程,就算發生了泄露也不會影響到應用的進程。




廣場舞大媽說,如果跳的足夠快,她的孤獨就追不上她。

拾荒的大叔說,如果翻垃圾翻得足夠仔細,便能找回丟失的自己。

碰瓷的大爺說,只要演的夠逼真,就能騙過匆匆流逝的時光。

只要堅持學習Android熱門技術,就一定能夠改變人生和命運!


要WebView視頻.jpg










pk10免费永久计划软件 大小怎么买稳赚 百人牛牛官网下载 北京pk赛车计划3码 下载荣耀棋牌 打老虎机有什么规律吗 重庆时时开彩结果官网 一百个微信挂号赚钱 多宝时时彩平台 六肖怎样才算中 重庆时时诈骗最新案 十期 倍投稳赚方案图片 北京塞车开奖结果 麻将怎么玩 大公鸡七星彩旧版开奖软件 2018炸金花下载大全