移动端跨平台开发框架 Cordova 学习笔记(一) 环境搭建及创建第一个 Cordova Android APP

转载请注明本文出自 clevergump 的博客：http://blog.csdn.net/clevergump/article/details/54861886, 谢谢!

这个系列的文章, 介绍的是移动端著名的跨平台开发框架 Cordova. 跨平台, 顾名思义, 就是只需开发一套代码, 就可以在多个平台上运行. Cordova 针对的是移动端的跨平台, 所以我们只需借助于该框架提供的 API, 编写出一套代码, 就可以同时在 Android, iOS, WindowsPhone 等手机系统上运行.

本文要介绍的是 Cordova 开发环境的搭建, 以及创建并运行第一个 Cordova Android APP的步骤. 相关操作步骤参考官网的这篇文章: Create your first Cordova app. 下面分别来介绍这两部分内容.

一. Cordova 开发环境的搭建

1. 安装 node 和 npm
   注意: 在linux系统下, 不要使用 apt-get install 的方式安装. 而要像 Cordova 官网介绍的那样, 去nodejs官网 (https://nodejs.org/en/download/) 下载软件包, 解压后将 bin 目录添加到 PATH 中即可. 添加成功的标志是:
   执行 node -v 及 npm -v 都能显示出各自的版本号. 另外如果是 linux 系统, 则还可以执行 which node , which npm 指令, 看看查找出的路径是不是刚才添加到 PATH 中的路径, 如果是, 那么就进一步说明安装是没有问题的.

   ubuntu系统:
   
   例如: 如果我将下载的nodejs压缩包解压后放在 /home/abc/Softwares/nodejs 路径下, 那么将bin目录添加到环境变量PATH后, 执行 which node , which npm 指令查找出来的这两个指令的路径就应该是如下结果:
   

   windows系统:
   

2. 安装 git 客户端
   ubuntu 系统已经自带 git , windows 系统需要额外下载安装(下载地址: http://git-scm.com/downloads), 安装成功的标志是: 执行git指令会有输出结果, 或者查询 git --version 能显示当前已安装的 git 客户端的版本号:

   ubuntu系统:
   

   windows系统:
   

3. 使用 npm 安装cordova, 官网介绍的安装指令是:
   在 OSX 和 Linux系统下:

   sudo npm install -g cordova

   在windows系统下:

   npm install -g cordova

   但是这些指令都默认是从国外的官网下载相关安装包和依赖包, 由于墙的原因, 下载速度太慢, 可以将下载地址改为使用镜像地址, 例如: taobao的镜像地址. 具体修改方法, 可参考这篇文章 https://cnodejs.org/topic/4f9904f9407edba21468f31e, 找到 .npmrc 文件 (ubuntu系统中该文件位置是~/.npmrc, windows系统中该文件位置是: 系统盘:\Users\用户名.npmrc ), 在该文件中添加如下内容:

   registry = https://registry.npm.taobao.org

   此后再去执行官网介绍的上述指令, 即可从taobao的镜像地址中去下载相关的安装包和依赖包了.

   下载安装完成后, 会显示刚才下载的相关安装包和依赖包的版本信息树状图, 如下:
   ubuntu系统:
   

   windows系统:
   

   此后, 可以在命令行中输入 cordova, 看看cordova是否安装成功. 如果安装成功, 会显示该指令的用法介绍, 具体如下:
   ubuntu系统:
   

   windows系统:
   

---

二. 创建并运行第一个 Cordova Android APP

不论是Cordova工程的创建, 配置, 还是运行等操作, 都需要执行相关指令. 由于涉及到的指令较多, 我们无需死记硬背, 只需记住如下两个重要的指令即可:

cordova help   // 查看cordova支持的各项操作的核心指令名称及相关含义
cordova help <command> // 查看cordova某个特定指令的详细用法

当我们需要执行某个操作时, 即使忘记该操作所对应的指令的具体内容, 甚至忘记指令的关键词, 也都没关系, 我们随时可以使用上述两个指令来现场查看具体的指令细节. 输入 cordova help, 会显示各个操作的相关指令简介及使用案例, 如下图: