Introduction

Currently, most mobile Apps are developed by using the hybrid development model which involves two major technologies: Native, Web H5

• Native technology mainly refers to iOS (Objective C), Android (Java), native development is less efficient, the need to repackage the entire App after development is complete, the release depends on the user's updates, higher performance higher feature coverage.

• Web H5 mainly consists of HTML, CSS, JavaScript. web can be better to achieve release updates, cross-platform is also better, but the performance is lower, the characteristics are also limited.

In the hybrid development model, Web H5 often needs to use Native functions, such as calling native pages, getting user information, and so on. At the same time, Native also needs to send push, update status, etc. to the Web end, while JavaScript is running in a separate JS Context (Webview container, JSCore, etc.), and the native has the isolation of the runtime environment. Therefore, there is a necessity for a mechanism to realize two-way communication between the Native end and Web end, which is the JSBridge. A mechanism to realize two-way communication between Native side and Web side by using JavaScript engine or Webview container as a medium to communicate through the protocol.

ThroughJSBridge, the Web end can call the Native side's Java interface, and the Native side can also call the Web side's JavaScript interface through JSBridge, realizing the two-way call to each other.

Webview

WebView is the environment provided by mobile to run JavaScript, a control for system rendering of Web pages that can interact with page JavaScript for hybrid development. WebView control can load the specified URL, but also can be powerful for URL requests, JavaScript dialog box, loading progress, page interaction. The interception of requests and execution of JS scripts mentioned later rely on it.

A Webview control will be embedded in DJI Pilot 2 to provide developers with a web page environment and communicate with DJI Pilot 2 through the JSBridge.

Note: For the M300 RTK remote control, the firmware of the remote control needs to be upgraded to the latest version, otherwise the Webview page will be blank.

Example ofJSBridge

• JS calls Java

// Java injection js methods
webview.addJavascriptInterface(JsModule,"android");
 
// JsModule.java
@JavascriptInterface
public void jsCallAndroid(){
    tvShowmsg.setText("Js calls Android");
}
@JavascriptInterface
public void jsCallAndroidArgs(String args){
    tvShowmsg.setText(args);
}
 
// Js calls Java
<input type="button" value="js calls Java" onclick="window.android.jsCallAndroid()"/>

• Java calls js

// Java calls the js method, javacalljs() is a method in the javascript code
 webview.loadUrl("javascript:javacalljs()");

Notes:

1. The data passing between Java and js is between two different runtime environments, which is not very fast in terms of efficiency, and will affect the performance if a large amount of data is passed.

2. For js to run, it needs to run with the help of a WebView instance, and running a WebView takes up a certain amount of memory. There is no intention to have the js code of the open platform running in the background all the time in the early stage. Only when the platform page is carried out will run the third-party H5 page.