Cordova入门教程

全篇共 3071 字。按500字/分钟阅读,预计用时 6.1 分钟。总访问 147 次,日访问 3 次。

用前端技术HTML、CSS、JavaScript编写一套代码,Cordova负责将代码编译成能在Android、iOS、Windows平台运行的应用,调用原生应用的硬件API如摄像头的能力。

如何介绍Cordova

我会给每一篇文章编写一段简介,当然这篇 Cordova 入门教程也不例外,但我觉得我写的描述 Cordova 的简介并不出色,因为我谦虚的说我对他并没有它的“父母”对他那么了解。我从 Cordova 官网和 Ionic 官网搜罗了它们对 Cordova 的介绍,来看一下吧:

首先来看 Cordova 官方网站是如何介绍他“孩子”的:

Cordova官方网站解释Cordova

首先它是开源的,其次是在移动端“搞事情”的,最后它是框架,意为着你必须按照他的规定好的“路子”走。你能使用标准的前端技术栈“HTML/CSS/JavaScript”跨平台开发。最终在各平台上运行的代码被包裹在针对该目标平台的“容器”内运行,Cordova造了一个“空壳子”包括你的代码,我突然有把这个“空壳子”想象成包裹DNA的病毒外衣的奇怪想法,我们只需关心和编写“DNA”,剩下的交给Cordova植入。“植入”到目标平台,比如Android平台的Cordova包裹的App便可以使用该平台特有的功能,比如传感器、网络状态等,这也是让我最为Cordova兴奋的地方。

下面是 Ionic 对 Cordova 的名次解释:

Ionic对Cordova的介绍

Cordova 是开源的——移动应用——开发框架,把标准的“HTML/CSS/JavaScript”前端代码“转换”成看起来就像原生应用的模样。你能用扩展的 JavaScript API 调用原生设备(比如Android设备)的功能,比如照相机、传感器等。Cordova把各特定目标平台iOS、Android、Windows Phone所需的构建工具打包起来, 这你无需操心。

Cordova 官网和 Ionic 官网对 Cordova 的解释几乎一模一样,大体包含三部分:

  1. 开源,移动应用开发,框架。
  2. 前端HTML/CSS/JavaScript代码编译打包成在各平台运行的包。
  3. 调用设备原生功能,传感器、照相机、网络。

创建Cordova项目

Cordova 命令行工具运行在 Node.js 环境中,使用 Node.js 附带的 npm 在全局环境安装 Cordova 命令行工具。使用最新版本的 npm 命令行工具。最新版本的 Node.js 可通过 nvm 切换,也可前往 Node.js 官方网站下载:

npm i -g npm
npm i -g cordova

在全局中安装好 Cordova 命令行工具后,使用 Cordova 命令行工具创建一个 Cordova 项目,learn-cordova 可以替换成任何项目目录的路径,Cordova 会创建不存在的项目目录。不出意外,终端打印创建项目目录成功的提示语。进入 learn-cordova 目录,使用 ls 命令查看 Cordova 给我们生成的目录结构和文件:

cordova create learn-cordova
// Creating a new cordova project.

cd learn-cordova
ls -la

把项目目录放入顺手的代码编辑器中。我们的 learn-cordova 空白项目目录结构长成这个样子。当你还没有看官方文档对每一个目录用途的解释时,不妨根据目录名称和目录之间的结构关系,发挥想象力,推测它们可能的用途,猜对了固然好,猜错了更值得高兴,因为“错”有时何尝不是意味着创造力和无限可能性。从何时起,我们对“错误”的第一反应被训练成了应该产生挫败感,你可以故意犯错,体会不一样的感受,让自己的感情更丰富立体,还能让自己有同理心——当别人出现同样的“错误”时,你能理解和包容别人,甚至还想鼓励他。

Cordova空白项目目录结构

hooks意为钩子,我猜可能是在给多个平台编译前端代码和构建应用时的各个节点处我们可以控制Cordova的某些行为。platforms意为全部平台,既然Cordova能把前端代码编译成能在许多平台运行的应用,那么这里应该是存放这些平台的配置或生成后的代码的地方。plugins意为全部插件,我不知道会有什么插件,但我知道,有插件的地方就意味着可扩展,能让Cordova的生态愈加完善的地方就在于此。www目录一眼直到是提供web服务的地方,我们编写的前端代码经过编译成为可在浏览器中运行的代码,我们就能浏览器中查看UI效果和测试功能。config.xml 应该是用来配置整个项目或者应用,因为它位于项目的根目录内。package.json是每个npm项目都会有的存在于项目根目录下的配置文件,它的核心用途是记录开发项目用到了哪些依赖,初次之外,也会存储额外信息,供我们在项目中读取配置信息,或供构建环境和插件了解我们的意图。

添加运行平台

依然用 Cordova 命令行工具,执行 platform 指令,罗列出所有项目中已安装的平台和所有可用的平台:android、browser、electron、ios、osx、windows。现在我们还没有安装任何平台,所以至罗列出了所有可安装的平台。

Cordova支持为Android、iOS、macOS、Windows等平台编译前端代码

执行命令 cordova platform add android,安装 android 平台。cordova-fetch 命令下载 cordova-android,然后将其添加到我们的项目之中。设置作为 android 项目必填参数,比如包名 Package、应用名称 Name、启动意图 Activity、所用 Android API 版本号(28)。子项目 Subproject,learn-cordova 是父项目,那么针对每一个平台在 platforms 目录中创建的目录就是子项目。然后安装在 config.xml 中发现的插件,在 package.json 中能看到最新安装的插件:

Cordova项目添加android平台

添加其他平台的方法和上面类似,只需把 cordova platform add <platform-name> 中的 <platform-name> 替换成你想安装的平台即可。往往很多事情说起来轻松,做起来就不容易了。比如我对 iOS 和 OSX 平台开发并不了解,所以对于刚入门 Cordova 的我来说,会先选择 Android 平台试水。至于 electron,electron 本身就是跨平台的,至少我现在还没有 GET 到需要用 Cordova 做 electron 项目的必要性,唯一能想到的就是 Cordova 有想“一揽子”全包的勃勃野心。

在 Android 平台运行

执行 cordova run,由于我们在上面只添加了 Android 平台,所以默认启动构建 Android 平台上运行的应用。首先会检查系统是否安装 Java JDK 和 Android SDK。然后怒开始将前端代码编程成能在 Android 设备上运行的应用程序,随后 Cordova 尝试启动安装虚拟机。下方右侧截图就是在 Android 虚拟机启动应用后的主界面。

Cordova启动Android虚拟机

结语

这篇文章记录我学习 Cordova 的学习过程,真正的Cordova学习之旅仍需从 Cordova 官方网站 开始,这也是我为什么非常不建议你们仅停留在看过网络上所谓几篇技术文章(包括我的)就停滞不前了,还应该追根溯源,学东西就要从“根”上学起,我甚至不建议阅读网络上经过加工的所谓教程,那只是别人咀嚼过的烂草,真正学习的真谛被作者吸收了,留给你们的只剩下的没多少营养的渣滓。学习的真谛靠你自己摸索,扔掉不怀好意的拐杖,那会阻碍你奔跑,你本可以更强大,探索你自己的潜力吧。