JSBridge

2024-09-09
暂无评分

概述

目前大部分的移动端应用开发都选择混合开发模式(Hybrid),通常会涉及到两大类技术:原生Native、Web H5。

  • 原生技术主要指iOS(Objective C)、Android(Java),原生开发效率较低,开发完成需要重新打包整个App,发布依赖用户的更新,性能较高功能覆盖率更高。
  • Web H5主要由HTML、CSS、JavaScript组成,Web可以更好的实现发布更新,跨平台也更加优秀,但性能较低,特性也受限

在混合开发模式下,Web H5会经常需要使用Native的功能,比如调用原生页面、获取用户信息等,同时Native也需要向Web端发送推送、更新状态等,而JavaScript是运行在单独的JS Context中(Webview容器、JSCore等),与原生有运行环境的隔离,所以需要有一种机制实现Native端和Web端的双向通信,这就是JSBridge:以JavaScript引擎或Webview容器作为媒介,通过协定协议进行通信,实现Native端和Web端双向通信的一种机制。

通过JSBridge,Web端可以调用Native端的Java接口,同样Native端也可以通过JSBridge调用Web端的JavaScript接口,实现彼此的双向调用。


Webview

Webview是移动端提供的运行JavaScript的环境,是系统渲染Web网页的一个控件,可与页面JavaScript交互,实现混合开发,Android的Webview采用的是低版本和高版本使用了不同的webkit内核,4.4后直接使用了Chrome。Webview控件除了能加载指定的url外,还可以对URL请求、JavaScript的对话框、加载进度、页面交互进行强大的处理,之后会提到拦截请求、执行JS脚本都依赖于此。

DJI Pilot 2中会内嵌一个Webview控件,为开发者提供一个网页环境,同时通过JSBridge与DJI Pilot 2通信。

注意:

对于M300 RTK遥控器,需要把遥控器固件升级到最新版本,不然会出现Webview页面空白的现象。

JSBridge相互调用示例

  • Webview JS调用JAVA 代码
/ Java 注入 js方法,
webview.addJavascriptInterface(JsModule,"android");
 
// JsModule.java
@JavascriptInterface
public void jsCallAndroid(){
    tvShowmsg.setText("Js调用Android方法");
}
@JavascriptInterface
public void jsCallAndroidArgs(String args){
    tvShowmsg.setText(args);
}
 
// js 调用 java 代码
<input type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>
  • JAVA调用JS代码
// Java 调用 js方法,javacalljs()为javascript代码中的一个方法
webview.loadUrl("javascript:javacalljs()");

注意:

  1. java ↔ js 之间数据传递属于两个不同的运行环境之间的数据传递,效率上不是很快,如果传递大量的数据,会影响到性能。
  2. 对于js的运行,需要借助于 Webview实例,运行一个Webview需要占用一定的内存,所以目前不支持H5页面在后台运行,一旦退出了就会关闭H5页面,类似浏览器的方式,只有在Webview界面中才会运行第三方的H5页面。
若您对文档有意见或疑惑,点击可快速反馈,我们会与您联系。