cordova与phonegap的应用

Cordova:
Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。

1.搭建开发环境
下载安装jdk：
下载地址：http://www.oracle.com/technetwork/cn/java/javase/downloads/index.html
下载成功后，双击下载的.exe文件以进行安装。记住安装路径，稍后会用到。此安装程序会在你的电脑上安装两个程序，一个是JDK，一个是Java。安装过程中会让你分别选择JDK和Java的安装路径，不要设为同一个文件夹。
安装完成后，按以下步骤配置系统变量：
右键点击“我的电脑” ==> “属性” ==> “高级系统设置” ==> “环境变量”
（不同操作系统打开“环境变量”设置窗口的步骤可能略有不同）
点击“系统变量”下的“新建”，在弹出窗口中为我们的操作系统创建一个新的系统变量。
在弹出的窗口中的“变量名”后的输入框中输入JAVA_HOME，在“变量值”后的输入框中输入刚刚安装的JDK的目录，例如在我的电脑上是D:\JDK。
设置好后，连续点击“确定”，直到关闭所有的弹出窗口。

2.安装Android studio
下载地址：https://developer.android.com/studio/index.html
由于众所周知的原因，此网站已被墙了，如果打不开网页，那就吧。
在安装过程中，会提示你选择Android SDK和Android Studio的安装目录，记住安装目录，稍后会用到。
其实我们安装Android Studio的原因只不过是为了得到Android SDK，你当然也可以只下载并安装Android SDK。
安装完成后，按照“步骤一”中的方式再次打开“环境变量”窗口，点击“系统变量”下的“新建”，在弹出窗口中的“变量名”后的输入框中输入ANDROID_HOME，在“变量值”后的输入框中输入你的Android SDK的安装目录，例如在我的电脑上是D:\AndroidSDK。
点击“确定”以关闭“新建系统变量”窗口。
在“系统变量”列表中找到“Path”，选中它，然后点击下面的“编辑”，将光标移动到弹出窗口中“变量值”后输入框的最后，输入英文分号（;），再接着输入%ANDROID_HOME%\platform-tools。
设置好后，连续点击“确定”，直到关闭所有的弹出窗口。

因为最新版的cordova只有24版本的sdk才支持，所以需要在sdk文件夹中打开SDK Manager，并在Tools下把24开头版本的全部打钩，在Android 7.0下的SDK Platform,版本为24同样也打钩，并点Install… 安装成功之后出现OK就可以关掉窗口了

3.安装node.js
下载地址：https://nodejs.org/en/
安装node.js的目的是为了得到npm工具。
在命令行窗口中输入以下命令并回车：node -v，检查安装是否已经完成

4.安装cordova:
执行以下命令安装cordova：npm install -g cordova
在命令行窗口中输入以下命令并回车：cordova -v检查安装是否完成

5.安装phonegap Pc端：
下载地址：http://phonegap.com/getstarted/
安装需要等待较长时间。所以不要因为等待时间较长而关闭窗口

6.安装PhoneGap 手机端：
准备一部测试用的手机（Android），在你手机上的应用市场中搜索PhoneGap，并安装它。
如果你的手机应用市场中搜索不到PhoneGap，则可使用腾讯“应用宝”安装一个。（腾讯“应用宝”在QQ PC版的右下角）。

环境都配置完之后，开始创建项目。我们先创建一个hello Cordova项目吧

1.双击电脑桌面上的“PhoneGap Desktop”以启动在上一节中安装的PhoneGap PC端。

2.点击左边的“+”，再点击“Create new PhoneGap project…”

3.然后在“Local Path”下选择项目保存的目录，在“Name”下填写项目的名字，“ID”是可选的，它是你的应用在App商店中的唯一标识符，推荐使用你的域名（一般将域名的后缀移到前面）

4.填写完毕后，点击“Create project”以创建项目。

5.编辑文件：
项目创建成功后，在我们选择的项目存放目录中就多了一个“HelloCordova”文件夹，该文件夹中存放的就是PhoneGap自动为我们创建的所有文件，我们自己创建的文件也将存放在此目录中。
打开该文件夹，其中有一个“www”文件夹，打开它，其中有一个“index.html”文件，该文件就是我们项目的起始文件，用你喜欢的任何编辑工具打开它，删掉所有的注释并编辑它。

添加Android平台：
默认情况下“PhoneGap”并没有为我们创建任何平台的应用，若想创建Android或iOS平台的应用，需使用命令去创建。在此我们为我们的项目添加一个Andorid平台的应用。

打开命令行窗口，并进入我们的项目文件夹：
E:
cd E:\MyDocuments\Apps\HelloCordova
输入以下命令并回车以添加Android平台：cordova platform add android

此过程可能需要一点时间，稍等片刻，待命令执行完毕后，在我们的项目文件夹下的“platforms”文件夹下便会多出一个文件夹“android”。

同理，如果想添加iOS平台，则执行的命令应该是：cordova platform add ios

6.在真实设备上运行：
准备一部Android手机，并使其与你的开发电脑处于同一个局域网中（最简单的方式是让你的手机连接到开发电脑所在局域网的WIFI），你也可以将手机的数据线连接到你的电脑后，在你的手机端打开“USB共享网络”。

在PhoneGap PC端中点击我们项目后面的“启动铵钮”：就是带有尖角号的按钮

注意底部的IP地址，就是你电脑的IP，后面的“3000”是项目运行的默认端口。
启动手机端的PhoneGap，并将IP地址和端口改为上面PhoneGap PC端显示的IP地址和端口，然后点击“Connect”，稍等片刻后我们的“HelloCordova”应用就会在手机端运行了：

7。打包：
若要使其他用户也能安装我们开发的应用，则需将我们开发的应用打包。
打开命令行窗口，并进入我们的项目文件夹：
E:
cd E:\MyDocuments\Apps\HelloCordova
然后输入以下命令并回车：
cordova build android
此过程可能需要一点时间。编译完成后，在 platforms -> android -> build -> outputs -> apk 目录下会多出两个 .apk 文件，有可能只有一个。我们需要的是文件名中不带“-unaligned”的那个，这就是我们的App的Android平台的安装包。

---

用指令的方式也可以创建cordova，在上面第四部创建cordova之后。可以执行：cordova create hello com.example.hello HelloWorld
其中hello是你创建之后的文件名，com.example.hello是项目标识id，而HelloWorld是应用名

再执行：$ cd hello

然后： cordovaplatformaddios或者 cordova platform add android

npm install -g cordova ionic

ionic start myApp tabs

ionic platform add ios 或者 android
ionic build ios 或者 android