PhoneGap实战
编辑推荐 《PhoneGap实战》编辑推荐:腾讯资深专家团队撰写,Adobe中国官方专家和PhoneGap中国社区联袂推荐,繁体版台湾发行! 媒体推荐 随着移动设备和移动市场的强势崛起,信息系统正在经历革命性的变化,越来越多的应用程序正从桌面平台走向移动平台,开发基于移动平台的手机App已成为当今程序开发的新热点。众所周知,移动APP的开发主要基于各移动平台的原生SDK进行。然而,作为一名普通的网页设计师、前端开发者,能否跨过原生SDK这道门槛,而使用基本的Web 技术(HTML、CSS、JavaScript)开发移动APP?PhoneGap 给予了我们肯定的答案。 PhoneGap是一个使用HTML、CSS及JavaScript来构建跨平台移动App的开源开发框架。它能让你只使用基本的Web技术即可获得移动设备的原生特性,例如摄像头、加速器、指南针等。更棒的是,PhoneGap能让你轻松地实现App的跨平台发布,你只需编写一次基础代码就能将App部署到 iOS、Android、Blackberry、Symbian、WebOS、Windows Phone、Windows8、Bada等八大移动平台上。本书全面系统地对PhoneGap做了详细的讲解,强烈推荐! ——PhoneGap中国社区 作者简介 董霙,毕业于北京电影学院,从事互动创意设计工作超过10年。2007年加盟腾讯,就职于腾讯广告产品部,任设计中心总监,负责面向客户的新媒体广告创意及产品开发支持服务,有丰富的跨平台创意开发经验。带领团队获得多项产品专利并多次赢得国内广告创意赛事大奖。 黄悦,资深Web前端开发工程师,在该领域研究近10年,实战经验丰富。目前在腾讯主要负责跨平台的广告产品前端开发与设计,此前先后担任过多媒体互动工程师、交互设计师和UI 设计师。精通 HTML、CSS、JavaScript、ActionScript 和 RIA 等前端开发技术,在通过前端技术提高产品运行效率及用户交互体验方面颇有心得,对跨平台 Web App 的开发与设计也有较深入的研究。在产品的开发与设计中崇尚敏捷开发的实践,及时响应需求、快速并高效地实现产品功能。最近两年,集中精力研究和实践CSS3、HTML 5、响应式设计及PhoneGap等前沿技术,致力于更好地开发出具有良好用户体验的桌面及移动Web产品。 李硙,资深Web前端开发工程师,有8年网站开发经验,先后供职于网易、腾讯,从事Web相关的技术工作。一直致力于HTML、JavaScript、CSS等Web相关技术的研究与实践,在HTML页面优化及用户体验的研究上有丰富的实践经验。关注新技术,对HTML5,以及各种移动设备和移动开发技术有着浓厚的兴趣,尤其是Web技术在移动领域的应用。在PhoneGap测试版发布之后,对其进行了持续且深入的学习研究,积累了丰富的实战经验。此外,还在PHP和Linux服务器的后台架构与开发方面有很深入的了解和丰富的实践经验。 祁特,资深Web前端工程师,在该领域有8年工作经验,曾经在网易等多家公司担任前端开发工程师。目前就职于腾讯北京分公司,从事Web开发相关的技术工作,有丰富的项目经验。痴迷于HTML、JavaScript、CSS、Flash等网站前端相关技术的研究与实践,并持续关注跨平台技术的发展。近期主要从事跨平台Web移动产品的快速开发,对PhoneGap技术进行了深入研究,拥有大量宝贵的项目经验。 黄珊,有超过8年的互动创意设计工作经验,2009年加盟腾讯,现任职于腾讯广告平台与产品部,担任美术指导,负责腾讯广告互动创意工作。带领的设计团队平均每年产出300多个互动创意作品,多次获得互动广告大奖,2009年获得“Adworld Awards2009年度金营销大奖——最佳全场大奖”。近期比较关注HTML5及CSS3的应用,致力于打造用户-客户-媒体三方一体的广告互动创意产品。 刘娅琦,腾讯广告平台与产品部设计师,主要负责无线客户端广告产品及响应式网站的设计与前端开发。具备丰富的大型网站UI/UE设计及前端开发经验,其作品获得2011年中国互动网络广告创意奖中的多个奖项。撰写出版了《Maya 2008 中英文命令速查手册》、《Flash CS4 完全学习手册》、《Flash CS4 高手之路》等书籍,以生动实用的案例和良好的学习体验得到了市场的积极评价和广大读者的肯定。 目录 推荐序 前言 第一篇准备篇 第1章认识PhoneGap2 1.1PhoneGap介绍2 1.1.1什么是PhoneGap2 1.1.2PhoneGap的起源2 1.1.3PhoneGap的用途3 1.1.4PhoneGap的发展现状及趋势3 1.2PhoneGap的优势与不足4 1.2.1PhoneGap相比其他框架的优势4 1.2.2PhoneGap的不足5 1.3Web开发速成6 1.3.1HTML介绍6 1.3.2CSS介绍7 1.3.3JavaScript入门10 1.4小结13 第2章安装和配置PhoneGap14 2.1下载PhoneGap14 2.2配置PhoneGap15 2.2.1配置PhoneGap到iOS15 2.2.2配置PhoneGap到Android19 2.2.3配置PhoneGap到BlackBerry31 2.2.4配置PhoneGap到webOS34 2.2.5配置PhoneGap到Symbian36 2.3小结37 第3章编写第一个PhoneGap应用—汇率计算器38 3.1汇率计算器功能概述38 3.2创建程序39 3.3配置程序界面40 3.3.1引入相关文件40 3.3.2制作程序界面40 3.4给程序添加功能逻辑46 3.5在模拟器中测试程序51 3.6在手机上测试程序52 3.6.1生成iPhone应用52 3.6.2生成Android应用53 3.7小结53 第二篇基础篇 第4章PhoneGapAPI详解56 4.1PhoneGapAPI简介56 4.2使用PhoneGapAPI前的准备57 4.3本地事件处理57 4.3.1deviceready57 4.3.2pause58 4.3.3resume59 4.3.4online60 4.3.5offline61 4.3.6backbutton61 4.3.7batterycritical62 4.3.8batterylow63 4.3.9batterystatus64 4.3.10menubutton65 4.3.11searchbutton66 4.3.12startcallbutton67 4.3.13endcallbutton68 4.3.14volumedownbutton69 4.3.15volumeupbutton69 4.4加速计传感器70 4.4.1获取加速计传感器的坐标位置70 4.4.2周期性获取加速计传感器的坐标位置71 4.4.3停止监视加速计传感器的坐标位置73 4.5使用设备摄像头74 4.6多媒体采集77 4.6.1使用capture对象录制视频77 4.6.2使用capture对象获取图片79 4.6.3使用capture对象录制语音80 4.7侦测设备屏幕朝向—指南针82 4.7.1获取指南针当前朝向82 4.7.2在固定的时间间隔获取设备朝向的角度83 4.7.3停止WatchID参数指定的指南针监听84 4.7.4当指南针改变度数时获取朝向度数86 4.7.5停止watchID参数指定的指南针朝向度数的监听87 4.8获取网络连接状态88 4.9访问手机通讯录89 4.9.1创建一个新的联系人89 4.9.2查询联系人90 4.9.3处理联系人信息91 4.10获取设备信息93 4.10.1获得设备的型号名称94 4.10.2获取设备上正在运行的PhoneGap版本信息94 4.10.3获得设备使用的操作系统名称95 4.10.4获得设备的全球唯一标识95 4.10.5获得操作系统的版本号95 4.11文件系统处理96 4.11.1File96 4.11.2FileReader96 4.11.3FileWriter99 4.11.4FileSystem102 4.11.5FileEntry103 4.11.6DirectoryEntry106 4.11.7DirectoryReader111 4.11.8FileTransfer112 4.12使用设备传感器的GPS地理位置服务115 4.12.1获得当前地理位置115 4.12.2监测设备的位置变化116 4.12.3停止监听设备的位置变化117 4.13播放和录制音频118 4.13.1获得音频文件的当前位置118 4.13.2获得音频文件总时长120 4.13.3开始或者继续播放音频文件121 4.13.4暂停播放音频文件123 4.13.5释放音频资源124 4.13.6停止播放音频文件125 4.13.7在音频文件中跳到指定位置127 4.13.8启动录制音频文件127 4.13.9停止录制音频文件129 4.14消息提示130 4.14.1警告框130 4.14.2确认框131 4.14.3蜂鸣132 4.14.4振动133 4.15客户端数据存储134 4.15.1openDatabase134 4.15.2Database135 4.15.3SQLTransaction137 4.15.4SQLResultSet138 4.15.5SQLResultSetList140 4.15.6SQLError142 4.15.7localStorage142 4.16小结143 第三篇实战篇 第5章“指南针”应用程序146 5.1指南针应用简介及功能概述146 5.2利用PhoneGap创建指南针应用程序146 5.2.1主流平台指南针应用程序介绍146 5.2.2创建PhoneGap指南针程序147 5.2.3指南针程序UI界面150 5.2.4程序代码及逻辑讲解150 5.2.5导出应用程序155 5.2.6在手机上测试应用程序158 5.3小结159 第6章“万圣节更衣室”应用程序160 6.1设置项目160 6.2配置程序界面161 6.2.1程序界面介绍161 6.2.2程序界面分辨率说明162 6.2.3程序界面图片素材配置163 6.3界面HTML与CSS编写163 6.3.1基础代码163 6.3.2开始页164 6.3.3文本输入页166 6.3.4摇晃监测页167 6.3.5结果页169 6.3.6HTML与CSS最终代码170 6.4程序编写172 6.4.1界面切换功能172 6.4.2文本输入页功能175 6.4.3摇晃监测页功能177 6.4.4结果页功能184 6.4.5退出程序功能188 6.4.6最终代码189 6.5打包与测试193 6.5.1打包生成APK文件193 6.5.2测试运行195 6.6小结196 第四篇提高篇 第7章发布应用程序198 7.1将程序提交到AppStore198 7.1.1向Apple注册198 7.1.2准备应用程序的发行版本207 7.1.3提交App218 7.2将Android应用程序提交到移动应用程序市场222 7.2.1注册成为开发者222 7.2.2提交App225 7.3小结225 第8章移动应用的产品设计226 8.1Android和iPhone的产品设计差异226 8.1.1功能定义阶段226 8.1.2构架交互阶段227 8.1.3改进细化阶段229 8.1.4输出产品阶段230 8.2统一化与差异化231 8.2.1视觉风格的统一231 8.2.2交互设计的差异化232 8.3交互体验的重要性234 8.3.1什么是交互设计234 8.3.2交互设计的重要性234 8.3.3如何进行交互设计237 8.4Web App与原生App239 8.4.1Web App和原生App的对比239 8.4.2如何选择WebApp和原生App240 8.5利用HTML5和JavaScript编写交互动画241 8.5.1利用Adobe Edge创建一个新的项目241 8.5.2创建带缓动的渐入HTML动画243 8.5.3创建循环动画效果245 8.5.4创建按钮完成应用界面的跳转246 8.5.5导出HTML动画247 8.6小结249 第9章PhoneGap与jQuery Mobile的结合使用250 9.1jQuery简介250 9.2了解jQuery Mobile252 9.3使用jQuery Mobile252 9.4PhoneGap与jQuery Mobile255 9.5小结255 第10章Phone Gap的插件256 10.1如何使用PhoneGap插件256 10.2小结260 序言 前言 智能移动设备是一种全新的媒介,自从2007年第一台iPhone正式出售以后,这个世界就像是被注入了某种催化剂,不过短短几年我们的生活几乎已经无法离开这些精致的产品了。无论操作系统是iOS、Android,还是Windows Phone,都说明一点:我们已经进入了一个智能移动设备和移动互联网爆炸式增长的时期。 和很多人一样,当我拿到iPhone手机后,对其丰富的应用非常着迷,这些个性化的应用和游戏让我可以随时随地获取资讯、娱乐,甚至还可以在旅行途中轻松地处理工作事务。在度过短暂的“狂热”期后,我非常希望这些排列精致的图标后有一个应用可以完全属于我。于是,我收集了大量的开发资料并着手学习Objective-C,但非常遗憾的是,我发现学习Objective-C并不是件容易的事。虽然它和C语言一样的优雅,但是对于一个习惯了脚本语言的设计师来说还是不太容易适应。很快我发现了一个“取巧”的办法,即通过UIWebView类访问网络或是本地的网页文件,这使我可以利用更为熟练的技术开发iOS终端上的应用。不过如果想要通过JavaScript脚本调用iPhone手机上各种先进的传感器及其他硬件接口,依然不是件容易的事。 随着Android操作系统的快速崛起,移动终端的操作系统开始出现分化,高举免费大旗的Android系统很快完成了从“新人”到“元老”的角色转变,大有和iOS一争高下的气势。更多的占有率就意味着更大的市场,如何把iOS程序转移到Android平台成为一个不可回避的问题。重新学习Java固然是最佳选择,但对于一个设计师来说,同时学习两种风格完全不同的编程语言绝对会是一个痛苦的过程。很快WebView再一次成为学习的“捷径”,从本质上来说,不论是Android还是iOS程序,其WebView类的功能都可以看做是用来访问网络的一个内置“浏览器”,通过它可以打开一个由HTML、CSS、JavaScript、PHP“构筑”的Web应用程序。 前景看起来变得非常美好,我们只需要开发一套Web应用程序就可以使用WebView实现iOS和Android两个版本的应用程序的发布,但现实是残酷的,WebView只能解决一些基本的问题,想要实现一个完美的应用还需要让Web程序也可以控制移动设备上独特的硬件功能(如加速器、振动感知、指南针、照相机、推送提醒等),似乎要实现这个目标还是得深入地学习两门程序开发语言,大量的硬件接口调用依然是开发过程中面临的坚冰。 幸运的是,一个优秀的开源开发工具的诞生改变了这个尴尬的状况,这个工具就是本书的“主角”—PhoneGap。PhoneGap是一个可以统一连接Web应用程序和移动终端硬件的桥梁,因为它不仅为每个主流的智能移动终端操作系统(iOS、Android、Windows Phone等)构建了原生的程序项目模板,还为其提取出了相应操作硬件接口的API。这意味着我们通过PhoneGap构建的应用程序只需要使用一段JavaScript代码即可拥有足够的权限访问移动设备特有的硬件功能。随着个人信息终端由PC向移动设备的转移,这个时代也为开发者提供了新的获得成功的机会。如今,借助PhoneGap,广大的前端开发者和设计师可以开发出更多、更好的移动应用程序。 本书写给谁 本书适合以下读者阅读: Web网站设计师及移动应用产品的设计人员。 移动应用开发的爱好者和初级开发者。 Web前端开发工程师。 负责移动应用项目开发的产品经理。 如何阅读本书 本书分为四大部分: 第一部分为准备篇,简单地介绍了PhoneGap的基本概念及相关知识,并向读者展示了PhoneGap的用途及优势,同时对Web开发技术进行了入门介绍。然后向读者讲述了PhoneGap的安装和配置过程,最后将学习到的基础知识运用于实践中,开发出第一个移动应用—“汇率计算器”。 第二部分为基础篇,全面讲解了PhoneGap API 的功能及使用方法,并附上了具体的实例,从而帮助读者查阅与使用PhoneGap API。 第三部分为实战篇,通过开发“指南针”应用和“万圣节更衣室”应用,让读者了解如何利用PhoneGap API 结合Web 技术开发一个完整的移动应用。 第四部分为提高篇,首先向读者介绍了如何发布应用程序以及在设计移动应用产品的时候需要注意的事项并提供了一些设计上的建议,然后简单介绍了jQuery Mobile 和 Sencha Touch 框架如何与PhoneGap结合使用,最后讲述了如何使用PhoneGap 的插件。 如果你是一名经验丰富的资深用户,之前已经熟悉了PhoneGap及Web开发技术的相关基础知识,那么你可以直接阅读本书第三部分的内容,这部分以接近实战的案例来讲解如何使用PhoneGap开发移动应用,相比于前两部分更独立。但如果你还是一名初学者,建议从第一部分准备篇开始学习。