尝试Capacitor（Vue+Android）混合开发

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

---

前言：

Capacitor介绍：

1. Capacitor是一个开源的并且在Native端运行的跨平台的web应用。
2. 使用JavaScript、HTML和CSS创建跨平台iOS、Android和渐进式Web应用程序。
3. 很好的将Cordova迁移到Capacitor，因为它99%的向后兼容Cordova。

来自Vue3文档中的一张截图：

来自capacitorjs网站的一张截图：

开始前注意： 前端开发环境和安卓开发环境的依赖还需自行安装

尝试一下走起：

1. 准备一个前端环境：

1. 创建项目：yarn create vite
2. 安装依赖：cd .\v3-native-demo\ & yarn
3. 首次编译：yarn build

2. 准备Capacitor环境：

文档地址：capacitorjs.com/solution/vu…

1. 安装核心模块：npm i @capacitor/core
2. 安装脚手架：npm i @capacitor/cli
3. 初始化项目：npx cap init <project-name> <package-name> --web-dir=dist

3. 准备Android环境：

文档地址：capacitorjs.com/docs/gettin…

1. 安装安卓环境依赖：npm install @capacitor/android
2. 添加安卓环境到项目：npx cap add android
3. 使用AS打开安卓项目：npx cap open android，默认AndroidSDK目录可能找不到，执行后AS会自动检索SDK目录进行更新。
4. 编译安卓项目到模拟器：npx cap run android

4. 官方插件使用（@capacitor/toast）：

文档地址：capacitorjs.com/docs/apis

1. 安装插件依赖：npm install @capacitor/toast
2. 同步代码：npx cap sync
3. 更新前端：

import { Toast } from '@capacitor/toast';
 
const showHelloToast = async () => {
  await Toast.show({
    text: 'Hello!',
  });
};

5. 自定义安卓插件：

插件简单指南：capacitorjs.com/docs/androi… 完整插件指南：capacitorjs.com/docs/plugin…

1. 定义插件：

package cn.it200.v3demo;
 
import com.getcapacitor.JSObject;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
import com.getcapacitor.annotation.CapacitorPlugin;
 
@CapacitorPlugin(name = "Echo")
public class EchoPlugin extends Plugin {
 
    @PluginMethod()
    public void echo(PluginCall call) {
        String value = call.getString("value");
 
        JSObject ret = new JSObject();
        ret.put("value", value);
        call.resolve(ret);
    }
}

2. 注册插件MainActivity=>onCreate()：

public class MainActivity extends BridgeActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        registerPlugin(EchoPlugin.class);
    }
}

3. 在前端代码整合调用：

// 整合
import { registerPlugin } from '@capacitor/core';
export interface EchoPlugin {
  echo(options: { value: string }): Promise<{ value: string }>;
}
const Echo = registerPlugin<EchoPlugin>('Echo');
export default Echo;
 
// 调用
const { value } = await Echo.echo({ value: 'Hello World!' });
console.log('Response from native:', value);

结语：

通过上面的一顿操作后发现，从和Cordova还是很相似的，插件的注册和我自己框架的方式类似也是通过注解+反射来实现的，但是每次修改完前端代码后不能很方便的同步到模拟器上不知道要怎么办？ReactNative都可以监听重新编译的，你们知道有类似的功能吗？

---

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。