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

在 Android 混合开发的框架中,有以下几个技术难点是我们需要克服的。javascript 和原生 java 互调

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

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

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 = $('')
$('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 = $('')
$('body').append($iframe);
setTimeout(function(){
$iframe.remove();
},1000);
})
})()

作者:zidea