Android和H5交互-框架篇

Android和H5交互-框架篇
就目前而言，app的开发主要分三个方向：native app、hybrid app以及web app。

个人感觉三种app的体验感是逐渐递减的。

hybrid app和web app的开发的不同之处就是前者需要自己提供和实现前端需要
的接口，而后者则是借助一些框架(比如、等)。

实质上都差不多，但前者更灵活一些。

如果你还不知道Hybrid App开发中H5和native如何进行交互,那么相信你看
完这篇，也行就许明白。

demo
其实H5和native的交互也就那么几个步骤，为了前端能够统一的调用原生提供
的接口，通常前端和native(ios和Android)端会做好规范。

前面一篇文章主要是介绍两者间是如何进行交互的，那么这篇文章我向大家介绍一种基于两者交互的简单封装。

如果你在为前端写接口时，你可能会这么写：
如果是将native接口写成这样的话那么前端js调用的话可能就会是这样：
当然这么写也没问题，但是就觉得麻烦，你觉得呢？
如果你也是这么写Android接口的话，你会发现在维护起来会有些问题的。

第一
这个类就会变得很臃肿，第二我们知道js调用Android接口时是运行在一个叫jsBrigde(我没记错的话)的子线程中,而Android调用js方法时是运行在main线程
中的，如果需要回调js 方法，这里我们需要做一个线程的切换。

如果我们将这个
类中的每一个接口方法都独立出去单独写一个类，然后通过统一的接口暴露给前端调用，在调用js方法时统一切换至主线程中，那这样是不是会好一点呢？
那么如何封装呢？我介绍下我的思路：
step1 给js暴露一个统一调用的接口sendMessage
step2 将js传过来的数据进行统一的处理
step3 将线程切换至主线程并将处理结果返回前端
这个三个步骤就是核心思路，具体的实现就不在这贴代码了，感兴趣的可以查看源码，地址文末会给出。

再看下前端js怎么封装:
/////////////////////////////// // 调用原生接口 // /////////////////// //////////// ;(function($) { "use strict"//使用严格模式 function native(params) { params = params，{}; if (params==="undefind")return; if (params.action== ="undefind")return; //固定的三个属性和native端一样，否则native端和解析
出错 var Senddata={ action:params.action, callback:"nativeCallback", data:params.data, } window.nativeCallback = function(data) { if (params.call back!=="undefind") { params.callback(data); } } var sendDataStr=JSO
N.stringify(Senddata); window.native.sendMessage(sendDataStr); } $.native = n ative; })($);
这段代码是不是很简单，值得注意的是js传给native的json数据格式是固定的：即
{ "action":"action", "callback":"nativeCallback", "data":{这里的数据格式和nati ve端的处理action实现类数据格式需协商一致} }
how to use?
android端：
1、首先在activity中初始化
JsBridge.getInstance(.init(this, webView)
2、然后为添加需要处理的action以及相应的处理类
前端：
function callback(backdata) { //native处理完后会回调用这个方法 } $. native({ action: "deviceinfo", callback: callback });
看完之后是不是觉得不管是前端还是native端都很简单？所有的action以及传递的参数格式都可以自定义，只需保证两端统一即可。

如果你感兴趣，源码在这，欢迎start，有什么问题可以留言我会维护改进的。