為什么要學習與H5互調?
微信,QQ空間等大量軟件都內嵌了H5,不得不說是一種趨勢。與H5互調可以讓我們的實現混合開發,至于混合開發就是在一個App中內嵌一個輕量級的瀏覽器,一部分原生的功能改為Html 5來開發。
優勢:使用H5實現的功能能夠在不升級App的情況下動態更新,而且可以在或iOS的App上同時運行,節約了成本,提高了開發效率。
原理:其實就是Java代碼和之間的調用。
開局插入一張文章的目錄結構:
簡介
要實現與H5互調,是一個很重要的控件,可以很好地幫助我們展示html頁面,所以有必要先了解一下。
一丶常用方法
//加載assets目錄下的test.html文件 webView.loadUrl("file:///android_asset/test.html"); //加載網絡資源(注意要加上網絡權限) webView.loadUrl("http://blog.csdn.net");
實現對網頁中超鏈接的攔截(比如如果是極客導航的主頁,則直接攔截轉到百度主頁): 當點擊頁面中的鏈接后,會在加載URL前回調ding( view, url)方法,一般點擊一個鏈接此方法調用一次。
webView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if("http://www.jikedaohang.com/".equals(url)) { view.loadUrl("https://www.baidu.com/"); } return true; } });
關于ding返回值的誤區:網上很多解釋是 true代表在本中打開鏈接, false代表調用系統瀏覽器打開鏈接。其實只要設置了,則就不會調用系統瀏覽器。 那么ding的返回值到底代表什么呢? true,則在打開新的url時就不會再加載這個url了,所有處理都需要在中操作,包含加載; false,則系統就認為上層沒有做處理,接下來還是會繼續加載這個url的;默認 false。具體的區別展示如下: 加載百度主頁,設置后,重寫ding( view, url)方法,第一張是返回false的截圖(點擊后正常跳轉),第二章是返回true的截圖(點擊無反應,如果希望能夠跳轉,則需要我們自己進行處理):
還有一點需要注意的是,如果我們攔截了某個url,那么 false 和 true區別不大,所以一般建議 false。加載網頁時替換某個資源(比如在加載一個網頁時,需要加載一個logo圖片,而我們想要替換這個logo圖片,用我們目錄下的一張圖片替代) 我們知道我們在加載一個網頁的同時也會加載js,css,圖片等資源,所以會多次調用st方法,我們可以在st中進行圖片替換。 注意:st有兩個重載: ① st ( view, url) 【已過時】 ② st ( view, ) 這兩種方法主要是第二個參數的不同, 將能夠獲取更多的信息,提供了(),,等方法。這里主要是為了展示效果,使用了第一種回調方法。實現方法如下:
mWebView.setWebViewClient(new WebViewClient(){ @Override public WebResourceResponse shouldInterceptRequest(WebView view, String url) { WebResourceResponse response = null; if (url.contains("logo")) { try { InputStream logo = getAssets().open("logo.png"); response = new WebResourceResponse("image/png", "UTF-8", logo); } catch (IOException e) { e.printStackTrace(); } } return response; } });
設置開始加載網頁、加載完成、加載錯誤時處理
webView.setWebViewClient(new WebViewClient() { @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); // 開始加載網頁時處理 如:顯示"加載提示" 的加載對話框 ... } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // 網頁加載完成時處理 如:讓 加載對話框 消失 ... } @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { super.onReceivedError(view, errorCode, description, failingUrl); // 加載網頁失敗時處理 如:提示失敗,或顯示新的界面 ... } });
處理https請求,為處理ssl證書設置默認是不處理https請求的access數據庫參數查詢,需要在子類中重寫父類的函數
webView.setWebViewClient(new WebViewClient() { @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); // 接受信任所有網站的證書 // handler.cancel(); // 默認操作 不處理 // handler.handleMessage(null); // 可做其他處理 } });
顯示頁面加載進度在子類中重寫父類的函數,表示當前頁面加載的進度,為1至100的整數
webView.setWebChromeClient(new WebChromeClient() { public void onProgressChanged(WebView view, int progress) { setTitle("頁面加載中,請稍候..." + progress + "%"); setProgress(progress * 100); if (progress == 100) { //... } } });
加快HTML網頁加載完成速度(默認情況html代碼下載到后,開始解析網頁各個節點,發現有外部樣式文件或者外部腳本文件時,會異步發起網絡請求下載文件,但如果在這之前也有解析到image節點,那勢必也會發起網絡請求下載相應的圖片。在網絡情況較差的情況下access數據庫參數查詢,過多的網絡請求就會造成帶寬緊張,影響到css或js文件加載完成的時間,造成頁面空白過久。解決的方法就是告訴先不要自動加載圖片,等頁面后再發起圖片加載。)
//1.首先在WebView初始化時添加如下代碼 if(Build.VERSION.SDK_INT >= 19) { /*對系統API在19以上的版本作了兼容。因為4.4以上系統在onPageFinished時再恢復圖片加載時,如果存在多張圖片引用的是相同的src時,會只有一個image標簽得到加載,因而對于這樣的系統我們就先直接加載。*/ webView.getSettings().setLoadsImagesAutomatically(true); } else { webView.getSettings().setLoadsImagesAutomatically(false); } //2.在WebView的WebViewClient子類中重寫onPageFinished()方法添加如下代碼: @Override public void onPageFinished(WebView view, String url) { if(!webView.getSettings().getLoadsImagesAutomatically()) { webView.getSettings().setLoadsImagesAutomatically(true); } }
創建
class MyDownloadListenter implements DownloadListener{ @Override public void onDownloadStart(String url, String userAgent,String contentDisposition, String mimetype, long contentLength) { //下載任務...,主要有兩種方式 //(1)自定義下載任務 //(2)調用系統的download的模塊 Uri uri = Uri.parse(url); Intent intent = new Intent(Intent.ACTION_VIEW, uri); startActivity(intent); } }
給加入監聽
webview.setDownloadListener(new MyDownloadListenter());
public boolean onKeyDown(int keyCode, KeyEvent event) { //其中webView.canGoBack()在webView含有一個可后退的瀏覽記錄時返回true if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) { webView.goBack(); return true; } return super.onKeyDown(keyCode, event); } }
二丶配置
獲取對象
= .();
常用設置方法(1)支持js
.(true);
(2)設置緩存方式,主要有以下幾種: : 不使用網絡,只讀取本地緩存數據。 : 根據cache-決定是否從網絡上取數據。 : API level 17中已經廢棄, 從API level 11開始作用同模式。 : 不使用緩存,只從網絡獲取數據。 ORK:只要本地有,無論是否過期,或者no-cache,都使用緩存中的數據。
.(.);
(3)開啟DOM API功能(HTML5 提供的一種標準的接口,主要將鍵值對存儲在本地,在頁面加載完畢后可以通過 來操作這些數據。)
.(true);
(4)設置數據庫緩存路徑
.();
(5)設置 緩存目錄
.();
(6)設置默認編碼
.(“utf-8”);
(7)將圖片調整到適合的大小
.(false);
(8)支持縮放
.(true);
(9)支持內容重新布局
.(..);
(10)多窗口
.ws();
(11)設置可以訪問文件
.(true);
(12)當調用時為設置節點
.(true);
(13)設置支持縮放
.ls(true);
(14)支持通過JS打開新窗口
.(true);
(15)縮放至屏幕的大小
.ode(true);
(16)支持自動加載圖片
.(true);
三丶 的回調方法列表
主要用來輔助處理各種通知、請求等事件,通過方法設置。
(1)更新歷史記錄
ry( view, url, )
(2)應用程序重新請求網頁數據
( view, , )
(3)在加載頁面資源時會調用,每一個資源(比如圖片)的加載都會調用一次。
( view, url)
(4)開始載入頁面調用,通常我們可以在這設定一個的頁面,告訴用戶程序在等待網絡響應。
( view, url, )
(5)在頁面加載結束時調用。同樣道理,我們知道一個頁面載入完成,于是我們可以關閉 條,切換程序動作。
( view, url)
(6)報告錯誤信息
( view, int , , )
(7)獲取返回信息授權請求