I. Understanding Hybrid App

Hybrid apps are half-native, half-Web Hybrid apps. It needs to be downloaded and installed. It looks like a Native App, but only has a few UI Web Views and accesses the Web.

Hybrid App becomes more and more competitive in the application market with its advantages of flexible iteration, easy control and multi-terminal synchronization, mainly due to the fact that it uses H5 to develop some product functions with frequent changes and embed them in the application with the help of WebView control in the client. Therefore, we always encounter interaction problems between native Java code and JAVASCRIPT code in the web page.

Advantages: Low development cost, fast update, no need to notify users of updates, no need to manually upgrade, across multiple platforms and terminals.

Disadvantages: (1) temporary entry (2) no access to system-level notifications, reminders, actions, etc. (3) low retention (4) Limited design (5) poor experience

Ii. Communication between Javascript and Java in Hybrid App WebView

1. Check whether the WebView supports Javascript

Whether to set the WebView to support JavaScript function before Java and Js call each other:

  mWebView.getSettings().setJavaScriptEnabled(true);
Copy the code

2. Java calls Javascript

The first step is to use javascript definitions to provide Java access to methods in the web page, just like normal method definitions, such as:

<script type="text/javascript"> 

function javaCallJs(message){ alert(message); }

</script>
Copy the code

If you use a framework (vue, react, etc.), you need to mount methods to Windows.

// Result of user login
window["loginResult"] = function (data) {
  // Your code area
};
Copy the code

/ / if a component needs to be supplied to a Java call, it needs to be mounted to window.


  mounted() {
    // Open the apK method name with the Java convention
    window.openApk = this.openApk;

  },
  openApk(res) {
       //res is an argument returned by Java
       // Your operation
  },
Copy the code

3. Javascript calls Java

Direct call


    function a(){
     window.jmjs.openFile(path_url);
    }

Copy the code

JMJS is a good call alias provided by Java, which needs to be determined by the internal Java staff. The upper part is the pass parameter path_url, which is very similar to the js pass parameter, just need to pass the parameter to the method provided by Java.

There are return parameters

If the Java developer has a return value in a method provided to the front end, the js can simply call it and receive it in a variable, such as:

 let access_token = window.jmjs.getAccessToken();
 console.log("====== Accepted access_token=======",access_token)
Copy the code

Third, optimize packaging and integrate your code

In order to facilitate the management of the code between JS and WebView Java in your project, we can optimize the code, such as:

Create a new Adapter.js (filename from) in the project utils file, and write all the calls and mount methods to the file

/** * WebView calls Java */
const jimiJS = {
  // User login
  jimiSdkLogin() {
    if (typeof window.webkit ! ="undefined") {
      window.prompt("jimiSdkLogin");
    } else if (typeofjimiJS ! = ="undefined" && jimiJS.jimiSdkLogin) {
      window.jmjs.login(); }},// Pass the URL argument to open a new WebView
  jimiSdktoWebview(url) { 
    if (typeof window.webkit ! ="undefined") {
      window.prompt("jimiSdktoWebview");
    } else if (typeofjimiJS ! = ="undefined" && jimiJS.jimiSdktoWebview) {
      window.jmjs.towebview(url); }},/** * start downloading *@param {*} Url Download address */
  jimiSdkStartDownApk(url) {
    console.log("🚀 ~ file: adapter.js ~ line 58 ~ jimiSdkStartDownApk ~ url", url)
    if (typeof window.webkit ! ="undefined") {
      window.prompt("jimiSdkStartDownApk");
    } else if (typeofjimiJS ! = ="undefined" && jimiJS.jimiSdkStartDownApk) {
      window.jmjs.startDownApk(url); }}};// Result of user login
window["loginResult"] = function (data) {
// Your business code
};

window["jimiJS"] = jimiJS;

export { jimiJS }; / / export jimijs

Copy the code

Used in business components

import { jimiJS } from "@/utils/adapter.js";
jimiJS.jimiSdkLogin() // Invoke login

Copy the code