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

2025-04-22 09:07:20

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

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

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

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

3、三、搭建Androi蟠校盯昂d环境安装集成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的界面。(具体搭建过程可以参考下面的引用教程)

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

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

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

5、四、安装cordova首先,打开“命令提示符”窗口,输入命令npm install -g cordova以全局方式安装cordova。

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

6、等第一条命令运行完成,在命令行中在输入cordova create MyNewApp com.example.MyNewApp MyNewApp命令创建一个cordova的工程,其中第一个MyNewAPP是即将创建好后生成的文件夹名,com.example.MyNewApp是app的id,类似于java中的包,最后一个MyNewApp是工程名也是应用的名称。

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

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

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

8、当然,我们在命令行输入cd MyNewApp命令进入MyNewApp的目录,输入dir命令也能查看文件夹中的目录结果,如下图所示。

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

9、然后,创建的工程文件夹目录下,我们在命令行中输入cordova platform add android@*.*.*添加对A荏鱿胫协ndroid平台的支持。当然,还有在windows下其他很多平台的支持,如下:cordova platform add wp8cordova platform add windowscordova platform add amazon-fireoscordova platform add androidcordova platform add blackberry10cordova platform add firefoxos

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20、以下是常用的命令:npm install -g cordovacordova create MyNewApp com.example.MyNewApp MyNew帆歌达缒App cd MyNewAppcordova platform add <platform name> 添加平台 cordova platforms ls 查看支持的平台cordova platform remove <platform name>移除平台语句 cordova build <platform name> 编译 cordova build 编译所有平台cordova emulate android 启动Android模拟器 cordova run android 在Android平台上运行应用cordova run android –target=”” 在目标设备上运行当前程序

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢