首页 > 其他分享 >【js与native通信】1 通信协议制定

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

时间:2022-09-01 19:33:27浏览次数:71  
标签:调用 通信协议 js callback 方法 port native

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

  1. WebView 有一个方法 setWebChromeClient,可以设置WebChromeClient 对象。

  2. 而 WebChromeClient 对象中有三个方法,分别是

  • onJsAlert

  • onJsConfirm

  • onJsPrompt,

  1. 当 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

jsbridge://className:callbackAddress/methodName?jsonObj

然后调用window.prompt方法将uri传递过去,这时候java层就会收到这个uri,再进一步解析即可。

万事具备了,只欠如何编码了。

标签:调用,通信协议,js,callback,方法,port,native
From: https://www.cnblogs.com/sunupo/p/16647606.html

相关文章

  • js 实现冒泡排序及优化方案
    //冒泡排序//原理就是每一轮循环,将一个最大的值放冒泡到最后//1.每一趟都是比较相邻两个元素,如果后一个元素大于前一个,则交换两个元素//2.第一趟从第一个元素开始......
  • 人均瑞数系列,瑞数 5 代 JS 逆向分析
    声明本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切......
  • JS 事件盘点
    1.鼠标事件鼠标在元素上移动mousemove鼠标从该元素上移出mouseout鼠标移动到该元素mouseover鼠标点击(单击)click鼠标双击dbclick鼠标右击contextmenu可以配......
  • 生成二维码并以图片格式下载-qrcodejs2
    1、安装qrcodejs2npminstallqrcodejs2--save2、在需要的页面引入importQRCodefrom"qrcodejs2";3、页面中使用<divid="qrcode"ref="qrcode"></div>4......
  • Flask 学习-31.flask_jwt_extended 验证token四种方headers/cookies/json/query_stri
    前言用户携带授权token访问时,其jwt的所处位置列表,默认是在请求头部headers中验证。可以通过JWT_TOKEN_LOCATION进行全局配置,设置token是在请求头部,还是cookies,还是json,......
  • JS缓存三种方法
    1.sessionStorage:临时的会话存储只要当前的会话窗口未关闭,存储的信息就不会丢失,即便刷新了页面,或者在编辑器中更改了代码,存储的会话信息也不会丢失。2.localStor......
  • vue项目中main.js使用方法详解
    vue项目中main.js使用方法详解目录第一部分:main.js文件解析第二部分:Vue.use的作用以及什么时候使用Vue.use是什么?(官方文档)Vue.use()什么时候使用?补充:关于main.js方便小技......
  • jsp基础语法和指令
    javabeanMVC三层架构filter......
  • fastjson版本替换升级脚本
    fastjson漏洞修复脚本脚本说明fastjson_update.sh:对指定目录下的fastjsonjar包进行备份、升级、还原。使用帮助上传到项目外任意目录下并解压并赋予执行权限(如/......
  • 20个实用的js小技巧
    //1滚动到页面顶部window.scrollTo()平滑滚动到页面顶部constscrollToTop=()=>{window.scrollTo({top:0,left:0,behavior:'smooth'}......