扔掉你的Cordova

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. 不用額外安裝任何東西便可使用基本的原生接口（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
複製代碼