WebView想说爱你不容易啊

[[189802]]

为什么要使用WebView

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

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

使用

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

 
 
 

  
  
  
  
  
  
 
  
  
  
    android:id="@+id/web_view"     
  
  
  
 
  
  
  
    android:layout_width="match_parent"     
  
  
  
 
  
  
  
    android:layout_height="match_parent"/>  
 
 
 

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

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

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

 
 
 

  
  
  
  
  
  
 
  
  
  
android:id="@+id/web_view" 
  
  
  
 
  
  
  
android:layout_width="match_parent" 
  
  
  
 
  
  
  
android:layout_height="wrap_content" 
  
  
  
 
  
  
  
android:orientation="horizontal" 
  
  
  
 
  
  
  
android:scrollbars="none" />  
 
 
 

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

 
 
 

  
  
  
WebView webView = new WebView(context); 
  
  
  
 
  
  
  
webViewLayout.addView(webView);  
 
 
 

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

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

 
 
 

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

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

 
 
 

  
  
  
webView.setWebChromeClient(new WebChromeClient() {     
  
  
  
 
  
  
  
     @Override    
  
  
  
 
  
  
  
     public void onProgressChanged(WebView view, int newProgress) { 
  
  
  
 
  
  
  
         //加载的进度 
  
  
  
 
  
  
  
     } 
  
  
  
 
  
  
  
     @Override 
  
  
  
 
  
  
  
     public void onReceivedTitle(WebView view, String title) {    
  
  
  
 
  
  
  
         //获取WebView的标题 
  
  
  
 
  
  
  
     } 
  
  
  
 
  
  
  
    @Override 
  
  
  
 
  
  
  
    public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {     
  
  
  
 
  
  
  
        return super.onJsAlert(view, url, message, result); 
  
  
  
 
  
  
  
        //Js 弹框 
  
  
  
 
  
  
  
    } 
  
  
  
 
  
  
  
    @Override 
  
  
  
 
  
  
  
    public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {    
  
  
  
 
  
  
  
        AlertDialog.Builder b = new AlertDialog.Builder(IllegalQueryActivity.this);     
  
  
  
 
  
  
  
        b.setTitle("删除");     
  
  
  
 
  
  
  
        b.setMessage(message);     
  
  
  
 
  
  
  
        b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {         
  
  
  
 
  
  
  
            @Override         
  
  
  
 
  
  
  
            public void onClick(DialogInterface dialog, int which) {             
  
  
  
 
  
  
  
                result.confirm();         
  
  
  
 
  
  
  
            }     
  
  
  
 
  
  
  
        });     
  
  
  
 
  
  
  
        b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {         
  
  
  
 
  
  
  
            @Override         
  
  
  
 
  
  
  
            public void onClick(DialogInterface dialog, int which) {             
  
  
  
 
  
  
  
                result.cancel();         
  
  
  
 
  
  
  
            }     
  
  
  
 
  
  
  
        });     
  
  
  
 
  
  
  
        b.create().show();     
  
  
  
 
  
  
  
        return true; 
  
  
  
 
  
  
  
    } 
  
  
  
 
  
  
  
}); 
  
  
  
 
  
  
  
webView.setWebViewClient(new WebViewClient() {     
  
  
  
 
  
  
  
    @Override     
  
  
  
 
  
  
  
    public boolean shouldOverrideUrlLoading(WebView view, String url) {         
  
  
  
 
  
  
  
       //需要设置在当前WebView中显示网页，才不会跳到默认的浏览器进行显示 
  
  
  
 
  
  
  
       return true;    
  
  
  
 
  
  
  
    }     
  
  
  
 
  
  
  
    @Override     
  
  
  
 
  
  
  
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) { 
  
  
  
 
  
  
  
        super.onReceivedError(view, request, error); 
  
  
  
 
  
  
  
        //加载出错了 
  
  
  
 
  
  
  
    }    
  
  
  
 
  
  
  
    @Override     
  
  
  
 
  
  
  
    public void onPageFinished(WebView view, String url) {         
  
  
  
 
  
  
  
        super.onPageFinished(view, url); 
  
  
  
 
  
  
  
        //加载完成 
  
  
  
 
  
  
  
    } 
  
  
  
 
  
  
  
}); 
  
  
  
 
  
  
  
webView.setDownloadListener(new DownLoadListener());//下载监听 
  
  
  
 
  
  
  
private class DownLoadListener implements DownloadListener {    
  
  
  
 
  
  
  
    @Override    
  
  
  
 
  
  
  
    public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {       
  
  
  
 
  
  
  
    } 
  
  
  
 
  
  
  
}  
 
 
 

然后就是WebView跟JS的交互了

 
 
 

  
  
  
webView.addJavascriptInterface(new WebAppInterface(this), "WebJs"); 
  
  
  
 
  
  
  
public class WebAppInterface {  
  
  
  
 
  
  
  
    Context mContext;     
  
  
  
 
  
  
  
    public WebAppInterface(Context c) {         
  
  
  
 
  
  
  
        mContext = c;     
  
  
  
 
  
  
  
    }     
  
  
  
 
  
  
  
    @JavascriptInterface     
  
  
  
 
  
  
  
    public void method() { 
  
  
  
 
  
  
  
    } 
  
  
  
 
  
  
  
} 
  
  
  
 
  
  
  
webView.loadUrl("javascript:jsMethod()");//这是WebView最简单的调用JS的方法  
 
 
 

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

 
 
 

  
  
  
@Overrideprotected void onPause() {     
  
  
  
 
  
  
  
    super.onPause();     
  
  
  
 
  
  
  
    if (webView != null) {         
  
  
  
 
  
  
  
        webView.onPause();     
  
  
  
 
  
  
  
    } 
  
  
  
 
  
  
  
} 
  
  
  
 
  
  
  
@Override 
  
  
  
 
  
  
  
protected void onResume() {     
  
  
  
 
  
  
  
    super.onResume();     
  
  
  
 
  
  
  
    if (webView != null) {         
  
  
  
 
  
  
  
        webView.onResume();     
  
  
  
 
  
  
  
    } 
  
  
  
 
  
  
  
} 
  
  
  
 
  
  
  
@Override 
  
  
  
 
  
  
  
protected void onDestroy() {         
  
  
  
 
  
  
  
    if (webView != null) {         
  
  
  
 
  
  
  
        webView.clearCache(true); //清空缓存    
  
  
  
 
  
  
  
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {             
  
  
  
 
  
  
  
            if (webViewLayout != null) {                 
  
  
  
 
  
  
  
                webViewLayout.removeView(webView);             
  
  
  
 
  
  
  
            }             
  
  
  
 
  
  
  
        webView.removeAllViews();             
  
  
  
 
  
  
  
        webView.destroy();         
  
  
  
 
  
  
  
    }else {             
  
  
  
 
  
  
  
        webView.removeAllViews();             
  
  
  
 
  
  
  
        webView.destroy();             
  
  
  
 
  
  
  
        if (webViewLayout != null) {                 
  
  
  
 
  
  
  
            webViewLayout.removeView(webView);            
  
  
  
 
  
  
  
        }         
  
  
  
 
  
  
  
     }   
  
  
  
 
  
  
  
     webView = null;     
  
  
  
 
  
  
  
  }    
  
  
  
 
  
  
  
}  
 
 
 

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

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

当前名称：WebView想说爱你不容易啊
文章地址：http://www.shufengxianlan.com/qtweb/news29/387829.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联