Android 和H5之间的交互-框架篇

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

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

 

其实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> 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 ObservableOnSubscribe