Cordova在左，Capacitor在右[亲测有效]

自本人简书文章迁移https://www.jianshu.com/p/33c21660f50e

Cordova（Webview）是第一代的混合式应用技术代表，ReactNative/Weex/NativeScript等是第二代，而第三代是以Flutter为先驱，Flutter是将来的趋势，这一两年的热度不断攀升也印证了这一点，然而当前它仍有一些不足，还未到大规模使用的时候，同时前两代技术的优点也是比较明显，故一段时期内混合式应用技术仍将处于三分天下的态势。

所以，“扔掉你的Cordova”，并不是要求你在三代技术中选位站队，而是Webview技术中，有比Cordova更好的方案，那就是Ionic团队开源的Capacitor。Phonegap/Cordova刚出来时，技术是先进的，掀起了混合式应用的时代序幕，但这么些年过去了，已显得有点落伍，Capacitor总结了Cordova的优缺点后，以更简单、灵活的使用、同时兼容使用现有的Cordova插件的方式诞生。

有些人可能听过Capacitor，但是却未必尝试使用过。有使用过的，可能也接触不深，我看网上一些涉及到Capacitor的文章大多对Capacitor描述不多。

揭开Capacitor的神秘面纱

Capacitor当前实现了Native Plugin，其实它有个野心是：Native Component——对，像RN的东西，只是工作量太大，暂时搁置，我比较好奇的是，Flutter的渲染理念出来后，它会有怎样的设计考虑。

1. 首先我们打开任意一个H5项目，如Vue项目，执行以下命令安装Capacitor的环境支持：

npm i @capacitor/core @capacitor/cli -D

2. 安装完成后执行Capacitor的初始化(注：npx用于便捷调用项目依赖的模块（Capacitor-cli），可以省却全局安装及配置全局变量等操作，更多了解可自行搜索）：

npx cap init

执行完其实只是多了一个配置文件：capacitor.config.json

3. 然后build你的项目，生成一个待发布文件夹，文件夹名和capacitor.config.json中配置的一致，默认是www文件夹，你可以按自身情况修改为dist或其它的（这一步不能跳过，不然不能执行下一步的添加平台）：

npm run build

4. 添加要支持的平台，如android：

npx cap add android

5. 打开你的IDE：

npx cap open android

6. 然后在Android Studio编译运行就可以了。一个普通的web应用，变成了一个手机端应用。

Capacitor有什么特点

1. 不用额外安装任何东西即可使用基本的原生接口（https://capacitor.ionicframework.com/docs/apis）;

我们改动下Vue的代码：

import { Plugins } from '@capacitor/core';
const { Toast } = Plugins;
...
methods: {
    async show() {
        await Toast.show({
            text: 'Hello!'
        });
    },
    onClick () {
        this.show()
    }

然后执行下述命令：

npm run build
npx cap copy

最后在Android Studio编译运行就发现可以调用原生功能了。这比Cordova都要安装相应插件才能使用的方式简单多了。

2. 简单地自定义插件

使用注解的方式，和json数据格式传输使得插件实现起来很方便。

我们来实现个Capacitor插件，新建一个MyToastPlugin.class文件，写入：

@NativePlugin()
public class MyToastPlugin extends Plugin {

    @PluginMethod()
    public void show(PluginCall call) {
        // 获取js调用参数
        String text = call.getString("text");
        Toast.show(this.getContext(), text);
        // 返回json对象给js
        JSObject ret = new JSObject();
        ret.put("result", true);
        call.success(ret);
    }
}

然后在MainActivity.java的onCreate方法中添加该插件：

add(MyToastPlugin.class);

最后Vue文件简单改一下完成调用：

const { Toast, MyToastPlugin } = Plugins;
...
onClick () {
    // this.show()
    MyToastPlugin.show({text: 'hello'}).then(res => {
        alert(JSON.stringify(res))
    })
}

再次构建运行就可以看到效果。从原生代码上可以看到，只要给原生方法添加@PluginMethod()注解，就能被js调用，而传递/接收参数都是json格式，使得传输数据简单、灵活，相比于Cordova插件开发简洁明了。

如果有过Cordova插件开发经验的人，会对异步返回操作感到繁琐，而Capacitor相比之下也简单很多。 只要在任意地方发起事件通知即可：

JSObject res = new JSObject();
res.put("result", "some value");
notifyListeners("myPluginEvent", res);

然后在Vue中就可以监听得到：

MyToastPlugin.addListener("myPluginEvent", (info: any) => {
  console.log("myPluginEvent was fired");
});

上述是为了快速了解插件而手打代码，实际上有命令快捷创建插件框架：

npx @capacitor/cli plugin:generate

3. 兼容使用Cordova插件

兼容Cordova插件其实只是为了过渡，等Capacitor插件丰富起来了，其实兼不兼容无所谓，不过这是个漫长过程。虽说是过渡，但不代表对Cordova插件不友好。

首先Vue项目执行下面命令添加依赖：

npm i cordova-plugin-telerik-imagepicker

然后执行命令把插件原生部分更新到原生项目：

npx cap update

然后就能直接使用了。如果你Vue的内容更改过，同时插件有新增或移除，就要同时执行以下命令：

npx cap copy    #复制待发布文件夹到原生资源文件中
npx cap update  #更新插件依赖

两个命令可以合并成一个：

npx cap sync

执行完命令后就会自动把插件原生代码合并到原生项目中，此后就可以在Vue中直接调用Cordova插件了。

Capacitor与Ionic

既然Capacitor是Ionic团队开源的，自然两者使用起来更方便一些，我们回忆一下，Capacitor基本整个步骤是：

npm run build
npx cap sync
npx cap open android    #这步在IDE已经打开情况下可略过
执行原生IDE安装运行应用

略显麻烦，我们可以在package.json中配一个script来调用：

"scripts": {
    "android": "npm run build && npx cap sync && npx cap open android"
}

而Ionic是可以直接一句命令完成：

ionic capacitor run android