前言

先讲讲为什么会有这篇blog，话说前几天做个模块，要求是这样的：
做一个webview的页面，功能类似于微信发朋友圈一样，要求能上传本地图片到webview中进行展示，并按用户喜好添加和删除，当用户点击发布的时候，将这些图片上传至阿里云oss，收到oss响应后封装页面信息提交给服务器

技术要点

1. webview与native的交互
2. webview显示客户端本地图片的方式
3. webview加载大量图片的问题(优化方案)
4. 自定义关于webview的缓存系统

webview与native的交互

关于交互其实网上有很多文章，在之前我也写过一篇关于webview与native交互方案的blog： Android混合开发的入门和方案
因此在这个demo中我采用的也是JsBridge的方式来让webview与native进行通信，所以主要提一下其中一些坑：

1. 使用JsBridge的方式，在子线程是无法发送消息给WebView的
2. 如果webview要加载本地文件，必须设置mWebView.getSettings().setAllowFileAccess(true);
3. 如果html文件存在于服务器中，就算你按照第二点设置了，那webview也无法读取本地文件，会报not allowed to load local resource(解决办法后面我会给出)，这个坑异常深！！！
4. 使用base64编码来让webview中img便签加载编码后的图片的异常(大坑)

webview显示客户端本地图片的方式

直接设置

拿到本地文件的路径，然后拼装便签，设置其src属性为”file://”+路径，webview就会自动去找此地址(“file://”是属性webview的一种协议，就像我们的http协议的道理)

    //imgPaths是我们选择的那些图片的本地路径
    private void adapterH5Data(List<String> imgPaths){
        String result = "";
        //拼装标签
        for(int i=0;i<imgPaths.size();i++){
            result += "<img src=\"file://"+imgPaths.get(i)+"\" height=\"70\" width=\"70\"/>";
        }
        //发送给webview容器
        mWebView.callHandler("adapter",result,null);
    }

那么在我们的html文件中，有一个这样的方法：

    function adapter(pars){
   
            //直接把native拼装好的html添加到id为info_img的便签里面
            $("#info_img").prepend(pars);
    }

Base64编码

base64编码大家应该都有接触过，还记得宝宝当年刚撸项目的时候，图片上传就是利用app把图片转化为base64，然后把这段字符串发送给服务器接收再进行解码，差点把老师气吐血。
那么这个方案，就是把目标路径的文件，通过base64编码编写成字符串，然后设置到img便签的src属性，这样img便可以显示出图片。