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

微众生活：基于phonegap的跨平台lbs_移动应用开发与实现毕业设计内容摘要：

nium 和Adobe Air 等。 这些框架各有优劣，采用哪个框架进行开发要视具体情况而定，本次5 研究使用的是 Phonegap 框架。 1. Phonegap 的特点 （ 1）支持的操作系统众多 Phonegap 支持多达七种操作系统 ，涵盖了目前最流行的 iOS、 Android、 Windows Phone、黑莓、塞班等，各系统的 多数 硬件资源也 均 能调用， 图 2 为 Phonegap 对各移动操作系统 的支持情况 ： 图 2 Phonegap 支持的操作系统 （资料来源： Phonegap 官方网站 . Supported Features[EB/OL]. [202015]. （ 2） 没有独立的集成开发环境 Phonegap 没有独立的 IDE（ Intergrated Development Environment） ，它通过插件的形式与成熟的 IDE 协调工作。 很难界定 这是一个优点 还是 缺点， 笔者认为 对此 没有强加认定 的必要。 应该说，它 给予 开发者更多选择的空间，开 发人员可以选择 熟悉的工作环境，如 Eclipse、 Xcode、 Visual Studio 甚至 Dreamweaver 进行开发。 但 这种方式也有 缺陷 ， 它不能够 像 RhoMobile 那样将开发到部署的整个流程 集成 在一个环境内完成， 配置多个 IDE 比较耗时，对初学者有一定难度。 （ 3）使用 WEB 语言 开发 借助 Phonegap，开发者可以 使用 WEB 技术 开发 基于抽象的跨平台应用程序并将代码包装为原生应用以访问系统架构 [7]。 相比其他框架而言， Phonegap 的学习 门槛较低。 如 RhoMobile 需要使用 Ruby 语言， Adobe Air 要求掌握 ActionScript 等多种语言 ，6 如果没有 相应 语言 的使用经验 ，就无法使用该工具。 而 Phonegap 采用 HTML、 CSS和 Javascript 语言进行应用开发，普及度高，入门容易，相对简单。 另外，如果应用界面不足， PhoneGap 也提供使用者自行扩充的接口（ Plugin），以取得更多的应用资源 [8]。 2. Phonegap 的原理 Phonegap 的工作原理其实并不复杂。 由于各移动操作平台一般都会提供 WebView控件， Phonegap 充分利用这 一点，针对 不同 平台的 WebView 做了扩展和封装 ， WebView这个组件变成可访问设备本地 API 的强大浏览器，所以开发人员在 PhoneGap 框架下可通过 Javascript 访问设备本地 API[9]。 开发者只需 使用 WEB 语言 编写 出 应用 界面和业务逻辑， 再 通过 Phonegap 提供的接口对硬件功能进行调用，就可以开发出接近原生应用的程序了。 Phonegap 的原理 如 图 3 所示。 图 3 Phonegap 原理示意图 （资料来源： Hi Putto. 浅析 PhoneGap 工作原理及其改进 [EB/OL]. [202016]. 3. Phonegap 的缺点 Phonegap 的缺点 主要 表现在性能方面。 首先， 作为脚本语言， Javascript 的运行效率 不如移动操作系统 的 原生 编程 语言，不论是基于虚拟机的 Java 和 C、 VB， 还 是效率 接近 C 语言的 Objective C 都是如此。 其次， Javascript 内存管理的能力又要逊于7 原生语言， 所以 在进行快速操作的时候， 应用响应迟缓的问题会表现得尤为明显。 （ 四 ） jQuery Mobile 使用 Phonegap 开发程序还有一大优势，就是可以在移动应用开发上继续使用jQuery 这类 开源 JS 框架。 不过，还有专门针对移动平台 设计 的更加轻量的 Javascript框架，如 Sencha Touch、 jQTouch 和 jQuery Mobile 等。 其中 jQuery Mobile 可以认为是 jQuery 在移动平台上的延续 ，其设计的主要目的是尽可能使开发的移动应用看起来更像本地应用，在样式展现上做了很多改进 [10]。 对 众多 熟悉 jQuery 框架的开发者来说，使用 jQuery Mobile 更容易 掌握 ，学习成本较低 ，可以 快速 制作出 iOS 风格的界面。 但 jQuery Mobile 也有 缺陷 ，比如当开发者需要根据 自身 的界面需求完全自定义界面时， jQuery Mobile 预定义的格式 反而 会成为 严重的干扰因素。 （ 五 ）百度地图 Javascript API 由于本次研究制作的 是 LBS 类型应用， 需要使用地图框架。 百度地图为开发者提供了 Javascript 版本，可用于跨平台 LBS 手机应用的开发。 相对 Google 地图而言，百度地图 API 是后起之秀， 性能和稳定性等各方面 较逊于 Google 地图 ，但由于百度地图专注于中国大陆本土地图的信息服务 ，其 商业信息 较为丰富， 所以 本次研究选择 使用 百度地图 协助 开发。 三、手机应用分析与设计 （一）需求分析 本次研究制作的 手机应用名为 微众生活 ，是一款为用户提供本地周边生活服务快捷查询的手机小程序。 “ 微 ” 字强调其小巧，没有华而不实的功能， “ 众 ” 字 表明 这是一款适合广大手机用户使用的 APP。 此应用主要实现 两个 功能： （ 1） 查询周边商家服务。 对用户所在的地理位置和城市进行定位，根据用户所选择的 服务 分类或自定义关键字，搜索 周边 地区 提供 该类 产品的商家， 对商家 的详情和 地图 位置 进行 展示，并提供前往该处的 交通 路线方案； （ 2） 提供公共交通出行方案的搜索、公交路线的查询，出租车 费用查询 和 私人驾车的路线导航。 8 微众生活手机应用的界面采用以咖啡色为主的暖色调 进行渲染，营造 一种温馨 的效果。 应用程序的图标设计为一只可爱的小狗，因为犬类有非常灵敏的嗅觉，代表着微众生活能够像犬类 一样，灵敏地捕捉到周边 地区 的 服务 信息。 温馨和可爱的感觉可以 在 应用 使用之初就 给用户 留下比较好的印象，对提升应用的体验有潜在的效果。 中国互联网消费调研中心 数据表明， 2020 年第三季度，安卓已占据全球智能手机市场 %的份额， iOS 则占据了 %的份额。 因此 本次制作的手机应用以兼容这两种操作系统为主。 由于安卓的开放性更好，首先在 Android SDK 环境下进行开发和调试，再针对 iOS 平台进行编译。 （ 1）安卓系统 如 图 4 所示，根据 Google 官方发布的数据显示，目前仍有大量用户在使用 Android +的版本， 所以 安卓版本的开发选择 版本 对应的 API 8 作为 目标 版本，以期兼容 更多 安卓 设备 ，包括原生系统和较为流行的 ROM。 图 4 安卓各版本占整体份额 （资料来源： 36 氪 . Jelly Bean 在 Android 各版本系统中所占份额已突破至 %[EB/OL]. [202017]. （ 2） iOS 系统 应做到兼容 iOS 以上设备，即 iPhone iPhone4s 和 iPhone5 设备。 （ 3）分辨率兼容 9 为兼容移动智能终端主流分辨率，包括 854*480、 800*400、 960*5 960*640等，此应用进行界面设计时 ， 界面元素的 CSS 属性取值单位都应使用相对大小，即 %或 em，这 种做法也更 符合自适应网页设计（ Responsive Web Design）的思想。 对于程序中较为耗时的操作，如 定位操作 ，应用程序会将相关的数据进行缓存，避免重复发送相同的网络请求，减少网络的流量和设备电源的消耗。 优美的界面以保障性能为前提。 因为使用 Phonegap 创建的应用 较容易出现 卡顿现象 ，而且有些转场效果在低版本的安卓设备上无法得到支持 ， 所以建议 将华而不实的转场动画去掉，保证应用的运行尽可能流畅。 （二）开发方案 图 5 微众生活应用结构图 工欲善其事，必先利其器。 由于 Android SDK 实际上是基于 Eclipse 环境， 可以充分利用 Eclipse 良好的扩展性，安装 Aptana 和 Emmet 插件，这两种插件可以帮助WEB 开发者快速书写 HTML 代码。 必要时还可以使用专门的编辑器，如 Sublime Text，进行辅助开发。 10 四、应用程序具体实现 （一）应用界面设计 应用启动后，首先显示欢迎画面，然后再过渡到主界面。 欢迎画面的实现有两种思路，一种是根据各操作系统的规则进行配置，另一种是使用 Javascript 进行页面跳转。 后者更符合跨 平台设计的思想，实现起来 也比较 容易， 所以采用后种方式。 图 6为欢迎画面的示意图。 图 6 应用程序欢迎画面 这一步实现的要点是：将程序的图标 logo 和文字 logo 等信息集成在一张 PNG 格式的图片上，背景设为透明。 在程序首页面 中将图片插入，然后设置 img标签的 CSS，使其相对整个屏幕居中： weleImg{ width: 70%。 position: absolute。 margin: auto。 11 top: 0。 right: 0。 bottom: 0。 le。