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的渲染理念出来后，它会有怎样的设计考虑。
- 首先我们打开任意一个H5项目，如Vue项目，执行以下命令安装Capacitor的环境支持：
npm i @capacitor/core @capacitor/cli -D
- 安装完成后执行Capacitor的初始化(注：npx用于便捷调用项目依赖的模块（Capacitor-cli），可以省却全局安装及配置全局变量等操作，更多了解可自行搜索）：
npx cap init
执行完其实只是多了一个配置文件：capacitor.config.json
-
然后build你的项目，生成一个待发布文件夹，文件夹名和
capacitor.config.json中配置的一致，默认是www文件夹，你可以按自身情况修改为dist或其它的（这一步不能跳过，不然不能执行下一步的添加平台）：
npm run build
- 添加要支持的平台，如android：
npx cap add android
- 打开你的IDE：
npx cap open android
- 然后在Android Studio编译运行就可以了。一个普通的web应用，变成了一个手机端应用。
Capacitor有什么特点
- 不用额外安装任何东西即可使用基本的原生接口（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都要安装相应插件才能使用的方式简单多了。
- 简单地自定义插件
使用注解的方式，和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
- 兼容使用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
网友评论