您的位置首页百科问答

在Windows上搭建PhoneGAP(crodova)的开发环境

在Windows上搭建PhoneGAP(crodova)的开发环境

的有关信息介绍如下:

在Windows上搭建PhoneGAP(crodova)的开发环境

PhoneGAP是一个可以将web应用打包成移动应用的开源框架,使用它可以迅速的将HTML、CSS和JavaScript开发的web应用打包成跨平台的移动应用程序,而Apache Cordova是PhoneGap贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎。下面介绍如何在windows上搭建PhoneGAP(crodova)的开发环境。

一、安装JDK

搭建Java的开发环境,因为后面Android会用到Java的环境,具体的JDK安装于配置,请参考下面的引用链接,或直接在百度上搜索JDK的环境搭建。配置JDK的环境后在“命令提示符”窗口中输入java会有一大堆有关提示信息,输入javac同样也有一大堆提示信息则表示JDK安装配置好了,如下图所示。

70win10怎么安装JDK8,怎么配置JDK8的环境变量

二、安装nodejs

PhoneGAP新版本的环境搭建官方建议使用nodejs来安装,所以我们需要先安装搭建nodejs的环境。

首先,下载nodejs,然后傻瓜式安装,最后在“命令提示符”窗口输入node -v,查看是否出现版本号,如果出现则证明安装好,结果如下图所示。(具体搭建过程可以参考下面的引用教程)

7如何在Windows平台上下载、安装和测试nodejs

三、搭建Android环境

安装集成eclipse及Android SDK的adt-bundle-windows-x86_64-20140702.zip。建议通过SDK Manager安装Android 5.1 API 22,因为截至目前最新的PhoneGAP(crodova)打包成Android移动应用时需要Android 5.1 API 22的支持,虽然也可以更改API为更低的,但是效果不怎么好,有可能还会出现问题。下图显示的是Android 5.1 API 22安装好Android 5.1 API 22的界面。

(具体搭建过程可以参考下面的引用教程)

4如何在Windows上搭建Android开发环境

配置Android的环境变量

需要配置好Android的环境变量,平时我们在eclipse中开发Android时常常不配置Android的环境变量,那是因为eclipse帮助我们找到Android SDK的位置,而如果通过命令运行Android还是需要配置Android的环境变量,PhoneGAP(crodova)需要从命令行创建Android,启动Android模拟器。配置好的环境变量在命令行输入adb,如果出现一大堆提示信息,则表示陪Android环境变量配置好了,如下图所示。(具体搭建过程可以参考下面的引用教程)

11在windows10上配置Android的环境变量

四、安装cordova

首先,打开“命令提示符”窗口,输入命令

npm install -g cordova

以全局方式安装cordova。

等第一条命令运行完成,在命令行中在输入

cordova create MyNewApp com.example.MyNewApp MyNewApp

命令创建一个cordova的工程,其中第一个MyNewAPP是即将创建好后生成的文件夹名,com.example.MyNewApp是app的id,类似于java中的包,最后一个MyNewApp是工程名也是应用的名称。

创建好后,可以看到在D盘生成量一个MyNewApp的文件夹,文件夹中的目录结果如下图所示。

当然,我们在命令行输入

cd MyNewApp

命令进入MyNewApp的目录,输入dir命令也能查看文件夹中的目录结果,如下图所示。

然后,创建的工程文件夹目录下,我们在命令行中输入

cordova platform add android@*.*.*

添加对Android平台的支持。

当然,还有在windows下其他很多平台的支持,如下:

cordova platform add wp8

cordova platform add windows

cordova platform add amazon-fireos

cordova platform add android

cordova platform add blackberry10

cordova platform add firefoxos

编译工程,在命令行中输入

cordova build

编译所有平台工程,也可以编译特定平台如cordova build android(编译Android平台工程)。耐心等待,至于等待多长时间,这得看网速了。

最后,启动Android模拟器,在模拟器中安装编译后生成的apk文件,显示第一个cordova打包生成的移动应用。

耐心等待Android模拟器的开启,这个时间也有点长,具体开启时间得看你机子的配置和Android模拟器的设置了,最后,可以看到在模拟器中显示cordova的界面,如下图所示。

五、在eclipse中导入cordova工程

打开adt-bundle-windows-x86_64-20140702.zip中的eclipse或安装了ADT并配置好Android SDK的eclipse,点击菜单栏上的”File“选项,在弹出来的下拉列表中选择”Import...“,如下图所示。

3在eclipse中导入PhoneGAP(cordova)工程

进入到导入工程界面,导入刚才生成的Android工程们可以看到好多工程,点击有下角的”Finish“按钮,如下图所示。

eclipse会弹出一个Error窗口,提示MainActivity already exists,不管它,点击”OK“按钮,即可。

你会发现导入的工程报错,因为少了个库文件没有导进来,在导入一次,如下图所示。

此次再次导入时会发现CordovaLib没有到进来,只要选中,点击”Finish“按钮,再次导入即可。

导入过后,你会发现,工程没有出错了,打开MainActivity子文件夹assets下的www文件夹,会看到网页的目录结构。这样工程就导入到eclipse中了

在eclipse上,运行Android工程,最后也会启动Android模拟器,可以看到在模拟器中显示cordova的界面,如下图所示。

以下是常用的命令:

npm install -g cordova

cordova create MyNewApp com.example.MyNewApp MyNewApp

cd MyNewApp

cordova platform add 添加平台

cordova platforms ls 查看支持的平台

cordova platform remove 移除平台语句

cordova build 编译

cordova build 编译所有平台

cordova emulate android 启动Android模拟器

cordova run android 在Android平台上运行应用

cordova run android –target=”” 在目标设备上运行当前程序