日期： 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
就好啦！
网友评论