作者 | YouJZ

地址 | http://www.jianshu.com/p/02afb387b6b4

声明 | 本文是 YouJZ 原创，已获授权发布，未经原作者允许请勿转载

前言

就目前而言，app 的开发主要分三个方向：native app、hybrid app以及web app。个人感觉三种app的体验感是逐渐递减的。

核心代码

hybrid app和web app的开发的不同之处就是前者需要自己提供和实现前端需要的接口，而后者则是借助一些框架(比如icon、dcloud等)。实质上都差不多，但前者更灵活一些。如果你还不知道Hybrid App开发中H5和native如何进行交互,那么相信你看完这篇《Android和H5交互-基础篇》，也行就许明白。

demo

其实H5和native的交互也就那么几个步骤，为了前端能够统一的调用原生提供的接口，通常前端和native(ios和Android)端会做好规范。前面一篇文章主要是介绍两者间是如何进行交互的，那么这篇文章我向大家介绍一种基于两者交互的简单封装。
如果你在为前端写接口时，你可能会这么写：

/**     * dec: js调用原生接口类     * createBy yjzhao     * createTime 2016/11/15 13:50     */    public class NativeApi {

    /**     * 拨打电话     *     * @param mobile 电话号码     */    @JavascriptInterface    public void openPhone(String mobile) {        ...    }

    /**     * 发短信 一个参数 ISP调用     *     * @param smsto 电话对方电话号码     */    @JavascriptInterface    public void opneMsg(String smsto) {        ...    }     /**      * 网络请求代理      *      * @param url  加载的网络URL      * @param data 请求的参数      * @param jsRe 调用的函数名      */    @JavascriptInterface    public void reqProxy(String url, String data, String jsRe) {        ...    }

     /**     * 拍照     */    @JavascriptInterface    public String takePhoto(final String callback) {        ...    }

    /**     * 选择照片     */    @JavascriptInterface    public String selectPhoto(final String callback) {        ...    }

    /**     *  查看图片     * @param urls 图片地址(多个图片用，隔开)     */    @JavascriptInterface    public void browsePhoto(String urls){        ....    }    /**     * 读取文件     *     * @param url 路径     * @return     */    @JavascriptInterface    public String loadFile(String url) {       ....    }}

如果是将native接口写成这样的话那么前端js调用的话可能就会是这样：

//拨打电话NativeAPI.openPhone(params);//发送短信NativeAPI.opneMsg(params);//发送网络请求NativeAPI.reqProxy(params);//拍照NativeAPI.takePhoto(params);//选择照片NativeAPI.selectPhoto(params);//查看照片NativeAPI.browsePhoto(params);//读取文件NativeAPI.loadFile(params);

当然这么写也没问题，但是就觉得麻烦，你觉得呢？

如果你也是这么写Android接口的话，你会发现在维护起来会有些问题的。第一这个类就会变得很臃肿，第二我们知道js调用Android接口时是运行在一个叫jsBrigde(我没记错的话)的子线程中,而Android调用js方法时是运行在main线程中的，如果需要回调js 方法，这里我们需要做一个线程的切换。如果我们将这个类中的每一个接口方法都独立出去单独写一个类，然后通过统一的接口暴露给前端调用，在调用js方法时统一切换至主线程中，那这样是不是会好一点呢？

那么如何封装呢？我介绍下我的思路：

Android 端

step1 给 js 暴露一个统一调用的接口 sendMessage

private void addJavascriptInterface(WebView webView) {    webView.addJavascriptInterface(new Object(){        @JavascriptInterface        public void sendMessage(String jsonStr){            mHandleJsMessage.handle(jsonStr);        }      },"native");  }

step2 将 js 传过来的数据进行统一的处理

/** *  处理js传递过来的数据 * @param jsonStr js传递的数据 * @return 是否处理 */   @TargetApi(Build.VERSION_CODES.KITKAT)  public  boolean handle(String jsonStr) {    JsMessage jsMessage = new Gson().fromJson(jsonStr, JsMessage.class);    String action = jsMessage.getAction();    jsCallback = jsMessage.getCallback();    if (null == jsMessage.getAction())        return false;    if (HandleAction(jsonStr, action, mActionMap)) return true;    return false;  }

/** *  根据js传递过来的action将事件分发下去 * @param jsonStr js传递的数据 * @param action js意图 * @param map js意图集合 * @return 是否处理存在处理次意图的接口 */  @TargetApi(Build.VERSION_CODES.KITKAT)  private boolean HandleAction(String jsonStr, String action, Map<String, Class<? extends JsAction>> map) {    for (String mapAction : map.keySet()) {        if (mapAction.equals(action)) {            try {                mJsAction = map.get(mapAction).newInstance();                if (mJsAction != null) {                    mJsAction.handleAction(mContext, jsonStr);                }            } catch (InstantiationException | IllegalAccessException e) {                e.printStackTrace();            }            return true;        }    }    return false;  }

step3 将线程切换至主线程并将处理结果返回前端

public void callback(final WebView webView, final String callback, final Object result){    //切换至主线程    Observable.create(new Observable.OnSubscribe<Object>() {        @Override        public void call(Subscriber<? super Object> subscriber) {            subscriber.onNext("");        }    }).subscribeOn(Schedulers.immediate())    .observeOn(AndroidSchedulers.mainThread()).subscribe(new Observer<Object>() {        @Override        public void onCompleted() {}        @Override        public void onError(Throwable e) {}        @Override        public void onNext(Object o) {            if (null==result||null==callback||"".equals(callback))return;           String resultStr= new Gson().toJson(result);            String url = "javascript:"+callback+"("+resultStr+")";            webView.loadUrl(url);        }    });}

这个三个步骤就是核心思路，具体的实现就不在这贴代码了，感兴趣的可以查看源码，地址文末会给出。
再看下前端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.callback!=="undefind") {            params.callback(data);        }    }    var sendDataStr=JSON.stringify(Senddata);    window.native.sendMessage(sendDataStr);  }  $.native = native;})($);

这段代码是不是很简单，值得注意的是js传给native的json数据格式是固定的：即

how to use?

android端：

  compile 'com.zyj:hybridbridge:0.1.0'//添加依赖

1、首先在activity中初始化

JsBridge.getInstance().init(this, webView)

2、然后为添加需要处理的action以及相应的处理类

JsBridge.getInstance().addJsAction(JsDeviceInfo.ACTION, JsDeviceInfo.class);

 //JsDeviceInfo的写法实例(这个类需继承JsAction这个抽象类并实现handleAction()方法)public class JsDeviceInfo extends JsAction {

 //这个action需和前端相对应public static final String ACTION = "deviceinfo";

@Overrideprotected void handleAction(Activity context, String jsonStr) {    HandleResult resultEntity =new HandleResult();    DeviceInfoEntity deviceInfoEntity =new DeviceInfoEntity();    deviceInfoEntity.setDeviceName("我的Android客户端！");    resultEntity.setData(deviceInfoEntity);    //处理完相关业务之后将结果发送出去，post之后会自动调用js的callback方法    RxBus.getInstance().post(resultEntity);  }}

前端：

function callback(backdata) {            //native处理完后会回调用这个方法        }  $.native({            action: "deviceinfo",            callback: callback        });

看完之后是不是觉得不管是前端还是native端都很简单？所有的action以及传递的参数格式都可以自定义，只需保证两端统一即可。
如果你感兴趣，源码在这 HybridBridge https://github.com/YouJZ/HybridBridge，欢迎start，有什么问题可以留言我会维护改进的