昨天复习了一下以前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:
b:
按照以上的步骤导入项目后得到两个项目如下:
此时导入完成后,会发现在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 οnclick="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>
然后运行程序:可以得到如下界面:
点击该按钮,哈哈声音出来了吧~_~....~_~...~_~....~_~...~_~
好了,记录到此就结束了,希望以后能慢慢记录下来这些简单的复习操作,方便以后给自己或者朋友查阅的时候使用------------再见!