扔掉你的Cordova

时间  2019-11-30 标签 扔掉 cordova

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

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

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

揭开Capacitor的神秘面纱

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

  1. 首先咱们打开任意一个H5项目，如Vue项目，执行如下命令安装Capacitor的环境支持：
npm i @capacitor/core @capacitor/cli -D
复制代码
  1. 安装完成后执行Capacitor的初始化(注：npx用于便捷调用项目依赖的模块（Capacitor-cli），能够省却全局安装及配置全局变量等操做，更多了解可自行搜索）：
npx cap init
复制代码

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

  1. 而后build你的项目，生成一个待发布文件夹，文件夹名和capacitor.config.json中配置的一致，默认是www文件夹，你能够按自身状况修改成dist或其它的（这一步不能跳过，否则不能执行下一步的添加平台）：
npm run build
复制代码
  1. 添加要支持的平台，如android：
npx cap add android
复制代码
  1. 打开你的IDE：
npx cap open android
复制代码
  1. 而后在Android Studio编译运行就能够了。一个普通的web应用，变成了一个手机端应用。

Capacitor有什么特色

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

咱们改动下Vue的代码：api

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

而后执行下述命令：bash

npm run build
npx cap copy
复制代码

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

  1. 简单地自定义插件

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

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

@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
复制代码
  1. 兼容使用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
复制代码
联系我们 沪ICP备2021010478号-7