PhoneGap中文网

标题: PhoneGap入门 [打印本页]

作者: 小小智    时间: 2015-11-13 10:16
标题: PhoneGap入门
本帖最后由 小小智 于 2015-11-13 10:21 编辑

What is PhoneGap?
  PhoneGap是一个用基于HTML5的移动应用前端开发框架,能让你只使用的简单的Web技术即可获得移动设备的原生特性,如摄像头、加速器、指南针。
  PhoneGap是完全开放源代码的,你可以通过编写组件,实现任何原生设备特性的扩展。之后还可以通过PhoneGap打包APP,这样编写一次基础代码就可以将APP部署到多个移动平台上。
建立项目的步骤
  前面我们已经了解了一些PhoneGap的部分内容,那怎样来建立一个PhoneGap的项目呢,我们将在这节课程中为大家来介绍。
我们可以通过命令行来创建项目。首先建立一个文件夹,然后可以通过以下命令来建立项目。例如建立一个名为project的项目,如下代码:
  1. phonegap create project com.example.hello HelloWorld
复制代码
phonegap create:创建项目的命令; project:项目目录名称; com.example.hello:项目内部包名; HelloWorld:项目名称, 打包出的安装程序安装后显示的名称;
2.创建命令完成后,我们转到项目的目录下,然后添加phonegap插件,我们可以通过以下命令来添加:
  1. phonegap plugin add <插件名称<font color="green">|插件地址></font>
复制代码
例如,我们要在项目中添加网络的插件,可用如下命令:
  1. <font color="navy">cd</font> project
复制代码
3.PhoneGap生成android项目,我们可用以下命令:
  1. <font color="#000">phonegap</font> build android
复制代码
如果想运行到IOS系统,则可以用以下命令:
  1. <font color="#000">phonegap</font> build ios
复制代码
  经过以上三步一个PhoneGap项目就完成了,然后就可以把我们编译好的apk文件,下载到手机或模拟器来看运行效果了。
ps:本文中所讲的内容都是基于android平台。
项目
  我们就带大家来感受一下创建一个自己的phonegap程序,实现功能很简单就是点击返回按钮时,弹出“hello world”。
1.在系统中,首先转到root目录,这就是我们要创建项目的目录。如下代码:
  1. cd
复制代码
2.转到root目录后,然后就可以通过phonegap create命令来创建项目了。我们创建一个项目名为project的项目。如下代码:
  1. phonegap create project com.example.hello HelloWorld
复制代码
创建完成后的目录结构如下:
3.创建命令完成后,我们转到project目录下,然后可以去添加要用到的插件,如网络,通讯录等。如下命令:
  1. <font color="navy">cd</font> project
复制代码
  由于所创建的项目没有用到插件,所以不用添加。
4.插件添加完成以后,就可以在创建的目录中,进入www目录下,然后对index.html进行编辑,在这里面实现点击返回按钮时,弹出“hello world”,保存文件。如下代码:
  1. <script type="text/javascript" charset="utf-8">
  2.     document.addEventListener("deviceready", onDeviceReady, false);
  3.     function onDeviceReady() {
  4.         document.addEventListener("backbutton", onBackKeyDown, false);
  5.     }
  6.     // 处理后退按钮操作
  7.     function onBackKeyDown() {
  8.         alert("hello world");
  9.     }
  10. </script>
复制代码
5.在命令行中,通过如下命令,使我们的项目运行到android平台,并生成apk文件。如下代码:
  1. <font color="#000">phonegap</font> build android
复制代码
  由于我们在网络上进行编译并且是第一次,所以用时会比较长,等编译完成后,再编译就比较快了。
  好了,现在我们的第一个phonegap程序就完成了,下载到我们手机中,然后安装打开,去试一试吧。
理解事件
  事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事件,等等。对于我们操作手机也是一样,点击后退按钮、按下Home键、电池电量低等等。
  事件有系统事件和用户事件。系统事件由系统激发,如时间每隔24小时,银行储户的存款日期增加一天。用户事件由用户激发,如用户点击按钮,在文本框中显示特定的文本。事件驱动控件执行某项功能。
  触发事件的对象称为事件发送者;接收事件的对象称为事件接收者。
  在本文简单的讲解一些PhoneGap提供的一些事件的API,如deviceready、backbutton等。
deviceready
  该事件是在PhoneGap载入完成后发生的事件,相当于程序的入口。事件的注册形式为:
  1. document.addEventListener(<font color="green">"deviceready"</font>, yourCallbackFunction, <font color="navy">false</font>);
复制代码
  其中yourCallbackFunction为回调函数,我们以后要处理的操作都在这个函数里。
  通常情况下,我们希望在HTML文件的DOM加载完毕后使用document.addEventListener附加一个事件监听器。
  1. <script type="text/javascript" charset="utf-8">
  2. document.addEventListener("deviceready", onDeviceReady, false);
  3. function onDeviceReady() {
  4.     // 现在可以安全使用PhoneGap API,如后面要讲的backbutton
  5.     alert("deviceready");
  6.     }
  7. </script>
复制代码
  ps:该事件在每个PhoneGap程序中都会用到,必不可少的!
backbutton
  PhoneGap拦截返回键,这个功能是当用户按下返回键时事件触发。事件注册形式如下:
  1. document.addEventListener(<font color="green">"backbutton"</font>, yourCallbackFunction, <font color="navy">false</font>);
复制代码
  如果需要在Android系统上重载默认返回按钮的行为,可以通过注册一个事件监听器来监听“backbutton”事件。它不再需要调用任何其他方法来重载返回按钮行为,现在只需要为“backbutton”事件注册一个事件监听器。
  通常情况下,需要在接收到PhoneGap的“deviceready”事件后,使用document.addEventListener来附加该事件监听器。
  1. <script type="text/javascript" charset="utf-8">
  2. document.addEventListener("deviceready", onDeviceReady, false);
  3.     // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
  4.     function onDeviceReady() {
  5.            document.addEventListener("backbutton", onBackKeyDown, false);
  6.     }
  7.     // 处理后退按钮操作
  8.     function onBackKeyDown() {
  9.     //在这里面写我们自己的代码
  10.        }
  11. </script>
复制代码

更多的内容如其他
事件、通讯录、文件、媒体、通知等操作内容以及在线的练习可以访问: http://www.hubwiz.com/course/563180221bc20c980538e8b4/






欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2