phonegap入门实战

What is PhoneGap?

  PhoneGap是一个用基于HTML5的移动应用前端开发框架,使用HTML+CSS+JavaScript,再通过PhoneGap就可以快速创建APP了。

  PhoneGap能让你只使用的简单的Web技术即可获得移动设备的原生特性,如摄像头、加速器、指南针。

  PhoneGap是完全开放源代码的,你可以通过编写组件,实现任何原生设备特性的扩展。之后还可以通过PhoneGap打包APP,这样编写一次基础代码就可以将APP部署到多个移动平台上。

优缺点

PnoneGap的优点

1.跨平台

  PhoneGap目前支持的移动平台有: Android, iOS, Windows Phone、 Windows 8、 Firefox OS、 Amazon Fire OS、 BlackBerry 10、 Ubuntu、Tizen。(还有谁比我牛呢!)

2.性价比高,开发难度低

  只要会HTML+CSS+JS,你就能开发在多达8个移动平台上运行的App, 还有比这更具性价比的技术吗?

  相信会HTML的前端的开发人员,应该是比任何其它一种开发语言的人要多得多吧。不过服务器端开发,还是要掌握一门其它语言像PHP、Java、.net、Ruby还是Python,这个就没有限制了。但是,兼容性越强的技术,成本越低,性能越差;兼容性越差的技术,成本越高,性能越好。

PhoneGap的不足

1.运行效率

  PhoneGap的运行,依赖于移动设备上的内置浏览器的Webkit, 所以运行速度上自然是比原生的App慢。

2.不能支持全部的系统API

  由于要支持多平台, 所以如果一些平台上独有的API, 在PhoneGap上就有可能不能得到及时的支持。

建立项目的步骤

  前面我们已经了解了一些PhoneGap的部分内容,那怎样来建立一个PhoneGap的项目呢,我们将在这节课程中为大家来介绍。

我们可以通过命令行来创建项目。首先建立一个文件夹,然后可以通过以下命令来建立项目。例如建立一个名为project的项目,如下代码:

phonegap create project com.example.hello HelloWorld

phonegap create:创建项目的命令; project:项目目录名称; com.example.hello:项目内部包名; HelloWorld:项目名称, 打包出的安装程序安装后显示的名称;

2.创建命令完成后,我们转到项目的目录下,然后添加phonegap插件,我们可以通过以下命令来添加:

phonegap plugin add <插件名称|插件地址>

例如,我们要在项目中添加网络的插件,可用如下命令:

cd project
phonegap plugin add cordova-plugin-network-information

3.PhoneGap生成android项目,我们可用以下命令:

phonegap build android

如果想运行到IOS系统,则可以用以下命令:

phonegap build ios

  经过以上三步一个PhoneGap项目就完成了,然后就可以把我们编译好的apk文件,下载到手机或模拟器来看运行效果了。

ps:本文中所讲的内容都是基于android平台。

项目

  我们就带大家来感受一下创建一个自己的phonegap程序,实现功能很简单就是点击返回按钮时,弹出“hello world”。

1.在系统中,首先转到root目录,这就是我们要创建项目的目录。如下代码:

cd /
cd root

2.转到root目录后,然后就可以通过phonegap create命令来创建项目了。我们创建一个项目名为project的项目。如下代码:

phonegap create project com.example.hello HelloWorld

创建完成后的目录结构如下:

3.创建命令完成后,我们转到project目录下,然后可以去添加要用到的插件,如网络,通讯录等。如下命令:

cd project
phonegap plugin add cordova-plugin-network-information 
phonegap plugin add cordova-plugin-contacts 

  由于所创建的项目没有用到插件,所以不用添加。

4.插件添加完成以后,就可以在创建的目录中,进入www目录下,然后对index.html进行编辑,在这里面实现点击返回按钮时,弹出“hello world”,保存文件。如下代码:

<script type="text/javascript" charset="utf-8">
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // 处理后退按钮操作
    function onBackKeyDown() {
        alert("hello world");
    }
</script>

5.在命令行中,通过如下命令,使我们的项目运行到android平台,并生成apk文件。如下代码:

phonegap build android

  由于我们在网络上进行编译并且是第一次,所以用时会比较长,等编译完成后,再编译就比较快了。

  好了,现在我们的第一个phonegap程序就完成了,下载到我们手机中,然后安装打开,去试一试吧。

理解事件

  事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事件,等等。对于我们操作手机也是一样,点击后退按钮、按下Home键、电池电量低等等。

  事件有系统事件和用户事件。系统事件由系统激发,如时间每隔24小时,银行储户的存款日期增加一天。用户事件由用户激发,如用户点击按钮,在文本框中显示特定的文本。事件驱动控件执行某项功能。

  触发事件的对象称为事件发送者;接收事件的对象称为事件接收者。

  在本问将简单的讲解一些PhoneGap提供的一些事件的API,如deviceready、backbutton、menubutton等。

deviceready

  该事件是在PhoneGap载入完成后发生的事件,相当于程序的入口。事件的注册形式为:

document.addEventListener("deviceready", yourCallbackFunction, false);

  其中yourCallbackFunction为回调函数,我们以后要处理的操作都在这个函数里。

  通常情况下,我们希望在HTML文件的DOM加载完毕后使用document.addEventListener附加一个事件监听器。

<script type="text/javascript" charset="utf-8">
    // 当PhoneGap加载完毕后调用onDeviceReady回调函数
    // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。
    // 当PhoneGap加载完毕并开始和本地设备进行通讯,
    // 就会触发“deviceready”事件。
    document.addEventListener("deviceready", onDeviceReady, false);
    // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法
    function onDeviceReady() {
    // 现在可以安全使用PhoneGap API,如后面要讲的backbutton
    alert("deviceready");
    }
</script>

  ps:该事件在每个PhoneGap程序中都会用到,必不可少的!

backbutton

  PhoneGap拦截返回键,这个功能是当用户按下返回键时事件触发。事件注册形式如下:

document.addEventListener("backbutton", yourCallbackFunction, false);

  如果需要在Android系统上重载默认返回按钮的行为,可以通过注册一个事件监听器来监听“backbutton”事件。它不再需要调用任何其他方法来重载返回按钮行为,现在只需要为“backbutton”事件注册一个事件监听器。

  通常情况下,需要在接收到PhoneGap的“deviceready”事件后,使用document.addEventListener来附加该事件监听器。

<script type="text/javascript" charset="utf-8">
    // 当PhoneGap加载完毕后调用onDeviceReady回调函数 
    // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。
    // 当PhoneGap加载完毕并开始和本地设备进行通讯,
    // 会触发“deviceready”事件
    document.addEventListener("deviceready", onDeviceReady, false);
    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    function onDeviceReady() {
    // 注册回退按钮事件监听器
           document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // 处理后退按钮操作
    function onBackKeyDown() {
    //在这里面写我们自己的代码
       }
</script>

menubutton

  PhoneGap拦截菜单键,这个功能是当用户按下菜单键时事件触发。事件注册形式如下:

document.addEventListener("menubutton", yourCallbackFunction, false);

  如果你需要在Android系统上重载默认菜单按钮的行为,可以通过注册一个事件监听器来监听“menubutton”事件。通常情况下,你需要在接受到PhoneGap的“deviceready”事件后,使用document.addEventListener来附加该事件监听器。

<script type="text/javascript" charset="utf-8"> 
    // 当PhoneGap加载完毕后调用onDeviceReady回调函数
    // 此时,该文件已加载完毕但phonegap.js还没有加载完毕。
    // 当PhoneGap加载完毕并开始和本地设备进行通讯,
    // 会触发“deviceready”事件
    document.addEventListener("deviceready", onDeviceReady, false);
    // PhoneGap加载完毕,现在可以安全地调用PhoneGap方法
    function onDeviceReady() { 
    // 注册菜单按钮事件监听器
        document.addEventListener("menubutton", onMenuKeyDown, false); 
    } 
    // 处理菜单按钮操作
    function onMenuKeyDown() { 
    //在这里面写我们自己的代码
    } 
</script>   

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程直播室

Ionic 2 项目结构./src/index.html./src/./src/app/app.html

57530
来自专栏向治洪

React native开发中常见的错误

react native环境搭建请移步:react native环境搭建 这里说说react native创建完成之后,运行中出现的常见问题, 问题1: jav...

34360
来自专栏mukekeheart的iOS之旅

iOS项目——项目开发环境搭建

  在开发项目之前,我们需要做一些准备工作,了解iOS扩展——Objective-C开发编程规范是进行开发的必备基础,学习iOS学习——Xcode9上传项目到G...

456150
来自专栏Puppeteer学习

一步一步学习Vue(十)

24440
来自专栏偏前端工程师的驿站

打造高效前端工作环境 - tmux

打造高效前端工作环境 - tmux 前言  现在前端开发可不容易啊,先打开个VIM,然后再打开个lite-server,一不小心写个ES2015还要打开个gul...

28860
来自专栏美丽应用

给安卓Chrome加入主页按钮

1K20
来自专栏LIN_ZONE

谷歌断点调试(转载)

简单地说,断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,...

16140
来自专栏优启梦

PHP使用curl取HTTP状态码

34990
来自专栏雨尘分享

SDWebImage 引发的 cell不断下拉引起的闪退 卡顿

22520
来自专栏向治洪

React Native项目组织结构介绍

代码组织: 目录结构: . ├── components //组成应用的各个组件 │   ├── Routers.android.js //每个组...

30570

扫码关注云+社区

领取腾讯云代金券