介绍和安装

Apache Cordova 是一套开源移动开发框架。开发者可以使用标准 Web 技术 ——HTML5、CSS3 与 JavaScript 进行跨平台开发。应用运行在面向各平台封装的容器内,通过兼容标准的 API 绑定调用设备能力,例如传感器、本地数据、网络状态等。

一套代码库,适配多平台,并且是免费开源。

如果你符合以下场景,可以选择 Apache Cordova:

  • 你是移动开发者,想要一套应用部署到多个平台,无需针对各平台语言与工具链重复开发;
  • 你是 Web 开发者,希望将网页应用打包,上架到各大应用商店分发;
  • 你是移动开发者,需要混合原生组件与 WebView(专用浏览器窗口),让网页代码访问设备底层 API;或是需要开发插件,打通原生代码与 WebView 之间的调用通道。

Cordova 应用由多个组件构成。下图为 Cordova 应用架构高层概览。

WebView(网页视图)

搭载 Cordova 能力的 WebView 可以承载应用完整界面。在部分平台中,它也能作为组件嵌入混合应用,和原生控件共同工作。

Web App(网页应用)

这里存放你的业务代码。应用本身以网页形式实现,默认入口为本地 index.html 文件,页面引用所需 CSS、JavaScript、图片、媒体资源等文件。整个应用运行在原生容器内部的 WebView 中,最终打包分发至各个应用商店。

容器中有一个至关重要的文件:config.xml。该文件记录应用基础信息,并定义各项运行参数,例如是否支持屏幕横竖屏切换。

Plugins(插件)

插件是 Cordova 生态的核心组成部分。它提供桥梁,实现 Cordova 与原生代码互相通信,并封装各类设备标准 API,让 JavaScript 能够调用原生代码。

Apache Cordova 官方维护一组核心插件,提供访问设备基础能力的接口:电池状态、相机、通讯录等。

除官方核心插件外,还有大量第三方插件,封装各类并非全平台通用的扩展功能。你可以通过插件检索平台或 npm 查找 Cordova 插件;也可以按照《插件开发指南》自主开发插件。典型场景:实现 Cordova 和自定义原生组件之间的通信。

注意:新建 Cordova 项目默认不自带任何插件,这是新版默认规则。无论核心插件还是第三方插件,都需要手动显式安装。

Cordova *不提供 UI 控件与 MV 前端框架 **,仅提供承载网页代码的运行环境。如果你需要界面组件或前端架构框架,需要自行选择并集成到项目中。

两种开发流程

Cordova 提供两套主流工作流来构建移动应用。很多场景下两套流程都能实现目标,但各有优势:

跨平台工作流(CLI 命令行工具)

适合目标平台较多、极少需要平台专属定制开发的场景。核心工具为 cordova CLI。 CLI 是高层工具,支持一次性为多个平台构建项目,屏蔽底层脚本细节: CLI 将通用网页资源复制到各个平台子目录,自动完成平台配置,执行构建脚本生成安装包;同时提供统一命令行接口管理插件。

平台专属工作流

适合聚焦单一平台开发、需要深度底层修改项目的场景

典型使用场景:在应用内混合自定义原生组件与 Cordova WebView

如果你需要直接修改平台 SDK 内项目文件,就选用这套流程。

该工作流基于各平台专属底层脚本,搭配独立工具 Plugman 管理插件。 虽然也能用它做多平台开发,但成本更高:没有高层工具统一管理,每个平台需要单独构建、单独维护插件配置。

一旦从 CLI 模式切换为平台 SDK + 底层脚本模式,无法回退

CLI 会维护一套跨平台公共源码,每次构建都会覆盖平台目录内的代码。如果你需要保留对平台目录文件的修改,就必须切换到底层脚本模式;该模式不再读取公共网页源码,直接使用平台目录内独立代码。

安装 Cordova

安装方式取决于你选择的开发流程:

我们以跨平台 CLI 工作流模式为例。

Cordova 命令行工具(CLI)以 npm 包形式分发。

按照以下步骤安装 cordova CLI:

  1. 下载并安装 Node.js。安装完成后,你应当可以在终端直接调用 nodenpm 命令。
  2. (可选)如果你尚未安装 Git,下载并安装 Git 客户端。安装后,可在命令提示符(终端)执行 git 命令。当需要通过 Git 仓库地址下载资源时,Cordova CLI 和 npm 会调用 git。
  3. 使用 Node.js 自带的 npm 工具安装 cordova 模块,npm 将自动完成下载。

安装nodejs

安装nodejs比较简单,下载msi(对于windows系统),直接双击安装就可以,安装过程就基本下一步就可以。安装完毕后

打开CMD终端,检验是否安装成功

输入两条命令,两条都正常输出版本号才算成功(输出版本号,如下图)

node -v
npm -v

成功安装nodejs后,下面开始安装cordova

macOS / Linux 系统:

npm install -g cordova

macOS 与 Linux 用户:若需要将工具安装到 /usr/local/share 这类权限受限目录,执行 npm 命令时可能需要加上 sudo
但如果你使用了 nvm / nave 这类版本管理工具,或者当前目录拥有写入权限,则可以不加 sudo

同时建议:尽量避免搭配 sudo 使用 npm,防止出现权限、包安装异常等问题。
推荐使用 nvm(Node Version Manager)或 nave 版本管理器管理 Node.js 和 npm,安装包时通常无需 sudo。

Windows 系统:

C:\>npm install -g cordova

参数 -g 代表全局安装 cordova;如果不加该参数,只会安装在当前目录的 node_modules 子文件夹内。

安装完成后,在终端直接执行 cordova(不带任何参数),若正常输出帮助信息即代表安装成功。

安装过程 显示“added 217 packages in 14s”

检验是否安装成功

cordova -v

正常输出版本号(例如 13.0.0)就代表就绪。

系统要求与版本支持

Cordova CLI 版本支持的 Node.js 最低版本
13.x>=20.17.0
12.x>=16.13.0
11.x>=12.0.0
10.x>=10.0.0
9.x>=6.0.0

现在安装成功,接下来,我们就开始正式学习cordova了。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注