Android学习之 WebView使用小结

网上关于HTML5规范定稿的一篇见解文章：

http://www.csdn.net/article/2014-11-06/2822513-how-html5-changes

本篇主要基于这段时间对WebView的使用经验和网上学习到的对WebView开发做一个要点小结：

一、WebView基于webkit引擎展现web页面的控件，使用前须要在Android Manifest file中配置internet訪问权限，否则提示页面无法訪问。

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

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT); 
webSettings.setDomStorageEnabled(true);  
webSettings.setDatabaseEnabled(true);
webSettings.setAppCacheEnabled(true); 
webSettings.setAllowFileAccess(true);
webSettings.setSavePassword(true);
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true); 
 /**
  * 用WebView显示图片，可使用这个參数 设置网页布局类型：
  * 1、LayoutAlgorithm.NARROW_COLUMNS ：适应内容大小
  * 2、LayoutAlgorithm.SINGLE_COLUMN : 适应屏幕，内容将自己主动缩放
  */
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
webSettings.setUseWideViewPort(true); 

mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.setHorizontalScrollbarOverlay(true);
mWebView.setHorizontalScrollBarEnabled(true);
mWebView.requestFocus(); 

mWebView.setWebChromeClient(new MyWebChromeClient());

mWebView.setWebViewClient(new MyWebViewClient());

三、设置当前网页的链接仍在WebView中跳转，而不是跳到手机浏览器里显示，
       在WebViewClient的子类中重写shouldOverrideUrlLoading函数  代码例如以下：

webView.setWebViewClient(new WebViewClient() {  
  
    @Override  
    public boolean shouldOverrideUrlLoading(WebView view, String url) {  
        view.loadUrl(url);  
        return true;  
    }  
}); 

webView.setWebViewClient(new WebViewClient() {  
  
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        // 開始载入网页时处理 如：显示"载入提示" 的载入对话框
        DialogManager.showLoadingDialog(this);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 网页载入完毕时处理  如：让 载入对话框 消失
        DialogManager.dismissLoadingDialog();
    }

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        // 载入网页失败时处理  如：
        view.loadDataWithBaseURL(null,
                "<span style=\"color:#FF0000\">网页载入失败</span>",
                "text/html",
                "utf-8",
                null);
    }  
});

webView.setWebViewClient(new WebViewClient() {  
  
    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        handler.proceed();  // 接受信任全部站点的证书
        // handler.cancel();   // 默认操作 不处理
        // handler.handleMessage(null);  // 可做其它处理
    } 
}); 

webView.setWebChromeClient(new WebChromeClient() {  
  
    public void onProgressChanged(WebView view, int progress) {  
        setTitle("页面载入中，请稍候..." + progress + "%");  
        setProgress(progress * 100);  
  
        if (progress == 100) {  
            setTitle(R.string.app_name);  
        }  
    }  
});

public boolean onKeyDown(int keyCode, KeyEvent event) {  
    if (webView.canGoBack() && event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {  
        webView.goBack();  
        return true;  
    }  
    return super.onKeyDown(keyCode, event);  
}

八、使用addJavascriptInterface完毕和js交互
1、Js中调Native本地Java方法
  设置webView的addJavascriptInterface方法，该方法有两个參数，第一个參数为被绑定到js中的类实例，第二个參数为在js中暴露的类别名，在js中引用java对象就是用这个名字
在Native Java代码例如以下：

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

class JavaScriptInterface{

    Context mContext;

    /** Instantiate the interface and set the context */
    JavaScriptInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page 
      * 由Js调用运行Native本地Java方法
      */
    @JavascriptInterface
    public void showToast(String toast) {
        Log.d("TAG", "Js Invoker Native Function");
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }		
		
}

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

<script type="text/javascript">
      function showAlert() {
        alert("Be executed by Native");
    }
</script>

mWebView.loadUrl("javascript:showAlert()");

WebSettings webSettings = mWebView.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  //设置 缓存模式  
// 开启 DOM storage API 功能  
webSettings.setDomStorageEnabled(true);  
//开启 database storage API 功能  
webSettings.setDatabaseEnabled(true);  

String cacheDirPath = getCacheDir().getAbsolutePath()+ "/webViewCache ";
WebSettings webSettings = mWebView.getSettings();
//开启 database storage API 功能  
webSettings.setDatabaseEnabled(true);    
//设置数据库缓存路径  
webSettings.setDatabasePath(cacheDirPath); 
//开启Application H5 Caches 功能  
webSettings.setAppCacheEnabled(true); 
//设置Application Caches 缓存文件夹  
webSettings.setAppCachePath(cacheDirPath);

public void int () {
    if(Build.VERSION.SDK_INT >= 19) {
        webView.getSettings().setLoadsImagesAutomatically(true);
    } else {
        webView.getSettings().setLoadsImagesAutomatically(false);
    }
}

@Override
public void onPageFinished(WebView view, String url) {
    if(!webView.getSettings().getLoadsImagesAutomatically()) {
        webView.getSettings().setLoadsImagesAutomatically(true);
    }
}

十一、WebView硬件加速导致页面渲染闪烁问题解决方法
    关于Android硬件加速 開始于Android 3.0 (API level 11),在四个级别上开启/关闭硬件加速
    1、Application级别：为整个应用程序开启硬件加速，在AndroidManifest中增加例如以下配置

<application android:hardwareAccelerated="true" ...>

<activity android:hardwareAccelerated="true" ...>

getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED，
    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

mView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

 [//TODO 关于Android硬件加速 小吕有时间会更具体的单独整理成一篇来做介绍 
     先提供学习地址：http://android.toolib.net/guide/topics/graphics/hardware-accel.html]

     我们开启硬件加速后，WebView渲染页面更加高速，拖动也更加顺滑。但有个副作用就是easy会出现页面载入白块同一时候界面闪烁现象。解决问题的方法是设置WebView临时关闭硬件加速 代码例如以下：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
    webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

十二、WebView载入本地HTML文件乱码问题解决方式
分析一、保证html页面有设置编码格式 如：       

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

分析二、为WebView 指定显示的编码，WebView设置编码是在Settings中来设置，如：         

mWebView.getSettings().setDefaultTextEncodingName("utf-8");

//webview.loadData(data, "text/html", "utf-8");
  webview.loadDataWithBaseURL(baseUrl, data, "text/html", "utf-8", failUrl);

十三、其它注意事项：