手记

搭建 Android 混编框架(1)

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

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

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

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

<iframe srt="zidea://<原生方法名>?param=<参数对象>&callback=<回调>" >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  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  src="' + url + '"/>')
        $('body').append($iframe);
        setTimeout(function(){
            $iframe.remove();
        },1000);
    })
})()



作者:zidea
链接:https://www.jianshu.com/p/8b223dcb90c2


0人推荐
随时随地看视频
慕课网APP