WebView想说爱你不容易啊

移动开发 移动应用 Android
现在的手机高度定制,多多少少都会对系统原生的代码进行了修改和添加的,不同的手机的WebView呈现出来的效果也是不同的,可以说是五彩缤纷了,所以我懂Android开发者的痛苦。接下来我就具体去讲解我在项目中使用WebView的经验,不喜勿喷哈。

[[189802]]

为什么要使用WebView

随着app业务的不断深入发展,只靠着原生代码来堆砌功能是不现实,毕竟开发的时长会增加,而且同时需要开发iOS和Android两套,并且,如果在UI上改变了一丁点,都需要提包(虽然Android现在可以进行热更新,但是热更新不是100%能生效的,其中的原理只要了解过的人都会知道的),最终我们会选择使用原生嵌套H5的方式进行开发,这样,既可以随时更改UI,也可以***制的进行功能扩展,然后,我们就要使用到Android的WebView了,这个让我们痛并快乐着的控件。

现在的手机高度定制,多多少少都会对系统原生的代码进行了修改和添加的,不同的手机的WebView呈现出来的效果也是不同的,可以说是五彩缤纷了,所以我懂Android开发者的痛苦。接下来我就具体去讲解我在项目中使用WebView的经验,不喜勿喷哈。

使用

一开始相信大家都是直接在布局文件中添加WebView控件,当然我一开始也是这样做的,就是为了简单,而且也不知道这样会出现什么问题。

  1. <WebView     
  2.  
  3.     android:id="@+id/web_view"     
  4.  
  5.     android:layout_width="match_parent"     
  6.  
  7.     android:layout_height="match_parent"/>  

直接就这样添加了一个WebView,发现也没什么问题啊,一样可以显示,什么都是正常的啊。在重复打开有WebView的页面时,你会发现,应用的内存会不断升高,销毁了之后也不会降下来,点击GC也降不下来,这样就出现了内存泄漏了,这时你就会发现,这样使用WebView是不正确的,那么***方式是如何使用呢?

那就是在代码中动态添加。

首先在布局文件中声明一个parent布局

  1. <LinearLayout 
  2.  
  3. android:id="@+id/web_view" 
  4.  
  5. android:layout_width="match_parent" 
  6.  
  7. android:layout_height="wrap_content" 
  8.  
  9. android:orientation="horizontal" 
  10.  
  11. android:scrollbars="none" />  

然后在代码中,把WebView当做其子View添加进去

  1. WebView webView = new WebView(context); 
  2.  
  3. webViewLayout.addView(webView);  

网上很多人说这个context应该用application的,我觉得是不对的,如果你的WebView需要弹出一个dialog呢?还有其他的不可预估的问题的,***还是用当前的activity的Context是最合适的。

上面说的是如何把WebView添加进来进行使用,然后到底它有哪些属性是我们在开发中需要使用到的呢?

  1. webView.loadUrl("www.baidu.com");//WebView加载的网页使用loadUrl 
  2.  
  3. WebSettings webSettings = webView.getSettings();//获得WebView的设置 
  4.  
  5. webSettings.setUseWideViewPort(true);// 设置此属性,可任意比例缩放 
  6.  
  7. webSettings.setLoadWithOverviewMode(true);//适配 
  8.  
  9. webSettings.setJavaScriptEnabled(true);  //支持js 
  10.  
  11. webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  //设置 缓存模式 
  12.  
  13. webSettings.setDomStorageEnabled(true);// 开启 DOM storage API 功能 
  14.  
  15. webSettings.setDatabaseEnabled(true);//开启 database storage API 功能 
  16.  
  17. webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);//HTTPS,注意这个是在LOLLIPOP以上才调用的 
  18.  
  19. webSettings.setAppCacheEnabled(true);//开启 Application Caches 功能 
  20.  
  21. webSettings.setBlockNetworkImage(true);//关闭加载网络图片,在一开始加载的时候可以设置为true,当加载完网页的时候再设置为false  

上面是使用WebView中最基础的设置,相信在开发过程中都会进行如上的设置的。

  1. webView.setWebChromeClient(new WebChromeClient() {     
  2.  
  3.      @Override    
  4.  
  5.      public void onProgressChanged(WebView viewint newProgress) { 
  6.  
  7.          //加载的进度 
  8.  
  9.      } 
  10.  
  11.      @Override 
  12.  
  13.      public void onReceivedTitle(WebView view, String title) {    
  14.  
  15.          //获取WebView的标题 
  16.  
  17.      } 
  18.  
  19.     @Override 
  20.  
  21.     public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {     
  22.  
  23.         return super.onJsAlert(view, url, message, result); 
  24.  
  25.         //Js 弹框 
  26.  
  27.     } 
  28.  
  29.     @Override 
  30.  
  31.     public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {    
  32.  
  33.         AlertDialog.Builder b = new AlertDialog.Builder(IllegalQueryActivity.this);     
  34.  
  35.         b.setTitle("删除");     
  36.  
  37.         b.setMessage(message);     
  38.  
  39.         b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {         
  40.  
  41.             @Override         
  42.  
  43.             public void onClick(DialogInterface dialog, int which) {             
  44.  
  45.                 result.confirm();         
  46.  
  47.             }     
  48.  
  49.         });     
  50.  
  51.         b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {         
  52.  
  53.             @Override         
  54.  
  55.             public void onClick(DialogInterface dialog, int which) {             
  56.  
  57.                 result.cancel();         
  58.  
  59.             }     
  60.  
  61.         });     
  62.  
  63.         b.create().show();     
  64.  
  65.         return true
  66.  
  67.     } 
  68.  
  69. }); 
  70.  
  71. webView.setWebViewClient(new WebViewClient() {     
  72.  
  73.     @Override     
  74.  
  75.     public boolean shouldOverrideUrlLoading(WebView view, String url) {         
  76.  
  77.        //需要设置在当前WebView中显示网页,才不会跳到默认的浏览器进行显示 
  78.  
  79.        return true;    
  80.  
  81.     }     
  82.  
  83.     @Override     
  84.  
  85.     public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) { 
  86.  
  87.         super.onReceivedError(view, request, error); 
  88.  
  89.         //加载出错了 
  90.  
  91.     }    
  92.  
  93.     @Override     
  94.  
  95.     public void onPageFinished(WebView view, String url) {         
  96.  
  97.         super.onPageFinished(view, url); 
  98.  
  99.         //加载完成 
  100.  
  101.     } 
  102.  
  103. }); 
  104.  
  105. webView.setDownloadListener(new DownLoadListener());//下载监听 
  106.  
  107. private class DownLoadListener implements DownloadListener {    
  108.  
  109.     @Override    
  110.  
  111.     public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {       
  112.  
  113.     } 
  114.  
  115.  

然后就是WebView跟JS的交互了

  1. webView.addJavascriptInterface(new WebAppInterface(this), "WebJs"); 
  2.  
  3. public class WebAppInterface {  
  4.  
  5.     Context mContext;     
  6.  
  7.     public WebAppInterface(Context c) {         
  8.  
  9.         mContext = c;     
  10.  
  11.     }     
  12.  
  13.     @JavascriptInterface     
  14.  
  15.     public void method() { 
  16.  
  17.     } 
  18.  
  19.  
  20. webView.loadUrl("javascript:jsMethod()");//这是WebView最简单的调用JS的方法  

当activity执行生命周期的时候,这里需要注意的是在onDestroy的时候,需要销毁WebView,不然也会出现内存泄漏的。

  1. @Overrideprotected void onPause() {     
  2.  
  3.     super.onPause();     
  4.  
  5.     if (webView != null) {         
  6.  
  7.         webView.onPause();     
  8.  
  9.     } 
  10.  
  11.  
  12. @Override 
  13.  
  14. protected void onResume() {     
  15.  
  16.     super.onResume();     
  17.  
  18.     if (webView != null) {         
  19.  
  20.         webView.onResume();     
  21.  
  22.     } 
  23.  
  24.  
  25. @Override 
  26.  
  27. protected void onDestroy() {         
  28.  
  29.     if (webView != null) {         
  30.  
  31.         webView.clearCache(true); //清空缓存    
  32.  
  33.         if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {             
  34.  
  35.             if (webViewLayout != null) {                 
  36.  
  37.                 webViewLayout.removeView(webView);             
  38.  
  39.             }             
  40.  
  41.         webView.removeAllViews();             
  42.  
  43.         webView.destroy();         
  44.  
  45.     }else {             
  46.  
  47.         webView.removeAllViews();             
  48.  
  49.         webView.destroy();             
  50.  
  51.         if (webViewLayout != null) {                 
  52.  
  53.             webViewLayout.removeView(webView);            
  54.  
  55.         }         
  56.  
  57.      }   
  58.  
  59.      webView = null;     
  60.  
  61.   }    
  62.  
  63.  

可以看到上面的onDestroy方法中对系统的版本进行了判断,那是因为我在不同的版本中进行了测试,如果低于5.0版本的WebView中,如果先在parent中remove了WebView,那WebView将无法进行destroy了,这样就会造成内存的泄漏,下来你们可以自己去尝试一下这个说法是不是正确的。

现在还遇到的一个问题就是,当WebView嵌套在ScrollView中时,某些机型会出现闪屏的问题,单独WebView的时候是不会出现的,把硬件加速关闭了之后,对用户的体验又不好,所以暂时还未想到比较好的解决方案,所以还是建议不要在ScrollView中嵌套WebView这样的控件。 

责任编辑:庞桂玉 来源: 安卓巴士Android开发者门户
相关推荐

2018-01-24 07:28:20

2013-09-22 09:16:25

码农程序员黑客

2009-09-04 08:19:24

Windows 7优缺点

2009-02-12 17:25:21

Windows7试用下载

2024-05-07 07:38:29

2011-12-16 14:52:55

移动互联联想

2012-08-20 10:13:39

云计算服务配置

2016-02-18 10:52:25

ApplePay绑定失败苹果

2013-05-17 10:18:16

2012-05-24 13:24:00

Linux操作系统

2012-06-13 14:58:09

BYOD移动办公

2018-06-01 15:48:22

2018-06-02 13:37:00

2012-03-27 10:53:56

石油开采超级计算机

2021-04-20 19:21:50

脏读MySQL幻读

2023-08-31 22:17:15

JavaMySQLB+树

2013-12-30 10:10:50

Windows XP

2018-07-10 11:18:31

私有云混合云迁移

2015-06-11 11:21:12

免费Wi-Fi

2020-06-09 08:19:25

微服务网站架构
点赞
收藏

51CTO技术栈公众号