WebView想说爱你不容易啊

    xiaoxiao2021-04-15  265

    为什么要使用WebView

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

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

    使用

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

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

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

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

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

    <LinearLayout  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 viewint 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这样的控件。

    作者:mehao 来源:51CTO 相关资源:七夕情人节表白HTML源码(两款)

    最新回复(0)