混合 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);
})
})()
