首页 > 其他分享> 文章详细

【js与native通信】1 通信协议制定

2022-09-01 19:31:03 阅读：183 来源： 互联网

标签：调用通信协议 js callback 方法 port native

通过native <-互相调用-> js知道

WebView 有一个方法 setWebChromeClient，可以设置WebChromeClient 对象。
而 WebChromeClient 对象中有三个方法，分别是

onJsAlert
onJsConfirm
onJsPrompt，

当 js 调用 window 对象的对应的方法，即

window.alert
window.confirm
window.prompt

WebChromeClient 对象中的三个方法对应的就会被触发，可以利用这个机制，自己做一些处理。

1 通信协议的制定

回想一下熟悉的 http 请求 url 的组成部分。形如http://host:port/path?param=value。

参考http，制定JSBridge的组成部分：

jsbridge://className:port/methodName?jsonObj

1.1 这个port用来干嘛？

其实 js 层调用 native 层方法后，native 需要将执行结果返回给 js 层。

通过WebChromeClient对象的onJsPrompt方法将返回值返回给js这个过程就是同步的。
如果native执行异步操作的话，返回值怎么返回呢？这时候port就发挥了它应有的作用
- 我们在js中调用native方法的时候，在js中注册一个callback，然后将该callback在指定的位置上缓存起来
- 然后native层执行完毕对应方法后通过WebView.loadUrl调用js中的方法，回调对应的callback。

那么js怎么知道调用哪个callback呢？于是我们需要将callback的一个存储位置传递过去，那么就需要native层调用js中的方法的时候将存储位置回传给js，js再调用对应存储位置上的callback，进行回调。

1.2 完整的协议定义如下：

jsbridge://className:callbackAddress/methodName?jsonObj

举例：
假设我们需要调用 native 层的 Logger 类的 log 方法，参数是msg，执行完成后js层要有一个回调，那么地址就如下

jsbridge://Logger:callbackAddress/log?{"msg":"native log"}
至于这个callback对象的地址，可以存储到js中的window对象中去。至于怎么存储，后文会慢慢倒来。

2 native返回值给js

2.1 在native定义的结果

上面是js向native的通信协议，那么另一方面，native向js的通信协议也需要制定，一个必不可少的元素就是返回值，这个返回值和js的参数做法一样，通过json对象进行传递，该json对象中有状态码code，提示信息msg，以及返回结果result，如果code为非0，则执行过程中发生了错误，错误信息在msg中，返回结果result为null，如果执行成功，返回的json对象在result中。下面是两个例子，一个成功调用，一个调用失败。

调用失败

{
    "code":500,
    "msg":"method is not exist",
    "result":null
}

成功调用

{
    "code":0,
    "msg":"ok",
    "result":{
        "key1":"returnValue1",
        "key2":"returnValue2",
        "key3":{
            "nestedKey":"nestedValue"
            "nestedArray":["value1","value2"]
        }
    }
}

2.2 native 返回在 native 定义的结果

那么这个结果如何返回呢，native调用js暴露的方法即可，然后将js层传给native层的port一并带上，进行调用即可，调用的方式就是通过WebView.loadUrl方式来完成，如下。

mWebView.loadUrl("javascript:JSBridge.onFinish(port,jsonObj);");

关于JsBridge.onFinish方法的实现，后面再叙述。

2.3 native 管理暴露给js的类与方法

native层的方法必须遵循某种规范，不然就非常不安全了。在native中，我们需要一个JSBridge统一管理这些暴露给js的类和方法，并且能实时添加，这时候就需要这么一个方法

JSBridge.register("jsName",javaClass.class)

2.4 native 定义类的接口规范

这个javaClass就是满足某种规范的类，该类中有满足规范的方法，我们规定这个类需要实现一个空接口，为什么呢?主要作用就混淆的时候不会发生错误，还有一个作用就是约束JSBridge.register方法第二个参数必须是该接口的实现类。那么我们定义这个接口

public interface IBridge{
}

类规定好了，类中的方法我们还需要规定，为了调用方便，我们规定类中的方法必须是static的，这样直接根据类而不必新建对象进行调用了（还要是public的），然后该方法不具有返回值，因为返回值我们在回调中返回，既然有回调，参数列表就肯定有一个callback，除了callback，当然还有前文提到的js传来的方法调用所需的参数，是一个json对象，在java层中我们定义成JSONObject对象；方法的执行结果需要通过callback传递回去，而java执行js方法需要一个WebView对象，于是，满足某种规范的方法原型就出来了。

public static void methodName(WebView web view,JSONObject jsonObj,Callback callback){

}

js层除了上文说到的JSBridge.onFinish(port,jsonObj);方法用于回调，应该还有一个方法提供调用native方法的功能，该函数的原型如下

JSBridge.call(className,methodName,params,callback)

在call方法中再将参数组合成形如下面这个格式的uri