学校申请建设网站的原因,婺城区建设局网站,网站建设功能的策划书,网络规划师含金量这段时间基于项目需要 在开发中与WebView的接触比较多#xff0c;前段时间关于HTML5规范尘埃落定的消息出现在各大IT社区头版上#xff0c;更有人说#xff1a;HTML5将颠覆原生App开发 虽然我不太认同这一点 但是关于HTML5JSCSSNative的跨平台开发模式还是为很多企业节省了开…这段时间基于项目需要 在开发中与WebView的接触比较多前段时间关于HTML5规范尘埃落定的消息出现在各大IT社区头版上更有人说HTML5将颠覆原生App开发 虽然我不太认同这一点 但是关于HTML5JSCSSNative的跨平台开发模式还是为很多企业节省了开发资源和成本、一定程度上提升了WebView的使用率和地位。网上关于HTML5规范定稿的一篇见解文章 http://www.csdn.net/article/2014-11-06/2822513-how-html5-changes 本篇主要基于这段时间对WebView的使用经验和网上学习到的对WebView开发做一个要点小结 一、WebView基于webkit引擎展现web页面的控件使用前需要在Android Manifest file中配置internet访问权限否则提示页面无法访问。 ? 1 2 3 4 manifest ... uses-permission android:nameandroid.permission.INTERNET ... /uses-permission/manifest 二、WebView属性的设置1、设置WebSettings类WebSettings用来对WebView的配置进行配置和管理比如是否可以进行文件操作、缓存的设置、页面是否支持放大和缩小、是否允许使用数据库api、字体及文字编码设置、是否允许js脚本运行、是否允许图片自动加载、是否允许数据及密码保存等等示例代码如下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 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(); 2、设置WebChromeClient子类WebChromeClient会在一些影响浏览器ui交互动作发生时被调用比如WebView关闭和隐藏、页面加载进展、js确认框和警告框、js加载前、js操作超时、webView获得焦点等等? 1 mWebView.setWebChromeClient(new MyWebChromeClient()); 3、设置WebViewClient子类WebViewClient会在一些影响内容渲染的动作发生时被调用比如表单的错误提交需要重新提交、页面开始加载及加载完成、资源加载中、接收到https认证需要处理、页面键盘响应、页面中的url打开处理等等 ? 1 mWebView.setWebViewClient(new MyWebViewClient()); 4、设置addJavascriptInterface方法使Js调用Native本地Java对象,实现本地Java代码和HTML页面进行交互注意:因为安全问题的考虑 Google在使用Android API 17以上的版本的时候 需要通过JavascriptInterface来注解的Java函数才能被识别可以被Js调用。 三、设置当前网页的链接仍在WebView中跳转而不是跳到手机浏览器里显示 在WebViewClient的子类中重写shouldOverrideUrlLoading函数 代码如下 ? 1 2 3 4 5 6 7 8 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处理四、设置开始加载网页、加载完成、加载错误时处理在WebViewClient子类中分别重写如下父类函数 代码如下? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 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); } }); 五、处理https请求为WebView处理ssl证书设置WebView默认是不处理https请求的页面显示空白需要进行如下设置在WebViewClient子类中重写父类的onReceivedSslError函数 代码如下? 1 2 3 4 5 6 7 8 9 webView.setWebViewClient(new WebViewClient() { Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); // 接受信任所有网站的证书 // handler.cancel(); // 默认操作 不处理 // handler.handleMessage(null); // 可做其他处理 } }); 六、显示页面加载进度在WebChromeClient子类中重写父类的onProgressChanged函数 代码如下? 1 2 3 4 5 6 7 8 9 10 11 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的整数七、back键控制网页后退Activity默认的back键处理为结束当前ActivityWebView查看了很多网页后希望按back键返回上一次浏览的页面这个时候我们就需要覆盖WebView所在Activity的onKeyDown函数告诉他如何处理代码如下 ? 1 2 3 4 5 6 7 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含有一个可后退的浏览记录时返回truewebView.goBack();表示返回至webView的上次访问页面八、使用addJavascriptInterface完成和js交互 1、Js中调Native本地Java方法 设置webView的addJavascriptInterface方法该方法有两个参数第一个参数为被绑定到js中的类实例第二个参数为在js中暴露的类别名在js中引用java对象就是用这个名字 在Native Java代码如下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 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方法 代码如下? 1 2 3 4 5 6 7 input typebutton valueSay hello onclickshowAndroidToast(Hello Android!) script typetext/javascript function showAndroidToast(toast) { Android.showToast(toast); } /script 2、Java调Js方法比如在HTML中有如下Js函数? 1 2 3 4 5 script typetext/javascript function showAlert() { alert(Be executed by Native); } /script 在Native调Js方法如下? 1 mWebView.loadUrl(javascriptshowAlert()); 九、WebView缓存模式的设置1、网页数据缓存当使用WebView加载HTML网页时会在我们data/应用package下生成database与cache两个文件夹:我们请求的Url记录是保存在webviewCache.db里而url的内容是保存在webviewCache文件夹下.五种缓存模式的设置setCacheModeLOAD_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都使用缓存中的数据。如示例代码? 1 2 3 4 5 6 WebSettings webSettings mWebView.getSettings(); webSettings.setCacheMode(WebSettings.LOAD_DEFAULT); //设置 缓存模式 // 开启 DOM storage API 功能 webSettings.setDomStorageEnabled(true); //开启 database storage API 功能 webSettings.setDatabaseEnabled(true); 2、H5缓存通过setAppCacheEnabled(boolean flag)设置H5的缓存是否打开默认关闭。根据setAppCachePath(String appCachePath)提供的路径在H5使用缓存过程中生成的缓存文件。通过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量。如示例代码? 1 2 3 4 5 6 7 8 9 10 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); 十、加快HTML网页加载完成速度默认情况html代码
下载
到WebView后webkit开始解析网页各个节点发现有外部样式文件或者外部脚本文件时会异步发起网络请求下载文件但如果在这之前也有解析到image节点那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下过多的网络请求就会造成带宽紧张影响到css或js文件加载完成的时间造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片等页面finish后再发起图片加载。故在WebView初始化时设置如下代码 ? 1 2 3 4 5 6 7 public void int () { if(Build.VERSION.SDK_INT 19) { webView.getSettings().setLoadsImagesAutomatically(true); } else { webView.getSettings().setLoadsImagesAutomatically(false); } } 同时在WebView的WebViewClient子类中重写onPageFinished()方法添加如下代码 ? 1 2 3 4 5 6 Override public void onPageFinished(WebView view, String url) { if(!webView.getSettings().getLoadsImagesAutomatically()) { webView.getSettings().setLoadsImagesAutomatically(true); } } 从上面的代码可以看出我们对系统API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多张图片引用的是相同的src时会只有一个image标签得到加载因而对于这样的系统我们就先直接加载。十一、WebView硬件加速导致页面渲染闪烁问题解决方法 关于Android硬件加速 开始于Android 3.0 (API level 11),在四个级别上开启/关闭硬件加速 1、Application级别为整个应用程序开启硬件加速在AndroidManifest中加入如下配置 ? 1 /application 2、Activity级别控制每个activity是否开启硬件加速只需在activity元素中添加android:hardwareAccelerated属性即可? 1 /activity 3、Window级别注目前还不支持在Window级别上关闭硬件加速? 1 2 3 getWindow().setFlags( WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED); 4、View级别运行时单个view硬件加速目前Android还不支持在View级别开启硬件加速 代码如下? 1 mView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); [//TODO 关于Android硬件加速 小吕有时间会更详细的单独整理成一篇来做介绍 先提供学习地址http://android.toolib.net/guide/topics/graphics/hardware-accel.html ] 我们开启硬件加速后WebView渲染页面更加快速拖动也更加顺滑。但有个副作用就是容易会出现页面加载白块同时界面闪烁现象。解决这个问题的方法是设置WebView暂时关闭硬件加速 代码如下 ? 1 2 3 if (Build.VERSION.SDK_INT Build.VERSION_CODES.HONEYCOMB) { webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null); } 十二、其他注意事项1 从网络上下载html页面的过程应放在工作线程(后台线程)中2 html下载成功后渲染出html的步骤应放在UI主线程,不然WebView加载网页过程会容易报错
