1. 程式人生 > >App混合開發之WebView進行H5頁面基本操作

App混合開發之WebView進行H5頁面基本操作

現在淘寶、京東、聚划算、甚至於一些銀行的App都是利用原生加H5混合開發技術進行開發的,混合開發越來越成為App開發主流技術。WebView是android內嵌的Web頁面訪問元件,通過它可以輕鬆實現原生App程式碼和H5頁面的互動操作,還可以和Js相互呼叫,是混合開發(Hyprid App)常用的技術。Android的WebView在4.4後使用chrome核心,之前採用了不同的Webkit版本核心。(程式碼下載可進群交流:161154103)

一、用WebView載入網頁:

在進行程式碼之前需要給應用程式設定網路訪問許可權並把控制元件引入對應的容器:

許可權:

<uses-permission android:name="android.permission.INTERNET"/>

在容器內引入WebView控制元件:

<WebView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/webView"

/>

頁面載入具體的程式碼:

webView=(WebView)view.findViewById(R.id.webView);

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);//設定支援javascript

//開啟的具體地址,可以是百度、新浪等,這是載入的案秀雲提供的文章

webView.setWebViewClient(new WebViewClient(){

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;//返回值是true的時候控制去WebView開啟,為false呼叫系統瀏覽器或第三方瀏覽器

}

});

開啟的頁面如下:

其中loadurl函式有多種用法:

2、載入打包程式中的html頁面,html儲存在asset目錄下, webView.loadUrl("file:///android_asset/anxiuyun.html"); 

3、載入手機本地的html頁面 webView.loadUrl("content://com.android.htmlfileprovider/sdcard/anxiuyun.html"); 

4、載入 HTML 頁面的一小段內容 WebView.loadData(String data, String mimeType, String encoding) // 引數說明:引數1:需要擷取展示的內容 // 內容裡不能出現 ’#’, ‘%’, ‘’ , ‘?’ 這四個字元,若出現了需用 %23, %25, %27, %3f 對應來替代,否則會出現異常 // 引數2:展示內容的型別 // 引數3:位元組碼

設定支援JS程式碼:

webSettings.setJavaScriptEnabled(true);//設定支援javascript,如果不設定頁面中一些通過js動態呼叫資料就顯示不出來

設定用WebView開啟頁面還是呼叫系統瀏覽器或第三方瀏覽器開啟頁面:

webView.setWebViewClient()//預設情況下WebView是呼叫系統預設的瀏覽器或者第三方瀏覽器開啟頁面,通過webView.setWebViewClient(new WebViewClient(){...重寫後,頁面是在WebView中開啟的。

二、判斷頁面載入過程

webView.setWebChromeClient(newWebChromeClient() {

@Override

public void onProgressChanged(WebView view, int newProgress) {

if (newProgress == 100) {

// 網頁載入完成

} else {

// 載入中

}

}

});

三、頁面前進/後退操作

//判斷是否可以後退

webView.canGoBack()

//後退網頁

webView.goBack()

//判斷是否可以前進

webView.canGoForward()

//前進網頁

webView.goForward()

//以當前的index為起始點前進或者後退到歷史記錄中指定的steps

//如果steps為負數則為後退,正數則為前進

webView.goBackOrForward(intsteps)

四、Back鍵控制網頁後退

在App中如果不做任何程式碼處理,在點選系統的“Back”鍵時,整個 Browser 會呼叫 finish()而結束自身,而我們實質想進行頁面後退操作,為避免這情況具體程式碼:

在當前Activity中監聽按鍵事件,並消費掉系統預設的 Back 事件

public boolean onKeyDown(int keyCode, KeyEvent event) {

if ((keyCode == KEYCODE_BACK) && webView.canGoBack()) {

webView.goBack();

return true;

}

return super.onKeyDown(keyCode, event);

}

五、WebSettings子類其它的一些用法

//獲得WebSettings子類 WebSettings webSettings = webView.getSettings(); 

//縮放操作

webSettings.setSupportZoom(true); //支援縮放,預設為true。是下面那個的前提。 webSettings.setBuiltInZoomControls(true); //設定內建的縮放控制元件。若為false,則該WebView不可縮放 webSettings.setDisplayZoomControls(false); //隱藏原生的縮放控制元件

webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //關閉webview中快取 webSettings.setAllowFileAccess(true); //設定可以訪問檔案 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支援通過JS開啟新視窗 webSettings.setLoadsImagesAutomatically(true); //支援自動載入圖片 webSettings.setDefaultTextEncodingName("utf-8");//設定編碼格式

//設定自適應螢幕,兩者合用

webSettings.setUseWideViewPort(true); //將圖片調整到適合webview的大小

webSettings.setLoadWithOverviewMode(true); // 縮放至螢幕的大小