Cordova（Webview）是第一代的混合式應用技術代表，ReactNative/Weex/NativeScript等是第二代，而第三代是以Flutter為先驅，Flutter是將來的趨勢，這一兩年的熱度不斷攀升也印證了這一點，然而當前它仍有一些不足吕粹，還未到大規(guī)模使用的時候，同時前兩代技術的優(yōu)點也是比較明顯岗仑，故一段時期內混合式應用技術仍將處于三分天下的態(tài)勢匹耕。
所以，"扔掉你的Cordova"荠雕，并不是要求你在三代技術中選位站隊稳其，而是Webview技術中驶赏，有比Cordova更好的方案，那就是Ionic團隊開源的Capacitor既鞠。Phonegap/Cordova剛出來時煤傍，技術是先進的，掀起了混合式應用的時代序幕嘱蛋，但這么些年過去了蚯姆，已顯得有點落伍，Capacitor總結了Cordova的優(yōu)缺點后洒敏，以更簡單龄恋、靈活的使用、同時兼容使用現有的Cordova插件的方式誕生凶伙。
有些人可能聽過Capacitor郭毕，但是卻未必嘗試使用過。有使用過的函荣，可能也接觸不深显押，我看網上一些涉及到Capacitor的文章大多對Capacitor描述不多。
揭開Capacitor的神秘面紗
Capacitor當前實現了Native Plugin傻挂，其實它有個野心是：Native Component——對乘碑，像RN的東西，只是工作量太大金拒，暫時擱置兽肤，我比較好奇的是，Flutter的渲染理念出來后殖蚕，它會有怎樣的設計考慮。
- 首先我們打開任意一個H5項目沉迹，如Vue項目睦疫，執(zhí)行以下命令安裝Capacitor的環(huán)境支持：
npm i @capacitor/core @capacitor/cli -D
- 安裝完成后執(zhí)行Capacitor的初始化(注：npx用于便捷調用項目依賴的模塊（Capacitor-cli），可以省卻全局安裝及配置全局變量等操作鞭呕，更多了解可自行搜索）：
npx cap init
執(zhí)行完其實只是多了一個配置文件：capacitor.config.json
-
然后build你的項目蛤育，生成一個待發(fā)布文件夾，文件夾名和
capacitor.config.json中配置的一致葫松，默認是www文件夾瓦糕，你可以按自身情況修改為dist或其它的（這一步不能跳過，不然不能執(zhí)行下一步的添加平臺）：
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()
}
然后執(zhí)行下述命令：
npm run build
npx cap copy
最后在Android Studio編譯運行就發(fā)現可以調用原生功能了圣勒。這比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插件開發(fā)簡潔明了凡傅。
如果有過Cordova插件開發(fā)經驗的人砌溺，會對異步返回操作感到繁瑣于未，而Capacitor相比之下也簡單很多。 只要在任意地方發(fā)起事件通知即可：
JSObject res = new JSObject();
res.put("result", "some value");
notifyListeners("myPluginEvent", res);
然后在Vue中就可以監(jiān)聽得到：
MyToastPlugin.addListener("myPluginEvent", (info: any) => {
console.log("myPluginEvent was fired");
});
上述是為了快速了解插件而手打代碼窃这，實際上有命令快捷創(chuàng)建插件框架：
npx @capacitor/cli plugin:generate
- 兼容使用Cordova插件
兼容Cordova插件其實只是為了過渡明未，等Capacitor插件豐富起來了槽华，其實兼不兼容無所謂，不過這是個漫長過程趟妥。雖說是過渡猫态，但不代表對Cordova插件不友好。
首先Vue項目執(zhí)行下面命令添加依賴：
npm i cordova-plugin-telerik-imagepicker
然后執(zhí)行命令把插件原生部分更新到原生項目：
npx cap update
然后就能直接使用了披摄。如果你Vue的內容更改過亲雪，同時插件有新增或移除，就要同時執(zhí)行以下命令：
npx cap copy #復制待發(fā)布文件夾到原生資源文件中
npx cap update #更新插件依賴
兩個命令可以合并成一個：
npx cap sync
執(zhí)行完命令后就會自動把插件原生代碼合并到原生項目中疚膊，此后就可以在Vue中直接調用Cordova插件了义辕。
Capacitor與Ionic
既然Capacitor是Ionic團隊開源的，自然兩者使用起來更方便一些寓盗，我們回憶一下灌砖，Capacitor基本整個步驟是：
npm run build
npx cap sync
npx cap open android #這步在IDE已經打開情況下可略過
執(zhí)行原生IDE安裝運行應用
略顯麻煩，我們可以在package.json中配一個script來調用：
"scripts": {
"android": "npm run build && npx cap sync && npx cap open android"
}
而Ionic是可以直接一句命令完成：
ionic capacitor run android
