前端H5与Android的WebView深度交互的Demo
之前有写的相关文章，一是太乱了，二是东西没给全，很难理解。应读者要求给出完整的安卓和前端h5交互的Demo：
github地址：https://github.com/LiuTangLei/JS2JavaDemo，可以使大家有这方面需求可以快速集成（Ctrl+V）
这个例子中关于注入js代码和保存匿名函数相比与之前的文章有做过修改，提高了注入js代码的稳定性和支持并发调用。
注入代码
由于需要注入很多的js代码，采用之前的string方式一段一段的注入太不稳定，也太繁琐，这里采用拦截约定好的js文件来注入，比如demo中html的head标签都去加载了一个不存在的js文件：
<script type="text/javascript" src="http://www.baidu.com/native-app.js"></script>
这个native-app.js文件就是我们约定好的文件名，不用担心百度或者是任何地方没有这个文件，因为我们压根就不会去加载，加载之前就会被拦截替换掉。
在demo的webviewActivity中已经拦截替换了，如图：
这里两个shouldInterceptRequest都要重写
至于为什么不由前端提供这个js代码，而是自己注入，因为android和ios有差异，而且这样我们修改sdk也非常的方便了
关于并发
因为后来项目中的h5页面也要使用参数加密再传给后台，他也懒得写参数加密的东西了，直接用原生写好的，他把参数传给我，我再把加密好的参数交给他，这里必须保证加密前传入的匿名回调和加密后触发调用的匿名回调要是同一个，所以给funcName后面添加了一个随机字符串来保证唯一性。
Demo结构
有三个html5和android交互的示例，分别是获取图片，并发调用和跳转本地页面并获取数据.
交互流程
这里举例选取系统相册的流程：
-
index1.html中，调用local.js里提供的App.pickPhotoFromLibrary( _ , _ )
-
分别传入需要告诉原生app的数据{"needCompress": false}，和原生app拿到图片之后需要去触发的 function(data) {...}匿名回调
-
local.js中的pickPhotoFromLibrary函数去调用 sdk_launchFunc("pickPhotoFromLibrary", data, callback);
这里"pickPhotoFromLibrary"的这个funcName自己定义，不要与其他的相同就行，data就是h5传过来的data，callback就是h5传过来的那个匿名回调 -
local.js中的sdk_launchFunc拿到前面传过来的三个东西，首先是给funcName添加随机字符串来保证唯一性，然后将这个唯一funcName作为键，callback作为值，存入SDKNativeEvents这个容器当中
-
保存完键值对后，接着会调用JavaAndJSBridge.java中提供的native_launchFunc，这个方法添加了@JavascriptInterface并且这个类已经绑定到webview上了，所以可以被js代码调用
-
WebViewActivity.java中，跳转到系统相册，并选择图片，得到h5需要的数据之后调用 mWebView.loadUrl("javascript:sdk_nativeCallback('" + pickPhotoName + "','" + jsonObject + "')");
-
读取这个url，实际上是在调用 local.js中的sdk_nativeCallback，根据传入的funcName取出之前存入的匿名回调，传入这个回调需要的json数据并运行
与前端的约定
上面步骤看起来好像很多，但是实际上我们给前端提供的交互文档只需要说明两个事情：
- 需要加载一个约定好的名字的，不存在的js文件，由我们来拦截替换，如demo中的native-app.js
- 给前端暴露的接口，包含前端需要传入的东西和给予前端的东西。（注意，在这个sdk中，就算我们原生app不需要前端的东西，也要传入一个空对象）
-
例子：
只需要提供这个文档给前端就行
上面的文档和ios的同学一起制定就行，h5不用关心我们是怎么实现的，他只用关心调用这个方法需要传入什么和能拿到什么就行了
好了，就写到这里吧，大家有什么不明白的可以回复或者发私信，我有时间一定解答
