preface

Capacitor Custom plug-in Enables WebView access to custom Android code

Recently, I have used Vue+Vant+Capacitor to develop and package mobile applications. Due to service requirements, I need to communicate with the native Android. Data in the native Android is accessed through webView, that is, The interoperability between Android and JS.

See the previous article: Capacitor+Vue+Vant Mobile Package summary how to use Capacitor+Vue+Vant mobile package

The following test implements the interoperability between Android and JS based on Capacitor.

Native code accessible to WebView

The easiest way to generate custom native code that needs to be accessed in a WebView is to build a local Capacitor plug-in for it. In this case, building a plug-in is as simple as building a class that inherits from com.getCapacitor.Plugin with @nativePlugin ()and @pluginMethod () annotations.

1. Custom plug-insCustomNativePlugin:

package xxxxxxx;

import android.content.Context;
import android.database.Cursor;
import android.net.Uri;
import android.util.Log;
import com.getcapacitor.JSObject;
import com.getcapacitor.NativePlugin;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;

/** * CustomNativePlugin Custom plug-in ** /
@NativePlugin(a)public class CustomNativePlugin extends Plugin {

  /** * customCall Gets encrypted user information */
  @PluginMethod(a)public void customCall(PluginCall call) {
    //String message = call.getString("value");
    String encryptParams = getParams(MainActivity.getContent());
    JSObject jsObject = new JSObject();
    jsObject.put("encryptParams",encryptParams);
    call.success(jsObject);
  }

  @PluginMethod(a)public void customFunction(PluginCall call) {
    // More code here...
    JSObject jsObject = new JSObject();
    try {
      / / add
      jsObject.put("name"."Zhang");
// System.out.println(jsonObject.toString());
    } catch (Exception e) {
      e.printStackTrace();
    }
// Log.d("MSG", jsObject.toString());call.resolve(jsObject); }}Copy the code

2. Register the plugin in your Activity:

package xxxx;
import android.content.Context;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  public static Context context;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    context = this.getApplicationContext();
    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(CustomNativePlugin.class);
    }});
  }
  / * * *@return  content
   * */
  public static Context getContent(a){
    returncontext; }}Copy the code

Use webView functions in the webView code:

	import { Plugins } from "@capacitor/core";
	const { CustomNativePlugin } = Plugins;

      /** * Receives the Android Capacitor parameter ** /
      async getLaunchUrl() {
        let param = ' ';
        const ret = await CustomNativePlugin.customCall();
        param = ret.encryptParams
        return param;
      }
Copy the code

See Capacitor Custom Native Code

For more usage of the plug-in API, see Capacitor Android Plugin Guide.