Capacitor实现WebView中访问的自定义Android代码
16lz
2022-01-02
前言
Capacitor 自定义插件 实现WebView中访问的自定义Android代码
最近在工作中使用Vue+Vant+Capacitor 开发打包移动端应用,因业务需求需与原生的Android进行数据通信,通过webview访问原生Android中的数据,即Android 与 js 互调。
怎么使用Capacitor打包Vue移动端项目,见之前的一篇文章:
Capacitor+Vue+Vant移动端打包总结
下面是亲测实现了基于Capacitor中Android和js互调。
WebView可访问的本机代码
生成需要在WebView中访问的自定义本机代码的最简单方法是为其构建本地Capacitor插件。在这种情况下,构建插件就像构建一个继承自com.getcapacitor.Plugin并使用@NativePlugin()and @PluginMethod()注释的类一样简单。
一、 自定义插件CustomNativePlugin
:
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;/** * Capacitor CustomNativePlugin 自定义插件 * */@NativePlugin()public class CustomNativePlugin extends Plugin { /** * customCall 获取加密用户信息 */ @PluginMethod() 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() public void customFunction(PluginCall call) { // More code here... JSObject jsObject = new JSObject(); try { //添加 jsObject.put("name", "张三");// System.out.println(jsonObject.toString()); } catch (Exception e) { e.printStackTrace(); }// Log.d("MSG", jsObject.toString()); call.resolve(jsObject); }}
二、在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(){ return context; }}
三、在webView代码中使用函数:
import { Plugins } from "@capacitor/core";const { CustomNativePlugin } = Plugins; /** * 接收Android Capacitor 插件传递过来参数 * */ async getLaunchUrl() { let param = ''; const ret = await CustomNativePlugin.customCall(); param = ret.encryptParams return param; }
代码结构:
参考
Capacitor Custom Native Code
有关插件API的更多用法,请参阅Capacitor Android Plugin Guide。
更多相关文章
- ASM + Transform 在android中的使用
- Android(安卓)Studio 使用笔记(1) -- 设置自动生成serialVersionUI
- Android定制RadioButton样式三种实现方法
- Android(安卓)ContentProvider、ContentResolver和ContentObserv
- Airbnb 动画库Lottie
- 详解android shape的使用总结
- 箭头函数的基础使用
- NPM 和webpack 的基础使用
- Python list sort方法的具体使用