Cordova

2019-12-11 本文已影响0人五十岚色叶

日期： 2019 年 12 月 02 日

Cordova 学习笔记

1、概述

Cordova 是什么

Apache Cordova是一个开源的使用 HTML + CSS + JavaScript 做跨平台开发的移动开发框架

Cordova 的特点

它提供了一组用来调用手机设备（Android、IOS、Windows phone）的原生 API，让我们可以通过 JavaScript 调用原生代码，带来 Web 开发不曾有的原生体验；
可以将我们的 Web 程序包裹进原生的 APP 壳（WebView）中，也就是 Hybrid App ( 混合模式移动应用 )

Cordova 架构

这是cordova应用程序的几个组成部分。下面这幅图是cordova应用架构的高级视图：

cordovaapparchitecture.png
包括以下几个部分：
WebView —— 一个可以展示 web 页面的组件
Web APP —— 这是你应用程序代码存在的地方
插件 —— 可以让你的应用程序访问设备功能：电源、相机、联系人等

2、使用

通过使用 cordova命令行工具(CLI)，我们可以创建 cordova 应用并发布他们到不同的原生移动平台，下面来具体操作

安装

安装 Node.js , 装好之后我们就可以在命令行使用 node 和 npm
安装 cordova ，使用 Node.js 的 npm 工具
- 在 OS X 和 Linux 上:
```
$ sudo npm install -g cordova
```
- 在 windows 上：
```
> npm install -g cordova
```

创建 App

进入你维护代码的目录，创建 App

> cordova create hello-app

create.png

创建好的项目目录如下：

folder.png

添加平台

所有后续命令都需要在项目目录或者项目目录的任何子目录运行
添加 ios 平台：

> cordova platform add ios --save

ios.png

添加 android 平台：

> cordova platform add android --save

android.png

添加 browser 平台：

> cordova platform add browser --save

browser.png

添加完成之后，我们可以在 platforms 文件夹下面看到 android 和 ios 文件夹：

platforms.png

也可以使用相关命令检查你当前平台设置状况：

> cordova platform ls

platform-ls.png

运行项目

添加完平台之后，我们可以使用 cordova run <platform> 命令来运行相应平台的代码，上面我们添加了三个平台，其中 browser 平台不需要任何平台 SDK，我们可以首先在浏览器里面跑一下试试看效果：

> cordova run browser

run in browser.png

效果：

run-browser.png

如果想查看安卓平台的效果的话，需要安装配置 Android SDK 环境，包括 Java JDK 的安装和环境变量配置， Android SDK 的安装和环境变量配置。

可以检测一下是否满足构建平台的要求

> cordova requirements

requirements.png

可以看到这是 Android SDK 的问题，所以我们需要添加相应的 Android 平台，我们可以选择在 Android Studio 中的 SDK Manager 中进行相应平台的安装，也可以选择下载一个 SDK Manager 工具进行这项工作，要安装的东西主要有三个：Android SDK Build-Tools（lasted）, Android SDK Platform-Tools(API Level 28,29), Android SDK Tools(lasted); 在配置 Java 环境变量时还要注意一点的是 JDK 一定要选择 Java SE 8 , 别问为什么，踩了大坑之后得出的结论，这些都配置好之后再进行环境配置检查：

require-OK.png

没有问题就可以开始打包了

打包

上述工作没有问题，然后就可以进行 cordova run android 在 android 平台上运行了，就需要把项目导入了 android studio 中，导入之后的亚子：

import.png

导入的步骤：

打开 Android Studio
选择 import project
进入 cordova 项目目录，选择 platforms/android 路径，导入
会提示 Gradle Sync , 选择 Yes，静静等待
上述工作完成之后，拿出手机，插入数据线，连接到PC，打开开发者模式
打开 AS 的命令行，运行 cordova run android

打包的过程：

build1.png

build2.png

就好啦！