標籤：webview android webview緩衝 清理緩衝 webview提高
1 Android 利用 WebView 實現在 js 中調用 android 代碼
在 java 或 android 中,介面佔有很大比重,做程式員當然要對介面瞭解了,哈哈！ android 和 js 看似牛馬不相及,但是由於 WebView 的串連在 js 中就能夠調用 android 寫的代碼實現 android 的功能！ android 和 js 就像 java 和c/c++靠 jni 串連似的,二者也是靠介面串連.不廢話了,下面就以一個簡單的案例講述一下在 js 中調用 android 代碼
實現 android 功能！
1. 首先簡述 WebView、WebViewClient、WebChromeClient 之間的區別：
在 WebView 的設計中,不是什麼事都要 WebView 類乾的,有些雜事是分給其他人的,這樣 WebView 專心幹好自己的解析、渲染工作就行了.WebViewClient 就是協助 WebView 處理各種通知、請求事件等,WebChromeClient是輔助 WebView 處理 Javascript 的對話方塊,網站表徵圖,網站 title.
2. 功能實現： 利用 android 中的 WebView 載入一個 html 網頁,在 html 網頁中定義一個按鈕,點擊按鈕彈出一個 toast.
3. 實現步驟：
①定義一個介面類,將內容物件傳進去,在介面類中定義要在 js 中實現的方法.
②在 assets 資源套件下定義一個 html 檔案,在檔案中定義一個 button.button 的點擊事件定義為一個 js 函數.
③在 xml 中定義一個 WebView 組件,在活動類中擷取 WebView 並對 WebView 參數進行設定,此處特別注意要設定 WebView 支援 js 且將定義的 js 介面類添加到 WebView 中去,此後在 js 中就可以利用該介面類中定義的函數了.即：
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(new JavaScriptinterface(this),"android");
④利用 WebView 載入本地 html 檔案的方法是：myWebView.loadData(htmlText, "text/html", "utf-8");此處的htmltext 是以字串的方式讀取 assets 報下 html 中的內容.具體代碼見源碼！哈哈.
4. 實現利用返回鍵返回到上一頁：
設定 WebView 的按鍵監聽,監聽到期返回鍵並判斷網頁是否能夠返回,利用 WebView 的 goBack()返回到上一頁.
廢話不多說，上代碼：
xml布局檔案：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <WebView android:id="@+id/myWebView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="false" android:focusableInTouchMode="false" /></LinearLayout>java代碼：
package com.sihuaTech.webview;import java.io.BufferedReader;import java.io.InputStreamReader;import android.app.Activity;import android.os.Bundle;import android.view.KeyEvent;import android.webkit.WebView;import android.webkit.WebViewClient;public class MainActivity extends Activity {/** Called when the activity is first created. */private WebView myWebView;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);myWebView = (WebView) findViewById(R.id.myWebView);myWebView.getSettings().setJavaScriptEnabled(true);myWebView.addJavascriptInterface(new JavaScriptinterface(this),"android");String htmlText = getFromAssets("test.html");myWebView.loadData(htmlText, "text/html", "utf-8");myWebView.setWebViewClient(new myWebViewClient());}// 此按鍵監聽的是返回鍵，能夠返回到上一個網頁（通過網頁的hostlistery）public boolean onKeyDown(int keyCode, KeyEvent event) {if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {myWebView.goBack();return true;}return super.onKeyDown(keyCode, event);}public String getFromAssets(String fileName) {try {InputStreamReader inputReader = new InputStreamReader(getResources().getAssets().open(fileName));BufferedReader bufReader = new BufferedReader(inputReader);String line = "";String Result = "";while ((line = bufReader.readLine()) != null)Result += line;if (bufReader != null)bufReader.close();if (inputReader != null)inputReader.close();return Result;} catch (Exception e) {e.printStackTrace();}return null;}class myWebViewClient extends WebViewClient {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {// TODO Auto-generated method stubview.loadUrl(url);return true;}}}
package com.sihuaTech.webview;import android.content.Context;import android.widget.Toast;public class JavaScriptinterface {private Context mContext;/** Instantiate the interface and set the context */public JavaScriptinterface(Context c) {mContext = c;}/** Show a toast from the web page */public void showToast(String toast) {Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();}} html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript"> function showAndroidToast(toast) { android.showToast(toast); }</script></head><body><input type="button" value="Say hello"onClick="showAndroidToast('Hello Android!')" /></body></html>
在項目中經常會使用到 WebView 控制項,當載入 html 頁面時,會在/data/data/應用 package 目錄下產生 database與 cache 兩個檔案夾如如示:
請求的 url 記錄是儲存在 WebViewCache.db,而 url 的內容是儲存在 WebViewCache 檔案夾下.為了便於理解,接下來類比一個案例,定義一個 html 檔案,在裡面顯示一張圖片,用 WebView 載入出來,然後再試著從緩衝裡把這張圖片讀取出來並顯示.
第一步:建立一個 Android 工程命名為 WebViewCache.目錄結構如下:
第二步:在 assets 目錄下建立一個 html 檔案,命名為 index.html
<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>WebViewCacheDemo</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><imgsrc="http://img04.taobaocdn.com/imgextra/i4/608825099/T2nGXBXXpaXXXXXXXX_!!608825099.jpg_310x310.jpg"/></body></html></span>第三步:修改 main.xml 布局檔案,一個 WebView 控制項一個 Button(點擊載入緩衝圖片用),代碼如下:
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"android:layout_width="fill_parent" android:layout_height="fill_parent"><WebView android:layout_width="fill_parent"android:layout_height="wrap_content"android:id="@+id/WebView"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="從緩衝讀取圖片"android:id="@+id/button"/></LinearLayout></span>第四步:修改主核心程式 WebViewCacheDemo.java,這裡我只載入了 index.html 檔案,按鈕事件暫時沒寫,代碼如下:
<span style="font-size:14px;">public class WebViewActivity extends Activity {private WebView WebView;private static final String url="file:///android_asset/index.html";@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);WebView=(WebView)findViewById(R.id. WebView);WebView.loadUrl(url);}}</span>第五步:在 AndroidMainifest.xml 檔案中加訪問網路的許可權:
<uses-permission android:name="android.permission.INTERNET" />
運行效果如下：
此時我們在 WebViewCache.db 裡的 cache.table 裡多了一條記錄如所示:
在 cache/WebViewCache/目錄下多了一個 10d8d5cd 檔案,剛好和 cache.table 裡的 filepath,我們可以斷定這個
檔案就是我們從網上拽下來的圖片:
為了驗證猜想,我給 Button 增加事件響應,就是彈出 Dialog,裡面載入緩衝的圖片,完整代碼如下:
<span style="font-size:14px;">public class WebViewActivity extends Activity {private WebView WebView;private static final String url="file:///android_asset/index.html";@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);WebView=(WebView)findViewById(R.id. WebView);WebView.loadUrl(url);//點擊按鈕時彈出對話方塊Button button=(Button)findViewById(R.id.button);button.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {ImageView imageView=new ImageView(WebViewActivity.this);imageView.setImageBitmap(getPictureFromCache());Builder builder=new android.app.AlertDialog.Builder(WebViewActivity.this);//設定對話方塊的表徵圖builder.setTitle("從緩衝查看圖片");builder.setView(imageView);//退出按鈕builder.setPositiveButton("退 出", new OnClickListener(){public void onClick(DialogInterface dialog, int which) {//關閉 alert 對話方塊架dialog.cancel();}});builder.create().show();}});}/*** 從緩衝擷取圖片** @return*/private Bitmap getPictureFromCache(){Bitmap bitmap=null;try {//這裡寫死,在實際開發項目中要靈活使用File file=new File(getCacheDir()+"/WebViewCache/10d8d5cd");FileInputStream inStream=new FileInputStream(file);bitmap=BitmapFactory.decodeStream(inStream);} catch (Exception e) {e.printStackTrace();}return bitmap;}}</span>第六步:再次運行工程,點擊 button 按鈕,效果如所示:
3.Android WebView 刪除緩衝
<span style="font-size:14px;">刪除儲存於手機上的緩衝：// clear the cache before time numDaysprivate int clearCacheFolder(File dir, long numDays) {int deletedFiles = 0;if (dir!= null && dir.isDirectory()) {try {for (File child:dir.listFiles()) {if (child.isDirectory()) {deletedFiles += clearCacheFolder(child, numDays);}if (child.lastModified() < numDays) {if (child.delete()) {deletedFiles++;}}}} catch(Exception e) {e.printStackTrace();}}return deletedFiles;}開啟關閉使用緩衝//優先使用緩衝：WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//不使用緩衝：WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);在退出應用的時候加上如下代碼File file = CacheManager.getCacheFileBaseDir();if (file != null && file.exists() && file.isDirectory()) {for (File item : file.listFiles()) {item.delete();}file.delete();}context.deleteDatabase("WebView.db");context.deleteDatabase("WebViewCache.db");</span><span style="font-size:24px;"></span>
(二) Android Webview 深入 (上)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
