酷炫实现WebView与Native完美融合

Posted 先知丨先觉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了酷炫实现WebView与Native完美融合相关的知识，希望对你有一定的参考价值。

##前言
首先看个效果图：
这里背景是native的，左侧边栏也是native的，右侧内容是透明web页面，是不是很酷炫的样子，而且我们还可以自己加蒙版背景，是不是很酷。
这个场景非常适合左侧目录是本地的，然后内容是加载web页面，这样可以实时跟新内容，而且不会像纯h5那样尴尬。
跟多场景小伙伴可以自己挖掘，只是提供一个思路。

##实现步骤

1.web页面设置透明（opacity）
2.安卓webview控件设置透明
3.阻止跳转自带浏览器
4.优化：web页面缓存以及定时缓存清理

###1.web页面设置透明（opacity）
首先我们想要实现透明效果，就需要让我们的web页面先实现透明效果，不过本人对web不是很精通，只是知道使用opacity属性就可以实现页面的透明。让我们看一下代码：

<html>
  <body opacity: 0.5>
      <p style="font-size:20px;text-align:center;">
        <h1>透明WebView与Native完美结合</h1>
      </p>
      <p style="font-size:20px;text-align:center;" >
        <a href="http://blog.csdn.net/github_33304260/article/details/73194544">酷炫的外部开启Activity新姿势</a>
      </p>
      <p style="font-size:20px;text-align:center;">
        <a href="http://blog.csdn.net/github_33304260/article/details/72526237">Glide 4.0.0 RC0 使用详解</a>
      </p>
      <p style="font-size:20px;text-align:center;">
        <a href="http://blog.csdn.net/github_33304260/article/details/71779983">android自定义View【实战教程】5⃣️---Canvas详解及代码绘制安卓机器人</a>
      </p>
      <p style="font-size:20px;text-align:center;">
        <a href="http://blog.csdn.net/github_33304260/article/details/71077965">Glide二次封装库的使用</a>
      </p>
      <p style="font-size:20px;text-align:center;">
          <a href="http://blog.csdn.net/github_33304260/article/details/70213300">Picasso，Glide，Fresco对比分析</a>
      </p>
      <p style="font-size:20px;text-align:center;">
          <a href="http://blog.csdn.net/github_33304260/article/details/70142115"> Android自定义View【实战教程】4⃣️----BitmapShader详解及圆形、圆角、多边形实现</a>
      </p>
  </body>
</html>

你只要知道web页面需要透明就好了，有前端的兄弟会为你写好的，这里就不多介绍啦！

###2.安卓webview控件设置透明
非常简单，两行代码：

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webView.setBackgroundColor(0);

setBackgroundColor(0)这句代码只要有就行，至于里面设置的数值是多少貌似没有关系,但是不能去掉，不然就会如下图一样，原形毕露。

###3.阻止跳转自带浏览器
通过上面两个步骤我们已经可以实现我们开始看到的那个效果啦，不过这时候还是会出现问题，那就加载某些页面的时候会跳转到系统自带的浏览器，那么我们接下来解决这个问题。

这个实现起来也是非常简单的：
我们只需重新setWebViewClient，然后重写shouldOverrideUrlLoading方法。
代码如下：

        webView.setWebViewClient(new WebViewClient()
          // 重写此方法保证在当前webview里跳转，不跳到浏览器那边
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) 
                view.loadUrl(String.valueOf(request.getUrl()));

                return true;
            
        );

现在已经可以非常完美的实现上述功能了，不过为了更加完美我们还需要加入缓存。

###4.web页面缓存及定时缓存清理

WebView的缓存可以分为页面缓存和数据缓存：
1，页面缓存: >指加载一个网页时的html、JS、CSS等页面或者资源数据。 >这些缓存资源是由于浏览器的行为而产生，开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据。
2.数据缓存 : >数据缓存分为AppCache和DOM Storage两种。 >这些缓存资源是由开发者的直接行为而产生，所有的缓存数据都由开发者直接完全地掌控。

缓存模式(5种)

1.LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
2.LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
3.LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式
4.LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
5.LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

本人建议：判断是否有网络，有的话，使用LOAD_DEFAULT，无网络时，使用LOAD_CACHE_ELSE_NETWORK

webView.getSettings().setjavascriptEnabled(true);
        // 设置 缓存模式
        if (NetUtils.isNetworkAvailable(MainActivity.this)) 
            webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
         else 
            webView.getSettings().setCacheMode(
                    WebSettings.LOAD_CACHE_ELSE_NETWORK);
        
        // webView.getSettings().setBlockNetworkImage(true);// 把图片加载放在最后来加载渲染
        webView.getSettings().setRenderPriority(RenderPriority.HIGH);
        // 支持多窗口
        webView.getSettings().setSupportMultipleWindows(true);
        // 开启 DOM storage API 功能
        webView.getSettings().setDomStorageEnabled(true);
        // 开启 Application Caches 功能
        webView.getSettings().setAppCacheEnabled(true);

我们设置缓存在必要的时候我们还需要清理缓存：

		webview.clearFormData();
        webview.clearHistory();
        webview.clearCache(true);

关于清除缓存的文章一大堆，这里只给大家提供一个思路，具体可以百度，有问题可以扫码左边栏二维码，进群与小伙伴交流。

同时为了防止内存泄漏我们还需要在onDestory的时候移除webview：

	/***
     * 防止WebView加载内存泄漏
     */
    @Override
    protected void onDestroy() 
        super.onDestroy();
        webView.removeAllViews();
        webView.destroy();

让我们来看一下效果： 其中有透明页面，有的不是透明页面，为了给大家对比呈现一下。

下面是源码地址： http://download.csdn.net/detail/github_33304260/9902990

本人github：https://github.com/libin7278/ImageLoader 欢迎点赞

扫码关注公众号“伟大程序猿的诞生“，更多干货新鲜文章等着你～

公众号回复“资料获取”，获取更多干货哦～

有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码

以上是关于酷炫实现WebView与Native完美融合的主要内容，如果未能解决你的问题，请参考以下文章

“洞见”升维——当大数据可视化与业务BI完美融合！

react-native-page-scrollview 的使用方法(实现酷炫的分页轮播效果)

跨端开发面面谈之基于WebView的Hybrid开发模式

Android WebView开发：WebView与Native交互

Android WebView开发：WebView与Native交互

Android WebView开发：WebView与Native交互