60.jsbridge

概述

目前大部分的移动端应用开发都选择混合开发模式（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页面。