一、简介

• Cordova 是用 Web 技术（ HTML，CSS 和 JS ）构建移动应用的平台。
• 我们可以认为Cordova 是一个容器，用于将的 Web 应用移植到移动端，同时支持移动端的功能（例如：定位、蓝牙、摄像头等）。

优势：

• 对前端友好，学习成本低
  • HTML，CSS 和 JS，只要你写过 SPA，就很熟悉 Cordova
• 跨平台，一套代码，多端部署（便于移植）
  • IOS，Android，Windows Phone，Amazon-fireos，黑莓，Firefox OS，Ubuntu 和 tizien

不足：

• Cordova 应用比原生应用慢（不适合做高性能应用）
• Cordova 跨浏览器的兼容性差
• Cordova 跨平台的兼容性有待提高（某些平台上的 API 还不支持）

官网： https://cordova.apache.org/
中文镜像：http://cordova.axuer.com/
Github： https://github.com/apache/cordova

默认情况下，Web 应用不能使用移动端功能（例如：定位，蓝牙，摄像头等）。通过 Cordova，我们可以使用 Web 技术，实现应用，同时，支持移动端功能。

架构图

二、环境搭建

整体来说，Cordova 需要的环境是 Node.js + 平台（ 例如：Android 和 iOS ） 。环境搭建主要包含如下
内容：

• Node.js 环境搭建
• Git 安装
• Android 环境搭建（JDK、Android Studio、Gradle）
  • JAVA_HOME
  • ANDROID_HOME、ANDROID_SDK_ROOT
  • PATH
• iOS 环境搭建(Xcode)
  • npm i -g ios-sim
  • npm i -g ios-deploy
• VS Code 编辑器(Cordova Tools插件)

Node.js 环境搭建

Node.js 的版本应大于等于 12 ，推荐安装 LTS 版本（去 Node.js 官网下载安装包）
安装之后，（为了提高下载速度）我们将 npm 镜像源，设置为淘宝的

1 # 修改 npm 的镜像源
2 npm config set registry https://registry.npm.taobao.org
3
4 # 验证是否更改成功（查看镜像源）：
5 npm config get registry

Cordova 依赖 Git 命令行工具

Git 安装

如果未安装 Git for Windows，请先安装；
如果已安装 Git for Windows，请确保命令提示符或 PowerShell 中可运行 git 命令

Android 环境搭建

简介
JDK（Java Development Kit）是 Java 开发套件的简称。Android 开发，需要安装 JDK。
下载
下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
请选择一个适合本地操作系统的安装包（操作系统+位数，例如：Windows x64） 。
下载时，提示需要登陆，我们可以先注册 Oracle 账户，登陆后再下载。
安装
下载完成后，双击安装包，开始安装（一直下一步就好，无需特殊配置）
设置 Java 环境变量
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_

配置好 JAVA_HOME 后，可以再配置两个路径

检测安装结果
如果以下命令可以正常运行，则说明环境变量配置成功

1 java - version
2
3 javac

Android Studio

Android Studio （简称 AS）是安卓开发的编辑器和运行环境。使用之前，先下载。（ 如已经安装，请略
过本节 ）
下载地址：https://developer.android.com/studio/index.html

安装 Android SDK（可选）
正常来说，你可以忽略这一步。 因为 Android Studio 默认会安装最新版本的 Android SDK 。

打开 Android Studio，在菜单 Tools 下找到 “SDK Manager”

下载过程需要翻墙，下载安装内容很多，所以安装过程会很缓慢

Android SDK 是针对安卓开发的套件。
如果最新的 Android SDK 存在兼容性问题。这里你还可以单独安装，指定版本的 Android SDK。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后，在右下⻆勾选"Show Package Details"。展
开指定版本（例如：Android 10 (Q)）的选项，确保勾选了下面这些组件（ 重申：你必须使用稳定的
翻墙工具，否则可能都看不到这个界面 ）：
Android SDK Platform 29
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组
件）

然后 点击"SDK Tools"选项卡，同样勾中右下⻆的"Show Package Details" 。展开"Android SDK
Build-Tools"选项，确保选中了29.0.2版本。

点击 OK 执行下载（这个下载时间也比较⻓，同时确保翻墙工具稳定可用）

下载完成后，点击 Finish

设置 Android 环境变量
ANDROID_HOME=C:\Users\你的名字\AppData\Local\Android\Sdk
ANDROID_SDK_ROOT=C:\Users\你的名字\AppData\Local\Android\Sdk

总共有两个内容，组件大小约：113.0 MB，安装后占用空间约：451.9 MB

如果下载过程中断，请重复选中以上两个组件，再次下载
例如，我本地下载中断，报错：SSL peer shut down incorrectly（网络中断报错）
只需要重复选中所需组件，再次下载即可 。

Gradle 安装

1. 下载
下载地址：https://services.gradle.org/distributions/
下载版本：建议使用 gradle-6.5-all.zip （我之前下载的 6.8 说太高了，而后又切换到 6.5）
2. 解压
下载后解压，将加压包放到任意位置（例如，我本地是 D:\Program Files\gradle-6.5）
3. 绑定环境变量
D:\Program Files\gradle-6.5\bin

4. 检测安装结果

1 gradle - v

iOS 环境搭建

Mac 上的相同内容的安装这里省略
例如：Node.js、Git、JDK、Android SDK、Gradle 等

安装 Xcode
在 App Store 中安装即可。安装完成后，再安装 iOS 模拟器。

安装部署工具

1 npm install - g ios-sim
2 npm install - g ios-deploy

VS Code 编辑器

下载地址：https://code.visualstudio.com/

在 VS Code 中编辑 Cordova 代码，最好安装 Cordova Tools 插件

三、初始化项目

当前平台信息（ 注意平台版本，例如，Android 是 9.0，将来安装模拟器时，也要安装对应的版本 ）

安装 Cordova CLI

1 npm install - g cordova
2
3 cordova - v

创建项目

1 cordova create HelloCordova io.cordova.hellocordova CordovaApp
2 # HelloCordova 应用程序的目录名称。
3 # io.cordova.hellocordova 项目唯一标识（默认的反向域值）。一般是点连接的语法
4 # CordovaApp 应用的标题。

添加平台

1 cd HelloCordova
2
3 # 浏览器
4 cordova platform add browser
5
6 # 安卓 添加 android 平台，并确保他们保存在了 config.xml 中
7 cordova platform add android --save
8
9 # 查看当前平台
10 cordova platform ls

1 Installed platforms:

2 android 9.0.
3 browser
4 Available platforms:
5 browser ^6.0.
6 electron ^1.0.
7 windows ^7.0.

模拟器安装截图

如果版本不兼容，后续运行 Cordova 时，模拟器可能无法启动。

运行

1 # 浏览器端运行
2 cordova run browser
3
4 # 安卓端运行
5 cordova run android # 真机调试
6 cordova emulate android # 模拟器启动

项目目录

hooks：钩子目录。每个Cordova 命令都可以定义 before 和 after 的 Hook，比如：before_build、
after_build
platforms：平台目录。例如 android、ios、browser 等
plugins：插件目录。安装的插件会放在这里
www：源代码目录。在执行 cordova prepare 的时候，源码会被 copy 到各个平台工程的 assets\www
目录下
config.xml：主配置文件，比如：项目使用了哪些插件、应用图标和启动⻚面

四、index.html

Meta

Content-Security-Policy（CSP）

网⻚安全策略（CSP）的实质就是白名单，开发者明确告诉客户端，哪些外部资源可以加载和执行，哪些
不可以。

CSP 的主要目标是减少和报告 XSS 攻击。大大增强了网⻚的安全性。攻击者即使发现了漏洞，也没法
注入脚本
两种方法可以启用 CSP

• 通过 HTTP 头信息的 Content-Security-Policy 的字段
• 通过网⻚的 标签

选项名

default-src ：限制全局

script-src ：外部脚本
style-src ：样式表
img-src ：图像
media-src ：媒体文件（音频和视频）
font-src ：字体文件
object-src ：插件（比如 Flash）
child-src ：框架
frame-ancestors ：嵌入的外部资源（比如、