Android学习之 WebView使用小结

时间  2019-11-12
标签 android 学习 webview 使用 小结 栏目 Android 繁體版
原文   原文链接
    这段时间基于项目需要 在开发中与WebView的接触比較多，前段时间关于HTML5规范尘埃落定的消息出现在各大IT社区头版上，更有人说：HTML5将颠覆原生App开发 尽管我不太认同这一点 但是关于HTML5+JS+CSS+Native的跨平台开发模式仍是为很是多企业节省了开发资源和成本、必定程度上提高了WebView的使用率和地位。


网上关于HTML5规范定稿的一篇看法文章：javascript

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

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


1、WebView基于webkit引擎展示web页面的控件，使用前需要在Android Manifest file中配置internet訪问权限，不然提示页面没法訪问。html5

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


2、WebView属性的设置
  一、设置WebSettings类
     WebSettings用来对WebView的配置进行配置和管理，比方可否够进行文件操做、缓存的设置、页面是否支持放大和缩小、是否赞成使用数据库api、字体及文字编码设置、是否赞成js脚本执行、是否赞成图片本身主动载入、是否赞成数据及password保存等等
     演示样例代码例如如下： 

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显示图片，可以使用这个參数 设置网页布局类型：
  * 一、LayoutAlgorithm.NARROW_COLUMNS ：适应内容大小
  * 二、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();
  二、设置WebChromeClient子类
      WebChromeClient会在一些影响浏览器ui交互动做发生时被调用，比方WebView关闭和隐藏、页面载入进展、js确认框和警告框、js载入前、js操做超时、webView得到焦点等等
 

mWebView.setWebChromeClient(new MyWebChromeClient());
三、设置WebViewClient子类
     WebViewClient会在一些影响内容渲染的动做发生时被调用，比方表单的错误提交需要又一次提交、页面開始载入及载入完毕、资源载入中、接收到https认证需要处理、页面键盘响应、页面中的url打开处理等等 

mWebView.setWebViewClient(new MyWebViewClient());
四、设置addJavascriptInterface方法
     使Js调用Native本地Java对象,实现本地Java代码和HTML页面进行交互，
     注意:因为安全问题的考虑 Google在使用Android API 17以上的版本号的时候 需要经过@JavascriptInterface来注解的Java函数才干被识别可以被Js调用。


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

webView.setWebViewClient(new WebViewClient() {  
  
    @Override  
    public boolean shouldOverrideUrlLoading(WebView view, String url) {  
        view.loadUrl(url);  
        return true;  
    }  
});
shouldOverrideUrlLoading表示当前webView中的一个新url需要载入时，给当前应用程序一个处理机会，假设没有重写此函数，webView请求ActivityManage选择合适的方式处理请求，就像弹出uc和互联网让用户选择浏览器同样。重写后return true表示让当前程序处理，return false表示让当前webView处理

4、设置開始载入网页、载入完毕、载入错误时处理
   在WebViewClient子类中分别重写例如如下父类函数  代码例如如下：
 

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);
    }  
});
5、处理https请求，为WebView处理ssl证书设置
    WebView默认是不处理https请求的，页面显示空白，需要进行例如如下设置
    在WebViewClient子类中重写父类的onReceivedSslError函数  代码例如如下： 
webView.setWebViewClient(new WebViewClient() {  
  
    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        handler.proceed();  // 接受信任所有站点的证书
        // handler.cancel();   // 默认操做 不处理
        // handler.handleMessage(null);  // 可作其它处理
    } 
});

6、显示页面载入进度
   在WebChromeClient子类中重写父类的onProgressChanged函数  代码例如如下： 
webView.setWebChromeClient(new WebChromeClient() {  
  
    public void onProgressChanged(WebView view, int progress) {  
        setTitle("页面载入中，请稍候..." + progress + "%");  
        setProgress(progress * 100);  
  
        if (progress == 100) {  
            setTitle(R.string.app_name);  
        }  
    }  
});
onProgressChanged通知应用程序当前页面载入的进度
progress表示当前页面载入的进度，为1至100的整数

7、back键控制网页后退
   Activity默认的back键处理为结束当前Activity，WebView查看了很是多网页后，但愿按back键返回上一次浏览的页面，这个时候咱们就需要覆盖WebView所在Activity的onKeyDown函数，告诉他怎样处理，代码例如如下： 

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);  
}
当中webView.canGoBack()在webView含有一个可后退的浏览记录时返回true
webView.goBack();表示返回至webView的上次訪问页面

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

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();
    }		
		
}
在HTML中Js调用Native方法 代码例如如下：
 

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

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>
二、Java调Js方法
比方在HTML中有例如如下Js函数
 

<script type="text/javascript">
      function showAlert() {
        alert("Be executed by Native");
    }
</script>
在Native调Js方法例如如下：
 

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

9、WebView缓存模式的设置
一、网页数据缓存
当使用WebView载入HTML网页时，会在咱们data/应用package下生成database与cache两个目录:
咱们请求的Url记录是保存在webviewCache.db里，而url的内容是保存在webviewCache目录下.

五种缓存模式的设置setCacheMode：
LOAD_CACHE_ONLY:  不使用网络，仅仅读取本地缓存数据。
LOAD_DEFAULT:  依据cache-control决定是否从网络上取数据。
LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11開始做用同LOAD_DEFAULT模式。
LOAD_NO_CACHE: 不使用缓存，仅仅从网络获取数据。
LOAD_CACHE_ELSE_NETWORK，仅仅要本地有，不论是否过时，或者no-cache，都使用缓存中的数据。

如演示样例代码：
 

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

二、H5缓存
经过setAppCacheEnabled(boolean flag)设置H5的缓存是否打开，默认关闭。
依据setAppCachePath(String appCachePath)提供的路径，在H5使用缓存过程当中生成的缓存文件。
经过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量。

如演示样例代码：
 

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);

10、加快HTML网页载入完毕速度
    默认状况html代码下载到WebView后，webkit開始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下载文件，但假设在这以前也有解析到image节点，那势必也会发起网络请求下载对应的图片。在网络状况较差的状况下，过多的网络请求就会形成带宽紧张，影响到css或js文件载入完毕的时间，形成页面空白loading太久。解决办法就是告诉WebView先不要本身主动载入图片，等页面finish后再发起图片载入。
    故在WebView初始化时设置例如如下代码： 

public void int () {
    if(Build.VERSION.SDK_INT >= 19) {
        webView.getSettings().setLoadsImagesAutomatically(true);
    } else {
        webView.getSettings().setLoadsImagesAutomatically(false);
    }
}
同一时候在WebView的WebViewClient子类中重写onPageFinished()方法加入例如如下代码： 

@Override
public void onPageFinished(WebView view, String url) {
    if(!webView.getSettings().getLoadsImagesAutomatically()) {
        webView.getSettings().setLoadsImagesAutomatically(true);
    }
}
从上面的代码，可以看出咱们对系统API在19以上的版本号做了兼容。因为4.4以上系统在onPageFinished时再恢复图片载入时,假设存在多张图片引用的是一样的src时，会仅仅有一个image标签获得载入，于是对于这种系统咱们就先直接载入。


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

<application android:hardwareAccelerated="true" ...>
      二、Activity级别：控制每个activity是否开启硬件加速，仅仅需在activity元素中加入android:hardwareAccelerated属性就能够
 

<activity android:hardwareAccelerated="true" ...>
   三、Window级别：注：眼下还不支持在Window级别上关闭硬件加速
 

getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED，
    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
   四、View级别：执行时单个view硬件加速，眼下Android还不支持在View级别开启硬件加速  代码例如如下：
 

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);
}


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

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

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

mWebView.getSettings().setDefaultTextEncodingName("utf-8");
分析3、假设你是使用的loadData()来载入显示网页。中文出现乱码 则改成loadDataWithBaseURL
             缘由：webview.loadData方法不支持中文解析，通常用webView.loadDataWithBaseURL来解决。如：           
//webview.loadData(data, "text/html", "utf-8");
  webview.loadDataWithBaseURL(baseUrl, data, "text/html", "utf-8", failUrl);


十3、其它注意事项：

    1> 从网络上下载html页面的过程应放在工做线程(后台线程)中     2> html下载成功后渲染出html的步骤应放在UI主线程,否则WebView载入网页过程会easy报错
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程