H5和Native交互原理

Posted 2023-05-04

参考技术A

Hybrid架构的核心就是JSBridge交互，而实现这个交互的前提是弄清楚H5和Native端的交互

本文主要介绍Native端（android/ios）和H5端（泛指前端）的交互原理

原生和前端的交互有两种方式：url scheme以及JavaScriptCore（在Android中是addJavascriptInterface）

url scheme适用于所有的系统设备（低版本Android和低版本iOS都适用）

但是url scheme毕竟是通过url拦截实现的，在大量数据传输，以及效率上都有影响

另一种方法则在低版本中会有这样或那样的问题

如javascriptCore不支持iOS7以下，addJavascriptInterface在4.2以前有风险漏洞

当然了，时至今日，这些低版本造成的影响已经慢慢不再

这个是最广为流传的交互方式，起因是因为在hybrid刚出来时，很多低版本都需要兼容，因此几乎都用的这种

一些概念：

一般清空下，url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的

具体为,可以用系统的OpenURI打开一个类似于url的链接(可拼入参数),
然后系统会进行判断,如果是系统的url scheme,则打开系统应用,
否则找看是否有app注册这种scheme,打开对应app

需要注意的是,这种scheme必须原生app注册后才会生效,如微信的scheme为(weixin://)

而本文中混合开发交互的url scheme则是仿照上述的形式的一种方式

具体为,由前端页面通过某种方式触发scheme(如用iframe.src),
然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,
根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行等

协议类似于： quickhybrid://xxx

一般这种交互的url没有必要在原生app配置中注册

注意⚠️： ️iOS10以后，urlscheme必须符合url规范，否则会报错。

基本原理：

如下图：

相比于其它方案的优点：

所以如果需要兼容这类型低版本的机型，url scheme方案是不二选择

分别包括Android，iOS中H5和原生互相调用，总结如下：

H5调Android：
首先，原生webview需要先注册可供前端调用的JS函数

然后H5中即可调用原生中注册的函数

注意：

Android调H5：

在4.4版本之前

在4.4及以后（包括）

注意：

H5调iOS：

以OC为例

首先，需要引入JavaScriptCore库

然后原生需要注册API

之后前端就可以调用了

注意：

iOS调H5：

注意：

本文转自： http://www.cnblogs.com/dailc/p/8097598.html

EasyJSWebView原理分析

概述

在iOS6之前，native只能调用webiew里的js代码，官方没有提供js调用native方法的接口。到了iOS7，官方提供了JSContext用来与js交互，native和js可以双向调用。iOS8之后，提供了WKWebview，开放了很多接口来处理H5和native之间的交互，H5与native之间的交互更加的便利了。为了兼容各个版本的js与native的交互，大多数app都没有使用官方提供的与js与native交互的方法，而是使用第三方框架，通过拦截URL的方式实现交互。现在比较流行的一个交互框架是WebViewJavascriptBridge，一直有人维护。而目前财富宝iOS中使用的交互框架是EasyJSWebView，此框架是一个非常老的框架，已经无人维护了，最近一次维护是5年前。财富宝iOS也还没使用WKWebView，使用的是老的UIWebVeiw，下面我们就分析一下在UIWebVeiw中此框架实现js跟native交互的原理。

具体分析

我们先来熟悉一下native中跟js关系比较密切的方法。

当UIWebview在加载一个url的时候，ios系统提供了几个方法，使得我们可以介入加载过程做我们想做的事情，其中两个比较重要的方法是：

1.-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

}

这个方法的语言是oc，不熟悉oc的同学看起来比较费劲，我们改造一下变成与js类似的方法就是

function webViewshouldStartLoad(webView,request,navigationType){

}

为了下面表述方便，我们将此方法称为方法1。这个方法可以理解为是一个钩子函数，当UIWebVeiw将要加载一个url时就会调用此方法，并把要加载的url作为入参（方法里的request）传给此函数，其实就是在将要加载一个url时询问我们是否允许加载此url，如果我们在函数体里返回YES，则UIWebView就加载此url，如果我们返回NO，则UIWebView就不加载此url。

2.-(void)webViewDidFinishLoad:(UIWebView *)webView{

}

用js的写法就是

function webViewDidFinishLoad(webView){

}

为了下面表述方便，我们将此方法称为方法2。这个方法是在html加载完成之后触发。

为什么说这两个方法重要呢，因为js要调用native的方法主要就是利用这两个方法来实现。我们上面说到过，为了兼容各个版本，第三方框架主要是通过拦截url的方式实现，简单来说就是当js想调用native某个方法时，就先按照约定好的格式生成一个url，把方法名和参数拼到url里，然后让webView加载这个url，一旦加载某个url，方法1就会被调用，我们在方法1里就可以捕获这个url，然后对这个url进行解析，取出方法名和参数，利用取到的信息生成native方法并执行，就完成了js对native方法的调用。这就是大概的思路，但是还需要处理很多细节，比如返回值怎么获取，回调函数怎么执行等等。

3.-(NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

用js的写法是

stringByEvaluatingJavaScriptFromString(script)

为了下面表述方便，我们将此方法称为方法3。这个方法的入参是一段js脚本，native可以调用此方法来执行js代码，并返回js执行后的返回值。

native和js的交互基本就是依赖于上面3个方法进行。下面我们就来具体的剖析一下EasyJSWebView框架的具体实现。

第一步，利用native方法3执行一段js脚本，脚本代码如下：

 

window.EasyJS = {
    __callbacks: {},//用于保存回调函数
    invokeCallback: function (cbID, removeAfterExecute){
        var args = Array.prototype.slice.call(arguments);
        args.shift();
        args.shift();
        for (var i = 0, l = args.length; i < l; i++){
            args[i] = decodeURIComponent(args[i]);
        }
        //取出对应函数
        var cb = EasyJS.__callbacks[cbID];
        if (removeAfterExecute){
            EasyJS.__callbacks[cbID] = undefined;
        }
        return cb.apply(null, args);//执行取出的函数
    },
    call: function (obj, functionName, args){
        var formattedArgs = [];
        //遍历传入的参数
        for (var i = 0, l = args.length; i < l; i++){
            //如果入参是函数，往formattedArgs数组里插入一个f标记
            if (typeof args[i] == "function"){
                formattedArgs.push("f");
                //生成一个唯一标识变量
                var cbID = "__cb" + (+new Date);
                //以此唯一标识变量为键，以传入的函数入参为值保存在__callbacks对象中
                EasyJS.__callbacks[cbID] = args[i];
                //将唯一标识变量页加入formattedArgs数组中，紧跟在f标识之后
                formattedArgs.push(cbID);
            }else{
                //如果入参不是函数，则用s标记，加入formattedArgs数组
                formattedArgs.push("s");
                //把入参紧跟在s后面计入formattedArgs数组
                formattedArgs.push(encodeURIComponent(args[i]));
            }
        }
        //以上处理后生成的formattedArgs数组类似于[f,唯一标识1,s,非函数入参1,s,非函数入参2]
        var argStr = (formattedArgs.length > 0 ? ":" + encodeURIComponent(formattedArgs.join(":")) : "");//处理后生成类似于":f:唯一标识1:s:非函数入参1:s:非函数入参2"的字符串
        var iframe = document.createElement("IFRAME");
        //把方法名和入参转化成一个url赋给iframe的src
        //会生成类似于src="easy-js:Native:showMsg::f:唯一标识1:s:非函数入参1:s:非函数入参2"
        iframe.setAttribute("src", "easy-js:" + obj + ":" + encodeURIComponent(functionName) + argStr);
        document.documentElement.appendChild(iframe);
        iframe.parentNode.removeChild(iframe);
        iframe = null;
        //执行native方法后如果有返回值会把返回值赋给EasyJS.retValue
        var ret = EasyJS.retValue;
        EasyJS.retValue = undefined;
        if (ret){
            return decodeURIComponent(ret);
        }
    },
    inject: function (obj, methods){
        //给window加一个obj属性
        window[obj] = {};
        var jsObj = window[obj];
        //遍历方法数组，取出方法名
        for (var i = 0, l = methods.length; i < l; i++){
            (function (){
                var method = methods[i];
                //去掉方法名里的冒号(ios的方法名带有冒号)
                var jsMethod = method.replace(new RegExp(":", "g"), "");
                //把去掉冒号之后的方法名作为obj对象的属性，该属性的值是一个调用call函数的函数，call函数的入参是调用inject函数时传进来的obj，遍历到的当前方法名本身（method）
                jsObj[jsMethod] = function (){
                    return EasyJS.call(obj, method, Array.prototype.slice.call(arguments));
                };
            })();
        }
    }
};

这段脚本执行后，window对象下面就有了个EasyJS对象，这个对象有inject函数、call函数、invokeCallback函数、__callbacks对象。

inject函数：用来注入native暴露给js调用的方法；

call函数：将js方法转换成一个特定规则的url

invokeCallback函数：回调js方法

__callbacks：保存js的回调函数

第二步，取出所有的native暴露给js调用的方法（比如showMsg:、getInfo、callBack:），生成一段字符串脚本，例如“EasyJS.inject("Native", ["showMsg:"，"getInfo"，"callFunction:"])”。

oc的方法如果有参数都是带冒号的，有几个参数就会带几个冒号。

第三步，在方法2中执行脚本EasyJS.inject("Native", ["showMsg:"，"getInfo"，"callBack:"])，就会调用window下EasyJS对象中的inject函数，inject函数将native暴露给js的方法注入到window下，然后js就可以通过形如Native.showMsg("这是条消息")这样的方式调用native的方法了。

这里关键是EasyJS对象下的inject函数和call函数。我们先来看inject函数，这个函数接收两个参数，一个obj和一个methods数组，这个函数首先把obj挂到window对象下，然后遍历methods数组，取出里面的方法名，把方法名里的冒号去掉，然后以去掉冒号的方法名为键，它的值是一个调用了EasyJS对象下call函数的函数。把{方法名：函数}这样的键值对加入到obj对象中。以脚本EasyJS.inject("Native", ["showMsg:"，"getInfo"，"callFunction:"])为例，执行后将生成这样的对象：

 

window.Native={
    showMsg:function(){
        return EasyJS.call("Native", "showMsg", Array.prototype.slice.call(arguments));
    },
    getInfo:function(){
        return EasyJS.call("Native", "getInfo", Array.prototype.slice.call(arguments));
    },
    callBack:function(){
        return EasyJS.call("Native", "callFunction", Array.prototype.slice.call(arguments));
    }
}

 

call函数是js最终能够调用native函数的关键。我们来具体分析下看call方法都做了什么。call方法会遍历传入的参数，判断入参的类型，如果是函数，标记为f，并生成一个唯一标识串，以这个唯一标识串为键，以对应的函数为值，存入__callbacks对象中。如果非函数，标记为s。最后形成一个类似这样的数组[f,唯一标识1,s,非函数入参1,s,非函数入参2]。然后再对这个数组用冒号分离成一个字符串":f:唯一标识1:s:非函数入参1:s:非函数入参2"，最后结合函数名等字符串拼接成最终的url，类似于"easy-js:Native:showMsg:f:唯一标识1:s:非函数入参1:s:非函数入参2"，这个url里就携带了方法名和参数，把这个url赋给一个临时生成的iframe的src，触发UIWebView的方法1，在方法1里可以捕获到这个url，对其解析后生成相应的native方法并执行，就可完成native方法的调用。如果native方法执行后有返回值，调用方法3执行EasyJS.retValue=返回值脚本，就可把返回值存到EasyJS对象的retValue变量里，call方法在最后取到这个值再return出来给调用方。

EasyJS对象下的__callbacks对象中存储了需要native回调的js方法，native在方法1中解析url时如果遇到f标识符，就知道需要回调js的方法，会取出跟在f之后的唯一标识符，生成EasyJS.invokeCallback("cbID", "removeAfterExecute")脚本，利用native方法3执行脚本，脚本执行后，EasyJS对象下的invokeCallback函数被调用，函数传入的cbID唯一标识符就可以在__callbacks对象中找到对应的回调函数，执行该函数就可完成对js方法的回调。

总结

通过拦截URL的方式实现js与native交互是业界通用做法，能兼容各种版本。EasyJSWebView是个非常古老的框架了，已经无人维护，使用此框架的项目也比较少，里面可能埋有一些深坑，希望通过以上的分析大家能够了解其中的细节，为解决以后可能出现的交互问题打下坚实的基础。