美文网首页
JSBridge混合应用(HyBird App)实现原理

JSBridge混合应用(HyBird App)实现原理

作者: 天神Deity | 来源:发表于2018-01-10 10:12 被阅读34次

js与native层相互通讯

native->js: WebView.loadUrl() 方法
js->native:
在js中调用window.alert/window.confirm/window.prompt/window.location
WebView中的WebChromeClient将接收到对应的回调信息(onJSAlert/onJSConfirm/onJsPrompt/shouldOverrideUrlLoading)

1. window.alert --> onJSAlert
2. window.confirm --> onJSConfirm
3. window.prompt --> onJsPrompt
4. window.location --> shouldOverrideUrlLoading

由于window.prompt在js中较为少用,我们可以选择window.prompt作为通讯通道.

通讯协议制定(js->native)

js在向native回传信息时,需要js告诉native一些信息以便完成调用操作,
native需要调用某一个类的某个方法,方法需要附带参数.当native完成调用操作时,需要将结果返回给js.
为了区分其他协议,我们制定jsbirdge的scheme为jsbirdge,那么完整的uri如下:

jsbridge://Logger:callbackAddress/log?jsonStr
形如:scheme://className:callbackAddress/methodName?params

通讯协议制定(native->js)

native在返回结果时也需要制定通讯协议,当需要告诉js业务逻辑处理结果的返回值时,需要返回相应的

  1. 状态码code (1:成功,0:失败,其他异常状态码....)
  2. 提示消息message ("请求成功"/"业务逻辑异常"...)
  3. 返回结果值result("...")

同样的,我们将结果封装为json进行返回给js.native 通过调用WebView.loadUrl()方法进行返回.
mWebView.loadUrl("javascript:JSBridge.onFinish(callbackAddress,jsonObj);");

native层代码规范

在native层中,我们使用JSBridge类来统一管理暴露给js的类和方法,并且能够随时新增(或者删除).

JSBridge.register("nameInJs",javaClass.class)
被js调用的类应满足某种规范:

1.类应实现某个接口,约束JSBridge.register方法的第二个参数应该是某一个接口的实现类.
2.类中的方法应该是公共静态方法,并且无返回值.因为返回值会通过回调函数传递给js脚本.

通过以上的规范,类中的方法签名如下

public static void methodName(WebView webview,String jsonParams,Callback callback){}

js层

目前的业务需要,js层至少需要提供以下两个公共方法:
1.封装请求地址[scheme://className:callbackAddress/methodName?params]的方法
2.接收native层回调的方法

1. JSBridge.call(className,methodName,jsonParams,callback)
2. JSBridge.onFinish(callbackAddress,jsonParams)
3. 其他相关的辅助方法

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

参考链接/扩展阅读:
推荐 Android JSBridge的原理与实现
JSBridge实现原理探索

相关文章

  • JSBridge混合应用(HyBird App)实现原理

    js与native层相互通讯 native->js: WebView.loadUrl() 方法js->native...

  • JSBridge 实现原理探究

    JSBridge 实现原理探究 JSBridge 主要用于移动端混合开发,html5 与 native 进行通信的...

  • Hybird

    1.hybird是什么 Hybrid App(混合模式移动应用),是一种介于WebApp和原生App之间的,具备两...

  • Android JSBridge实现

    Android JSBridge实现 参考文章 : Android JSBridge的原理与实现Android 利...

  • 移动端开发

    移动端分类 Native原生APP 手机浏览器的Webapp Hybird混合应用Native+Html 微信小程...

  • JSBridge小科普

    做Hybird APP开发的同学,应该对JSBridge不陌生,它用于H5页面和Native(Android或者i...

  • Appium简介及工作原理

    Appium是一个开源、跨平台的框架,它适用于Native应用、移动应用、Hybird(混合)应用。Native应...

  • Native/JS交互方案

    Native/JS交互方案 标签(空格分隔): Hybird 1. 方案一 scheme拦截(JSBridge) ...

  • vue中使用JSbridge与APP端进行交互

    app与h5混合开发h5需要调原生的方法实现具体功能1.新建JSbridge.js文件 二、在main.js中加入...

  • 【Android开发】JsBridge的使用

    配置 Activity代码 html 结果 参考文章:Android JSBridge的原理与实现Android ...

网友评论

      本文标题:JSBridge混合应用(HyBird App)实现原理

      本文链接:https://www.haomeiwen.com/subject/nztinxtx.html