微众生活基于phonegap的跨平台LBS移动应用开发与实现毕业设计.docx

微众生活基于phonegap的跨平台LBS移动应用开发与实现毕业设计.docx

《微众生活基于phonegap的跨平台LBS移动应用开发与实现毕业设计.docx》由会员分享，可在线阅读，更多相关《微众生活基于phonegap的跨平台LBS移动应用开发与实现毕业设计.docx（42页珍藏版）》请在冰豆网上搜索。

微众生活基于phonegap的跨平台LBS移动应用开发与实现毕业设计

毕业设计

中文题目

微众生活：

基于phonegap的跨平台LBS

移动应用开发与实现

英文题目

DevelopmentandImplementationofCross-

platformLBSMobileApplicationNamed

VLifeBasedonPhonegap

毕业设计（论文）原创性声明和使用授权说明

原创性声明

本人郑重承诺：

所呈交的毕业设计（论文），是我个人在指导教师的指导下进行的研究工作及取得的成果。

尽我所知，除文中特别加以标注和致谢的地方外，不包含其他人或组织已经发表或公布过的研究成果，也不包含我为获得及其它教育机构的学位或学历而使用过的材料。

对本研究提供过帮助和做出过贡献的个人或集体，均已在文中作了明确的说明并表示了谢意。

作者签名：

　　　　　日　期：

指导教师签名：

　　　　　日　　期：

使用授权说明

本人完全了解大学关于收集、保存、使用毕业设计（论文）的规定，即：

按照学校要求提交毕业设计（论文）的印刷本和电子版本；学校有权保存毕业设计（论文）的印刷本和电子版，并提供目录检索与阅览服务；学校可以采用影印、缩印、数字化或其它复制手段保存论文；在不以赢利为目的前提下，学校可以公布论文的部分或全部内容。

作者签名：

　　　　　日　期：

学位论文原创性声明

本人郑重声明：

所呈交的论文是本人在导师的指导下独立进行研究所取得的研究成果。

除了文中特别加以标注引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写的成果作品。

对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。

本人完全意识到本声明的法律后果由本人承担。

作者签名：

日期：

年月日

学位论文版权使用授权书

本学位论文作者完全了解学校有关保留、使用学位论文的规定，同意学校保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。

本人授权　　　　大学可以将本学位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。

涉密论文按学校规定处理。

作者签名：

日期：

年月日

导师签名：

日期：

年月日

注意事项

1.设计（论文）的内容包括：

1）封面（按教务处制定的标准封面格式制作）

2）原创性声明

3）中文摘要（300字左右）、关键词

4）外文摘要、关键词

5）目次页（附件不统一编入）

6）论文主体部分：

引言（或绪论）、正文、结论

7）参考文献

8）致谢

9）附录（对论文支持必要时）

2.论文字数要求：

理工类设计（论文）正文字数不少于1万字（不包括图纸、程序清单等），文科类论文正文字数不少于1.2万字。

3.附件包括：

任务书、开题报告、外文译文、译文原文（复印件）。

4.文字、图表要求：

1）文字通顺，语言流畅，书写字迹工整，打印字体及大小符合要求，无错别字，不准请他人代写

2）工程设计类题目的图纸，要求部分用尺规绘制，部分用计算机绘制，所有图纸应符合国家技术标准规范。

图表整洁，布局合理，文字注释必须使用工程字书写，不准用徒手画

3）毕业论文须用A4单面打印，论文50页以上的双面打印

4）图表应绘制于无格子的页面上

5）软件工程类课题应有程序清单，并提供电子文档

5.装订顺序

1）设计（论文）

2）附件：

按照任务书、开题报告、外文译文、译文原文（复印件）次序装订

指导教师评阅书

指导教师评价：

一、撰写（设计）过程

1、学生在论文（设计）过程中的治学态度、工作精神

□优□良□中□及格□不及格

2、学生掌握专业知识、技能的扎实程度

□优□良□中□及格□不及格

3、学生综合运用所学知识和专业技能分析和解决问题的能力

□优□良□中□及格□不及格

4、研究方法的科学性；技术线路的可行性；设计方案的合理性

□优□良□中□及格□不及格

5、完成毕业论文（设计）期间的出勤情况

□优□良□中□及格□不及格

二、论文（设计）质量

1、论文（设计）的整体结构是否符合撰写规范？

□优□良□中□及格□不及格

2、是否完成指定的论文（设计）任务（包括装订及附件）？

□优□良□中□及格□不及格

三、论文（设计）水平

1、论文（设计）的理论意义或对解决实际问题的指导意义

□优□良□中□及格□不及格

2、论文的观念是否有新意？

设计是否有创意？

□优□良□中□及格□不及格

3、论文（设计说明书）所体现的整体水平

□优□良□中□及格□不及格

建议成绩：

□优□良□中□及格□不及格

（在所选等级前的□内画“√”）

指导教师：

（签名）单位：

（盖章）

年月日

评阅教师评阅书

评阅教师评价：

一、论文（设计）质量

1、论文（设计）的整体结构是否符合撰写规范？

□优□良□中□及格□不及格

2、是否完成指定的论文（设计）任务（包括装订及附件）？

□优□良□中□及格□不及格

二、论文（设计）水平

1、论文（设计）的理论意义或对解决实际问题的指导意义

□优□良□中□及格□不及格

2、论文的观念是否有新意？

设计是否有创意？

□优□良□中□及格□不及格

3、论文（设计说明书）所体现的整体水平

□优□良□中□及格□不及格

建议成绩：

□优□良□中□及格□不及格

（在所选等级前的□内画“√”）

评阅教师：

（签名）单位：

（盖章）

年月日

教研室（或答辩小组）及教学系意见

教研室（或答辩小组）评价：

一、答辩过程

1、毕业论文（设计）的基本要点和见解的叙述情况

□优□良□中□及格□不及格

2、对答辩问题的反应、理解、表达情况

□优□良□中□及格□不及格

3、学生答辩过程中的精神状态

□优□良□中□及格□不及格

二、论文（设计）质量

1、论文（设计）的整体结构是否符合撰写规范？

□优□良□中□及格□不及格

2、是否完成指定的论文（设计）任务（包括装订及附件）？

□优□良□中□及格□不及格

三、论文（设计）水平

1、论文（设计）的理论意义或对解决实际问题的指导意义

□优□良□中□及格□不及格

2、论文的观念是否有新意？

设计是否有创意？

□优□良□中□及格□不及格

3、论文（设计说明书）所体现的整体水平

□优□良□中□及格□不及格

评定成绩：

□优□良□中□及格□不及格

教研室主任（或答辩小组组长）：

（签名）

年月日

教学系意见：

系主任：

（签名）

年月日

微众生活：

基于phonegap的跨平台LBS移动应用开发与实现

[摘要]目前流行的移动操作系统种类较多，为了使移动应用能够覆盖更多用户群体，需要针对各个操作平台分别开发软件，不可避免地导致高成本的开发、运营与维护。

跨平台移动应用开发技术能够有效解决这方面的问题。

本文基于HTML5、phonegap等跨平台移动开发技术，结合jQuerymobile和XX地图API等Javascript框架，设计开发“微众生活”手机应用。

该应用主要为用户提供周边生活服务搜索、公共交通与自驾路线查询等功能。

本文还对多种跨平台开发技术进行对比分析，总结这些技术的优缺点，并记录应用开发过程中的技术难点，以期对今后的应用开发提供借鉴。

[关键词]HTML5；phonegap；移动应用；跨平台；移动商务

DevelopmentandImplementationofCross-platformLBS

MobileApplicationNamedVLifeBasedonPhonegap

Abstract：

Therearemanykindsofpopularoperatingsystematpresent,sotheenterpriseshavetodevelopseveralversionsofoneapplicationforallplatformstocovermorecustomers,whichinevitablyissuesinhighercostofdevelopment,operationandmaintenance.Cross-platformmobileapplicationdevelopmentisagoodconsiderationfortheseproblems.InthisresearchwedesignanddevelopamobileapplicationnamedVlifebasedoncross-platformmobiledevelopmenttechnologieslikeHTML5andphonegapcombiningwithjQuerymobileandBaiduMapJavascriptframework.Thisapplicationmainlyprovideslocalservicesearch,publictransitinquiryanddrivingrouteshowfunction.Also,wemakesomeanalysesandcomparisonsoftheabovementionedtechnologies,andsummarizetheadvantagesandshortagesoftheminthispaper.Ireallywishedthatthedifficultpointrecordedcanbeofsomeuseforreferencetothelatestresearches.

Keywords：

HTML5;Phonegap;mobileapplication;cross-platform;M-Commerce

一、研究背景及意义

（一）研究背景

艾瑞咨询统计数据显示，2013年第三季度中国移动购物市场交易规模达433.4亿元，同比增速141.9%，环比增速15.5%，高于同期网络购物市场整体增速。

移动商务的高速发展，很大程度上得益于近年来智能移动终端数量的迅速增长。

移动终端的便携性和随时随地的移动网络接入能力使得人们能够充分利用零碎时间进行网购。

而大部分移动网络购物行为都是通过移动应用进行的，移动应用成为开展移动商务的重要媒体，越来越多的企业投入移动APP的运营。

由于移动终端设备的差异性，运行于不同移动操作系统上的应用相互之间无法通用。

企业如果希望覆盖更多的用户群体，并且保证同一款应用在不同操作系统上的用户体验一致，就必须针对各个平台分别开发一套软件，这必然导致开发成本过高、周期太长等问题，后期维护也十分麻烦。

对于移动开发人员来说，如果要学习不同操作平台的软件开发，必须分别学习各平台的原生开发语言，比如安卓开发需要学习Java，iOS应用开发需要学习ObjectiveC，WindowsPhone应用的开发更要学习XAML、LINQ，以及C#或VB，学习成本较高。

对于研发来说造成经济及时间的浪费，降低了开发效率。

这种状况不仅跟互联网的开放理念相背离，也对应用开发商造成了现实的困扰[1]。

（二）研究意义

跨平台移动应用开发技术是前述问题较为有效的解决方案。

跨平台应用只需开发一次，就可以在多种移动操作系统上使用，有效降低了开发成本，其应用前景十分广阔。

XX、淘宝、街旁和国外的维基百科、DailyCost等应用都采用过此技术。

但此技术目前尚未成熟，仍存在许多缺陷。

本文结合“微众生活”手机项目的开发过程，对跨平台开发技术存在的问题进行一定的总结，并提出相应的建议，为跨平台开发技术的发展进行有益的实践。

二、相关技术体系

（一）跨平台移动应用

跨平台移动应用主要可以分为两大体系，即WebApp和HybridApp。

1.WebApp

WebApp使用HTML、CSS和Javascript开发，用户通过浏览器访问的方式直接打开应用，其实质就是一个专为移动端设计的网站。

WebApp的维护非常容易，无需像原生应用那样重新发布安装包，而是直接更新云端服务器上的文件来更新应用。

但其缺点也十分明显，由于网页对本地硬件设备的调用能力极其微弱，无法使用摄像头、重力感应之类的硬件功能，使得WebApp无法满足很多需求。

2.HybridApp

HybridApp（混合应用程序）介于WebApp与NativeApp（原生应用）两者之间。

混合移动应用开发与Web应用不同的是，无需启动浏览器来使用应用，会有启动应用的图标，以及通过JavascriptAPIs尽一切所能地访问特定平台的本地功能[2]。

开发者可以使用熟悉的语言，如WEB语言进行开发，无需学习一门新的语言。

不同操作系统的底层功能被封装为统一的Javascript接口进行调用。

开发者将应用编写为WEB文件并通过跨平台开发工具打包生成各平台的NativeApp，实现“Writeonce,runanywhere”。

严格地讲，HybridApp的实质还是一个WebApp，但已经能够调用底层功能，如重力感应、摄像头、陀螺仪和通讯录等。

使用HybridApp的开发方案也并非一劳永逸，作为一种新兴技术，它还有很多缺陷。

首先在性能方面，因为脚本语言的运行效率较低、内存管理能力较差，HybridApp的响应速度远远不如原生应用。

其次，由于HybridApp与生俱来的使命就是提供跨平台的解决方案，所以它必然要面对更多的分辨率规格，而跨平台开发框架本身还没有针对此问题的解决方法。

再者，移动互联网应用开发通常需要充分调用终端的硬件能力，但由于HTML5标准还未完成制定，因而各种移动终端浏览器对HTML5支持程度还有很大差别，无法保证良好的跨平台硬件能力调用[3]。

（二）HTML5

作为HTML的下一个修订版本，HTML5正以惊人的速度发展和推广。

目前，各大主要浏览器厂商，包括GoogleChrome、微软IE、MozillaFirefox、苹果Safari和Opera，都在不断地针对HTML5标准修改自身的发展策略，以期在此方面取得领先。

HTML5之所以受到这样的重视并非出于偶然，而是凭借自身的一系列革命性创新：

1.简洁的语法

HTML5充分体现了“Writeless,domore”的编程思想。

对于使用传统的HTML4.01编写的网页，要实现多种表单验证规则、文本框获得焦点、语音搜索等功能，必须书写大量的脚本代码。

而在HTML5中，很多功能使用一行代码甚至一个属性就能实现，大大降低了代码的复杂性，同时也避免了无谓的重复制造轮子（ReinventtheWheel）。

另外，HTML5使用语义化（Semantics）标签代替传统的无意义的DIV标签。

例如对一个WEB文档结构的描述，在HTML4.01和HTML5中的表达如图1所示。

显然，HTML5的标签对更加丰富，文档结构表达也更清楚，有利于代码的维护。

图1WEB文档结构的表达

2.统一的标准

传统WEB开发的最难之处在于兼容各浏览器内核的标准。

Chrome和Safari使用的是Webkit内核，IE使用的是Trident内核，Firefox和Opera使用的又是不同的内核。

不仅如此，同一浏览器的不同版本也颇有差异，如IE6、IE7、IE8和IE9+对CSS和JS的解释就各有不同。

另外，即使是使用同一种内核进行外壳扩展的浏览器，如360浏览器和猎豹浏览器，也会出现一些脚本无法正常工作的情况。

所以在开发过程中，往往需要为解决兼容性的问题耗费大量的时间和精力。

HTML5的出现，意味着这种局面将有可能结束。

作为下一代Web技术标准，HTML5标准定义的规范非常广泛，目前，已经在移动浏览器中得到支持[4]。

一旦基于HTML5的统一标准制定，必将使得浏览器市场标准混乱的局面大为改观。

3.多媒体支持

目前，WEB上的富互联网应用（RichInternetApplications），包括多媒体和游戏，主要都是依赖于浏览器插件，如AdobeFlash和微软的Silverlight。

HTML5的出现将使得浏览器对插件的依赖程度降低。

HTML5本身提供了标准的视频和音频接口，无需安装插件，就可以播放多媒体资源，甚至可以操控文件的时间轴数据和视频中的字幕。

4.丰富的API支持

HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据推送到客户端的功能[5]，从而使得基于WEB的消息推送和实时应用成为可能。

它还支持本地文件的拖拽和读写以及离线存储（OfflineStorage）功能，推动了WebApp由Online到Offline的转变。

此外，HTML5还提供地理定位功能。

通常设备可使用的定位技术主要有:

IP地址、GPS、WiFi及手机基站等,各种技术的定位精度也各不相同。

HTML5Geolocation不指定设备使用哪种底层技术定位,因此只要设备支持这几种定位技术之一,就都可以使用HTML5Geolocation[6]。

5.视觉表现能力

HTML5本身具有强大的图形绘制功能，再结合使用CSS3，就可以制作出非常华丽的视觉效果，并且无需像过去一样，通过书写大量的脚本来控制样式。

随着移动设备GPU硬件加速的普及，CSS3的3D动画将会渐渐普及，甚至完全取代2D变换。

6.向后兼容性

HTML5所宣称的立场是“非革命性发展”，也就是说，它并非完全颠覆传统的WEB标准。

HTML4.01的大部分标准迁移到HTML5中兼容性仍然很高，被删除的多为不便管理的标签，如