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

上一篇博文使用PhoneGap开发基于Html5应用一:PhoneGap简介 中我介绍了如何从phonegap官网上下载源码并启动第一个应用,今天我们把phonegap的应用稍微改一下,让他实现几个比较牛叉的功能:

1.启动一个网页

2.启动摄像头

3.启动定位

老规矩,在实现这几个功能之前我们先讲一下原理性的东西:

首先我们先回顾一下上次说的,其实phonegap应用中有个特别的webview,它就是CDVViewController,关于这个类我们后面再详细描述,现在我们先了解这个类到底做了什么,它其实就是调用iOS设备的控制器类,那么他凭什么知道用户要调用摄像头之类的设备呢,那就是通过解析html的js代码。

phonegap自己定义了一些js代码,让这些JS代码跟CDVViewController这个类去交互,CDVViewController的作用就是判断服务器端的html代码,如果是普通的html就直接显示,如果碰到Phonegap自定义的JS代码就“翻译”成调用iOS内设的代码。好的,概念介绍完毕,如果大家还不懂的话,我们下面开始看例子。

如图是官方的demo应用的目录,我们只需要运行后找到软件包即可(如图,扩展名为app的意思是,它是mac系统的应用程序,但实际情况呢,它是iOS的应用,也就是说扩展名是ipa,所以可以通过iTunes来转变格式,这个就不多说了,大家知道这个意思即可)。打开后看见如下列表:

可以看见www文件夹位于应用中,下有两个文件,一个js文件,一个html

再看看xcode中Appdelegate代码:

self.viewController.wwwFolderName = @"www";
    self.viewController.startPage = @"index.html";

这两句的意思就是指明了目录名和文件名

如果改成

    self.viewController.startPage = @"http://www.baidu.com";

就可以实现加载百度首页的功能,效果如下:

很显然百度首先显示出来是没有任何问题了。

下一篇文章,将给大家解析cordova.js这个文件,因为这个js指明了所有的操作iOS设备的js代码,而且它与CDVViewController交互,所以异常重要。

使用PhoneGap开发基于Html5应用二:第一个PhoneGap应用:百度,布布扣,bubuko.com

时间: 2024-10-09 10:04:35

使用PhoneGap开发基于Html5应用二:第一个PhoneGap应用:百度的相关文章

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

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

快速开发基于 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技

Html5开发——html+css基础二(个人博客一)

今天没有写完,而且写的还有点问题,所以今天就先不上传代码了(ps:快写完了才发现布局有问题,导致代码太多,感觉写的不是很好,所以今天先分析一下布局) 第一步先写一个大的div用来放ABC三个部分,这个大的div居中! 第二步分别写ABC三个部分,ABC三个部分分别使用浮动(float)来定位.A和B都各使用了一张非常小的图片,通过重复(repeat)属性生成A和B 第三步C部分分别写好3~16这几个模块,在通过组合利用浮动定位.分组如下: E:3 F:4.7.10.13 G:5.8.11.14

基于phonegap开发app的实践

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

推荐18个基于 HTML5 Canvas 开发的图表库 - 梦想天空(山边小溪) - 博客园

推荐18个基于 HTML5 Canvas 开发的图表库 - 梦想天空(山边小溪) - 博客园 推荐18个基于 HTML5 Canvas 开发的图表库

Ambari系列(四):基于Ambari做二次开发(DIY)

前言 Ambari能够搭建.管理Hadoop集群,这是一件很酷的事情,让集群管理变的easy,但是有可能也有自己的一些需求,如果我想基于Ambari做二次开发DIY,修改一下界面,增加一些功能,添加一个模块等等,这些都是没问题,首先Ambari是基于ASF协议,其次,开发也很方便,唯一不足的是官网基于此的开发文档不多. 我主要介绍下,怎么基于Ambari做二次开发,搭建开发环境,最后编译部署打包. 开发环境搭建 在windows下安装nodejs python的编译运行环境比较复杂,主要是nod

基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用!

原文:基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用! 源代码下载地址:http://www.zuidaima.com/share/1550463575788544.htm 分页,查询功能已经全部用JS实现,无需再做此类代码编写,嵌入数据即可,真心美观好用.       

深入理解基于selenium的二次开发

对于做web端自动化测试的人来说,可能接触selenium比QTP还要多,但是我们在做基于selenium的二次开发的时候,经常会说到二次开发是为了易于维护,很多人可能不懂得维护的价值是什么,和到底要维护什么.今天专门写一篇关于二次开发的文章,希望能够帮到有需要做二次开发的人.      二次开发也就是我们常说的封装selenium,或者做框架.但是一个框架要包含丰富的类和方法.要有一套完整的体系来帮助我们进行封装.可以说框架的设计思想就是整个框架的灵魂,如果设计思想很正确也就意味着这个框架成功