搭建 Android 混编框架（1）

混合 Android 框架流行一时，个人也用过像 hbuilder 或 cordova 这样框架开发过一两个应用，只是停留在用的层面上，直到前一段时间才研究了一下其内部的机制，自己通过学习别人的思想而受启发自己研究了一套解决方案。

在 Android 混合开发的框架中，有以下几个技术难点是我们需要克服的。

• javascript 和原生 java 互调
  首先我们来看框架中，是如何实现 javascript 和 java 的互调，也就是两种语言间的通讯。传统方式是通过暴露全局对象来实现 javascript 和 java 进行互调方法，这样做耦合度高，不安全，而且不可控。

思路是 javascript 端向 dom 添加一个 iframe，然后通过 iframe 发起请求来调用原生的方法，传递函数，这样达到解耦的目的，自然也提高了应用的安全性。我们需要定义 url 的特定 schema 来区分普通 url 请求和调用原生方法的请求。

<iframe srt="zidea://<原生方法名>?param=<参数对象>&callback=<回调>" style="display:none;">
zidea://<原生方法名>?param=<参数对象>&callback=<回调>

这里我们解释一下

• schema: zidea 作为 schema 表示这一次请求原生 java 方法的请求，而并非普通 http 请求。
• 原生方法名: 我们调用 java 端对应的原生方法名称，其实 java 我们可以定义 action 来对应这次请求的原生方法名
• 参数: 这里可以以对象形式来传递参数以备原生方法使用
• 回调: 当原生方法执行完毕会调用这个回调函数以将处理的结果传递回 javascript 端。

var Native = (function(){
    var _SCHEME = "zidea"
    function _callNativeMethod(_method, _param, _callback){
        var param = JSON.stringify(_param);
        
        var url = _SCHEME + "://" + _method + "?param=" + param + "&callback=" + _callback;
    
        var iframeEle = document.createElement("iframe");
        iframeEle.setAttribute("src",url);
        iframeEle.style.display = "none";
        console.log(url);
        
        // var bodyEle = document.getElementsByTagName("body");
        document.body.appendChild(iframeEle);
        setTimeout(function(){
            iframeEle.remove();
        },1000);

    }
    return{
        goto:function(intent){
            _callNativeMethod("startActivity",intent.param,intent.callback);
        },
        updateHeader:function(obj){
            
            console.log(obj);
            _callNativeMethod("updateTitile",obj.param,obj.callback);
        }
    }
})()

通过上面解释，我们来简单地在 javascript 这一侧实现一下，定义一个 schema 为 zidea
然后定义一个全局对象 Native 接受一个立即执行函数的返回对象，其中内部封装一个 _callNativeMethod 方法。方法就是将一个发起调用原生方法请求的 iframe 添加到 dom 上，然后以一定时间内销毁 iframe 以达到销毁请求的目的。

也可以直接在点击事件中发起请求，这里使用到了 jQuery。上面代码是对这个封装。

(function(){
    $("#updateOneWebview").on("click",function(){
        // alert("hello");
        var url = "zidea://packagename?param={param1:one,param2:tow}&callback=cb";
        var $iframe = $('<iframe style="display: none;" src="' + url + '"/>')
        $('body').append($iframe);
        setTimeout(function(){
            $iframe.remove();
        },1000);
    });

    $("#gotoThreePage").on("click",function(){
        // alert("hello");
        var url = "zidea://forward?param={topage:three,SpParamType:H5,SpParamAnimation:push,hasnavgation:true}&callback=forwardcallback";
        var $iframe = $('<iframe style="display: none;" src="' + url + '"/>')
        $('body').append($iframe);
        setTimeout(function(){
            $iframe.remove();
        },1000);
    })
})()