使用PhoneGap开发基于Html5应用一:PhoneGap简介

兄弟们,我胡汉三又回来啦!

1.何为PhoneGap

之前我的一个客户有这么一个要求:开发一款移动应用,但不需要做成本地应用,而是做成一个类似网页一样的应用。这样我们只需要在浏览器里访问他们公司的这个应用的网页就可以实现本地化应用的基本功能。但有个问题是,出于安全考虑,android,iOS都没有提供通过浏览器调用手机设备中的摄像头,GPS定位等设备的接口(iOS提供了部分)。为了实现这个功能,PhoneGap是个超级可爱的东东就产生了。

如果亲爱的你曾经做过iOS或者Android开发的话应该知道,这两个系统都提供WebView这样的视图类,你可以理解TA就是简单的一个浏览器。而phonegap就是一个复杂的基于WebView的浏览器。这下大家知道了吧。

2.何为Html5

曾经有人做过这样的预言:以后大家的电脑上不会有软件的概念,而是开机后,电脑启动一个浏览器,然后这个“无所不能”的浏览器可以输入百度网站找内容,可以输入游戏网站,直接玩游戏,可以打开电脑的摄像头来实现拍照,可以实现。。。。。反正,这个浏览器就是个无所不能的东东。

但是稍微有点Html编程基础的朋友都知道,html预定义的标签很有限,连看视频都是通过加入插件“Adobe Flash”实现的,可以说传统的html是如此的渣渣。但是Html5的出现就彻底改变了这种情况,它可以自定义标签,也就是说,我们可以自己写个标签,这个标签的功能可以我们自己定,实现拍照等功能自然不在话下。是不是感觉很炫,想想是不是有点小鸡冻!!!!

3.开启我们的第一个PhoneGap程序

前面说了这么多大家可能还是有点迷糊,下面我们开始写代码就直观了,OK,Let‘s Go!

登录网站:http://phonegap.com/ (下载PhoneGap页面:http://phonegap.com/install/)

下载完后,我们开始写第一个基于PhoneGap程序吧:

1.iOS版

双击文件“CordovaTests.xcodeproj”就可以打开PhoneGap工程,可以发现里面有三个Project,如图:

这三个Project分别是:

CordovaLib:PhoneGap库文件,编译后生成静态库.a文件

CorDovaLibTest:单元测试,不多说了

CordovaLibApp,这个Project才是我们要跑的应用,我们Bulid一下这个Project

可以看到如下效果:

注:如果遇到如下错误:

Undefined symbols for architecture i386:

"_OBJC_CLASS_$_CMMotionManager", referenced from:

objc-class-ref in libCordova.a(CDVAccelerometer.o)

ld: symbol(s) not found for architecture i386

clang: error: linker command failed with exit code 1 (use -v to see invocation)

我们只需要在库文件中添加如下库即可:

于是,我们的第一个PhoneGap程序就这么愉快的跑通了。

下一篇,我将带大家继续分析这个应用

使用PhoneGap开发基于Html5应用一:PhoneGap简介

时间: 2024-08-18 23:13:40

使用PhoneGap开发基于Html5应用一:PhoneGap简介的相关文章

使用PhoneGap开发基于Html5应用二:第一个PhoneGap应用:百度

上一篇博文使用PhoneGap开发基于Html5应用一:PhoneGap简介 中我介绍了如何从phonegap官网上下载源码并启动第一个应用,今天我们把phonegap的应用稍微改一下,让他实现几个比较牛叉的功能: 1.启动一个网页 2.启动摄像头 3.启动定位 老规矩,在实现这几个功能之前我们先讲一下原理性的东西: 首先我们先回顾一下上次说的,其实phonegap应用中有个特别的webview,它就是CDVViewController,关于这个类我们后面再详细描述,现在我们先了解这个类到底做了

快速开发基于 HTML5 网络拓扑图应用

采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 该例子展示了如何构建两个节点.一条连线.以及一个 Group 的组合效果.结合 <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型,以下为构建上图界面效果

ios html5 设定PhoneGap开发环境

怎么样IOS平台搭建PhoneGap开发环境(PhoneGap2.5) (2013-03-13 14:44:51) 标签: c=blog&q=it&by=tag" target="_blank">it   因为在下近期在做基于HTML5的跨平台移植,搭建好开发环境的时候着实费了不少劲.如今空暇下来顺便整理一下,给大家分享. 首先介绍一下PhoneGap. PhoneGap是一款基于HTML5标准的跨平台开源手机Web应用开发框架. 它同意用户通过Web技

基于phonegap开发app的实践

app开发告一段落,期间遇到不少问题,写篇文章记录一下. 为虾米要用phonegap 开发app,至少要考虑android和ios两个版本吧,android偶可以应付,ios表示完全木有接触过,于是时间成本.开发成本上去了.phonegap则解决了这个问题,而且对po主而言,用web开发的方式来搞app很爽啊有木有! 当然,用之前还是要调研下,基于phonegap的app有木有成功案例.大公司里腾讯的qq邮箱ios版,豆瓣的豆瓣音乐人都是基于phonegap.重点看了看豆瓣音乐人,很无耻的反编译

安装配置PhoneGap开发环境(一)

1 安装JDK 略. 2 安装Eclipse并安装ADT插件 Android的官网提供集成了Android插件的Eclipse开发环境. 眼下訪问不了,尝试百度一下其他资源. 3 安装Android SDK最新版本号 眼下最新版本号为API 22. 4 安装Node.js 到Node.js官网下载并安装Node.js. 5 安装PhoneGap.Cordoba Node.js成功安装后,将其路径配入Path环境变量.以方便命令行使用.在命令行中输入: npm install -g phonega

[PhoneGap]开发环境搭建与简单应用

目前,随着Google的Android手机和苹果的iphone手机的逐渐普及,越来越多开发者加入到移动应用开发的大军当中.其中,Android应用是基于Java语言基础上进行开发的,而苹果公司的iphone则是基于C语言开发的.如果开发者编写的应用需要同时在不同的移动设备上运行的话,则必须要掌握多种开发语言.而为了进一步简化移动应用的编程,Nitobi公司推出了一套开源的移动应用解决方案PhoneGap(http://www.phonegap.com). PhoneGap是一款开源的手机应用开发

十分钟开发一个调用Activity的PhoneGap插件

在HybridApp开发中,非常多业务我们是没有办法通过HTML5+js实现的,比方调用第三方的包括Activity的jar包,一些必须使用原生代码才干实现的功能,比方复杂的UI的效果,调用通讯相关的协议栈,第三方支付sdk等.这样的情况我们须要通过写cordova插件的方式,包装android原生代码为插件,供上层javascript调用.本文解说一个调用Activity并返回Activity结果的cordova插件样例,帮助大家掌握cordova plugin的开发 . Cordova插件是

html5+ plus和phoneGap、cordova的比较

偶遇大神言论,摘录 phonegap出的早,自然用的人多.phonegap自己的定位是混合开发hybrid,用原生+js:HBuilder的定位是纯js搞定一切.5+ 和 phonegap在能力.性能.开发便利性上都优于phonegap. 先看能力: 5+ 有HTML5+和Native.js技术,HTML5+包含常用的跨平台的几百个API,能满足常规开发需求,而Native.js把40w原生api映射成js对象,这样js可以直接调原生.HTML5+和Native.js的组合形成了最强大的能力引擎

安装配置PhoneGap开发环境

1 安装JDK 略. 2 安装Eclipse并安装ADT插件 Android的官网提供集成了Android插件的Eclipse开发环境.目前访问不了,尝试百度一下其它资源. 3 安装Android SDK最新版本 目前最新版本为API 22. 4 安装Node.js 到Node.js官网下载并安装Node.js. 5 安装PhoneGap.Cordoba Node.js安装成功后,将其路径配入Path环境变量,以方便命令行使用.在命令行中输入: npm install -g phonegap 安