本文主要针对与原生混合开发中的交互问题进行讨论，当然，这仅仅是鄙人的见解，求同存异。
本文主要针对以下问题进行总结：
- 如何实现与的交互？
- 针对启动慢问题，如何优化？
- 如果存在多个模块包，如何实现模块包的完全更新与部分更新？
- 针对以上问题的，如何建立一个公用的工具集（框架？）？
- 遇到的问题及解决办法。
OK, 开始吧！
关于如何实现与交互，其实看官方的 Building web apps in WebView 这篇文章就够了，如果你觉得英文不好理解，那也没关系，因为接下来的内容会覆盖这些技术点。
- 交互模型：
其实这里可以进一步将抽象化，那么就得到了如下图关系：
显然这里的问题就是如何实现和了。
对于而言（调用），其实是比较固定的写法,比如，如果我们想要动态获取网页中某个标签的,那么会这么写：
这种写法是固定的，但是方法参数比较多时就比较蛋疼了，拼凑方法名和多个参数是很烦人的，且容易出错，因而我们可以抽象出以下工具类：
这里直接将视为我们执行代码的工具，如下示例是给传递当前网络类型，由于整合了代码的拼接过程，因此只需要传入具体方法名称和方法的字符串参数即可。
- 对于(调用) , 我们需要在我们需要注入的方法前加上注解才能将方法暴露出去，然后将包含此方法的类对象注入进去，如下一个实际场景, 需要从原生中获取用户的账号信息，那么可以这么写：
先注入包含对应方法的类对象：
其中的声明如下：
以上便是与原生交互的交互过程，具体代码在文章末尾会给出地址。
1. 启动速度优化
我们先来做个实验，测试一下包含的在优化前后的启动速度，可以这么做：根据的生命周期，在的第一行处记录下初始时间，在最后一行记录下结束时间，然后计算时间差，作为衡量启动速度的参照，多次测试，记录时间差。结果如下：
根据以上结果可以看出，优化后要比优化前的启动速度快个秒，且抖动较小。可以注意到其中包含一个叫做的时间差，据此，聪明的你肯定能想到我所谓的优化是做了什么操作。嗯~，其实就是使用之前，在合适的地方和时机先将其初始化，之后复用这个创建好的实例，这里我是这么写的：
然后在合适的地方初始化：
添加到布局中：
在时从界面中解除绑定：
2. 多模块包自动更新
支持多模块自动更新的目的是方便更新维护，减少用户升级所带来的流量开支，每个模块包之间可以是相互独立的，也方便于团队开发，仅需要和前端约定好文件目录即可。
先来看看模块的自动更新流程（完整更新）:
上面是模块包的完整更新过程，还可以进行补丁更新，而所谓补丁更新就是，下载的更新包中仅仅包含需要更新的文件，因而对应于上面流程而言，就是少了删除本地旧版本文件的过程，而直接解压替换对应文件。这种更新方式有以下优缺点：
- 可以极大的减少更新时对用户的流量消耗，且速度极快。
- 但是需要前端明确抽取所更新的文件，否则会出现问题，可能这个过程会繁琐点。
- 如果使用类似于这种模板框架编写的界面，因为需要编译为代码，然后仅剩一个入口，导致抽取定位繁琐，且每次编译出来的文件名可能不一样，因此不能使用补丁更新这种方式，只能分包，然后进行完整更新。
具体代码比较多，就补贴了，请看 github这里， 其中是配置信息与无关逻辑的抽离类。
上面已经逐个介绍了混合开发中交互与更新的逻辑，工具集已经放到 的H5MixDevelopTools，感兴趣的童鞋可以看看，虽然这里我并没有把接口和界面放上去。
遇到的实际问题与解决办法：（以项目中使用作为模板引擎来编写页面为例）
1. 界面加载不出来，显示空白，怎么办？
解决办法：给加上下面配置即可
2. 联调时发现总是找不到定义的交互接口方法，怎么办？
原因与解决办法：首先，默认情况下，在对代码进行混淆处理，因此如果你遇到了这个问题，那么请手动配置以关闭混淆（具体做法请自行查找吧）。如果已经不混淆了，但是依然找不到对应的方法，怎么办？我和我的小伙伴是将接口文件放到中将其视作一个组件来使用的，然后具体到接口方法的话，将方法挂到对象下，如下示例:
3. 图片选择问题，怎么选择和预览图片？
先来个具体场景：比如说我们项目中有个评论功能，这个功能是用写的，然后每次评论时可以选择数量小于3张的评论图片，附带文字上传至服务器。
此时你会发现直接使用没法调用起系统相片图库和相机，更没法在旁边显示预览图，这时你可能需要这些配置：
接着就是选择图片有两种方案：
- 通过复写和,但是方法已经变为系统了，所以没法直观的找到它，但是，即使找到了，你也会发现去适配不同的机型也是坑的很。可以先看看 android-4-4-webview-file-chooser-not-opening, 而因为我不是直接调用图库选择，而是先开启一个来选择是通过相机还是图库取图，这样带来的问题就是，如果我仅仅是开启了，然后不做任何选择地关闭掉它，不调用传值的话，那么只能启当一次弹窗，之后再点就没反应了，而如果我每次关闭时通过传个，那么连续启动两次后又会异常闪退，嗯，这坑我就不跳了，我选择第二种方案。
- 第二种方案就是直接建立交互接口，点击图片选择控件后调用建立好的原生图片选择接口取图，当我们选好图之后在方法中执行方法将图片的本地路径传给处理，嗯，到这里的话好说，这个流程咱都熟悉。那么来说说如何在上预览，以及如何将这个路径的图片作为文件上传。
下面是选完图片后我们将图片路径回调到的方法。
上面,这两个挂载到的变量，这两个数组可以直接在全局引用了，记得在使用后清空，不然会影响到下次使用。
嗯，看起来很完美，选图、预览很完美，但很快你就会发现这实际是个，在哪里呢？注意到上面的，这么使用会导致上传到服务器的图片大小为 ， 为啥呢？因为第一个参数实际是图片的实际数据（字节数组），它的长度代表着文件的大小，因此，上面这样做虽然能够预览，但是无法仅仅直接通过一个本地路径就读取到文件流数据，也就不能上传成功了。
怎么办呢？思考了很久，发现自己一直困在如何通过一个本地路径建立并上传的思维当中，于是找前端和后台的小伙伴交流，最终确定的方案是：选择图片后先将图片编码成字符串再注入到处理，端收到数据后进行图片数据绑定，以及上传到服务器，服务器端进行解码处理，然后保存成本地图片。
于是可以稍微修改成这样：
不过这里依然可能存在一些问题，比如内存溢出，因为图片本身可能很大，尤其是使用相机直接拍照取图的情况，一张图片可能会有，直接编码为图片本身会比较耗时，而编码出来的字符串会存在于内存中，因此很有可能会导致端出现内存溢出的情况，因此这里可以考虑先压缩后编码，这样可以降低内存耗尽的几率。
本文基于实际项目，介绍了混合开发中与原生交互的实现，然后以一个小实验测试了含的的启动速度，优化，然后测试优化后的启动速度，接着介绍了分模块更新的逻辑，最后整理了一套工具集，感兴趣的童鞋可以看看 H5MixDevelopTools，欢迎指正。
使用混合开发确实能够提升开发速度，但是实际体验确实一般，适合非常追求开发速度的场景。