您的位置：首页 > 移动开发 > Android开发

PhoneGap(windows)环境下的安装和第一个测试程序

2015-03-27 15:01 459 查看

昨天复习了一下以前cocos的移植android程序的编译和一些问题处理，今天接着准备复习点啥呢？

干脆就来试着弄一下PhoneGap的集成吧，一样记录尽量详细一点，免得日后复习的时候又要从头开始，一个字<烦（草）死（TA）了（妹）>！

1：安装Node.js

首先在上网上下载Node.js
（请猛击）下载的时候请根据自己的系统环境进行选择，我选择的是

下载好后点击安装

2：安装PhoneGap

1：配置环境变量

第一步安装好Node.js后，请将安装Node.js 的目录配置到环境变量的Path后面，然后请打开CMD 输入npm -version 进行测试，如果输出当前版本号，则安装成功

2：安装PhoneGap

在刚才的命令窗口下输入 npm install -g phonegap (等待安装)
安装好后继续输入 nom install -g cordova (等待安装)
都安装结束后。一样分别输入 phonegap -version 和 cordova -version 进行测试，当都输出版本号时，则证明安装成功

3：创建第一个PhoneGap程序

在命令窗口中输入 phonegap create FirstAPP
注：因为我执行该命令的时候是处在

这个目录，
所以命令执行成功后，请到该目录 “C：\User\Administrator”下找到该项目
然后可以将该项目剪切到你的任意一个文件夹下，比如我常用的D：\workSpace...
以上步骤完成后请在CMD下定位到FirstAPP目录，然后输入命令 phonegap run android
截止到目前，程序已经创建成功

4：添加自己的第一个程序

1：assets目录下没有相应的www目录等

根据网上有些资料说，将已经创建好的工程导入到Eclipse的时候，目录会出问题，这里做一个详细的介绍
请按照一下步骤进行：a：

按照以上的步骤导入项目后得到两个项目如下：

此时导入完成后，会发现在Assets目录下并没有相应的一些www目录，甚至在res下的xml下也没有相应的config.xml文件
解决此问题的方法是请打开 Projects->Properties->Resource->Resource Filters remove掉下面和我们的项目有关的两个引用，
刷新一下项目，相应的那些文件都出现了

5：示例程序

1：一个简单的加载本地文件，没有任何交互处理

修改assets文件下的www目录下的index.html文件，随便在里面增加什么东西，比如在<body></body>中增加<h1>Hello FirstAPP</h1>
然后将Java文件中的onCreate中的内容修改为 super.loadUrl("file:///android_asset/www/index.html"); 运行程序，第一个程序就执行成功了如下：

2：编辑一个让程序能通知的应用程序（发出通知的声音）

此刻再次打开我们的CMD，进入到刚才我们的FirstAPP目录
执行该命令
cordova plugin add org.apache.cordova.dialogs （为了下载该通知相关的一些文件）
执行以上的命令下载成功，执行cordova platform add android 将刚才下载的文件添加到我们的应用程序，添加成功后开始构建我们的程序
执行 cordova build 命令，构建完成后，在res->xml->config.xml文件中会有如下的代码：

<span style="white-space:pre">		</span><feature name="Notification">
<param name="android-package" value="org.apache.cordova.dialogs.Notification" />
</feature>

此时开始重要的地方，修改我们的assets目录下的index.html文件如下：
修改body中的代码如下

<span style="white-space:pre">		</span><body>

<span style="white-space:pre">			</span><button onclick="notification();">Notifition</button>

<span style="white-space:pre">		</span></body>

然后在head标签中添加相应的notifcation函数

<span style="white-space:pre">		</span><script type="text/javascript" charset="utf-8">

<span style="white-space:pre">			</span>function notification(){
<span style="white-space:pre">			</span>navigator.notification.beep(1);
<span style="white-space:pre">			</span> }

<span style="white-space:pre">		</span></script>

然后运行程序：可以得到如下界面：

点击该按钮，哈哈声音出来了吧~_~....~_~...~_~....~_~...~_~

好了，记录到此就结束了，希望以后能慢慢记录下来这些简单的复习操作，方便以后给自己或者朋友查阅的时候使用------------再见！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 开发经验 android 经验 phonegap 移植

相关文章推荐

新的分享

章节导航