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

前端小鑫同学

发布于 2022-12-26 09:04:29

1.5K0

发布于 2022-12-26 09:04:29

文章被收录于专栏：小鑫同学编程历险记小鑫同学编程历险记

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

前言：

Capacitor介绍：

Capacitor是一个开源的并且在Native端运行的跨平台的web应用。
使用JavaScript、HTML和CSS创建跨平台iOS、Android和渐进式Web应用程序。
很好的将Cordova迁移到Capacitor，因为它99%的向后兼容Cordova。来自Vue3文档中的一张截图：

来自capacitorjs网站的一张截图：

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

尝试一下走起：

1. 准备一个前端环境：

创建项目：yarn create vite
安装依赖：cd .\v3-native-demo\ & yarn
首次编译：yarn build2. 准备Capacitor环境：

文档地址：https://capacitorjs.com/solution/vue

安装核心模块：npm i @capacitor/core
安装脚手架：npm i @capacitor/cli
初始化项目：npx cap init <project-name> <package-name> --web-dir=dist3. 准备Android环境：

文档地址：https://capacitorjs.com/docs/getting-started#where-to-go-next

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

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

安装插件依赖：npm install @capacitor/toast
同步代码：npx cap sync
更新前端： ```javascript import { Toast } from '@capacitor/toast';

const showHelloToast = async () => { await Toast.show({ text: 'Hello!', }); };

#### 5. 自定义安卓插件：
**插件简单指南：**[https://capacitorjs.com/docs/android/custom-code](https://capacitorjs.com/docs/android/custom-code)
**完整插件指南：**[https://capacitorjs.com/docs/plugins/android](https://capacitorjs.com/docs/plugins/android)

1. 定义插件：
```javascript
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);
    }
}

注册插件MainActivity=>onCreate()：

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

在前端代码整合调用：

// 整合
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都可以监听重新编译的，你们知道有类似的功能吗？

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-10-19，如有侵权请联系 cloudcommunity@tencent.com 删除

npm