基于phonegap开发app的实践

标签: phonegap 开发 app | 发表时间:2014-07-08 23:20 | 作者:xiebaochun
出处:http://blog.csdn.net

app开发告一段落,期间遇到不少问题,写篇文章记录一下。

为虾米要用phonegap

开发app,至少要考虑android和ios两个版本吧,android偶可以应付,ios表示完全木有接触过,于是时间成本、开发成本上去了。phonegap则解决了这个问题,而且对po主而言,用web开发的方式来搞app很爽啊有木有!

当然,用之前还是要调研下,基于phonegap的app有木有成功案例。大公司里腾讯的qq邮箱ios版,豆瓣的豆瓣音乐人都是基于phonegap。重点看了看豆瓣音乐人,很无耻的反编译了一下apk,居然代码都木有压缩过  ,正好方便了偶研究。

 

豆瓣音乐人的实践

从体验上讲,豆瓣音乐人和native的app还是有差距,首先,点击tab有明显的延迟,另外,豆瓣音乐人整个页面只有一个view,即下图中的frame(view可以理解为app的一个界面,每个app看成是由很多个视图界面组成的),视图之间的切换效果,是先在frame下面再创建一个新frame,里面是将要切换进来的视图代码,然后用css3 transform做视图切换动画,动画结束之后,把原来的frame删除。也就是,在页面中保证只存在一个frame。

这么做应该是基于性能考虑,但是牺牲了部分体验,比如一个列表,滚动到第3屏,点到列表详情,再返回,视图不是停留在点进详情页之前的位置,而是回到了顶部。

 

豆瓣音乐人其实还是以浏览为主的app,功能比较轻,而我们的app则是包含了发帖、传图片等功能,表示鸭梨很大,但值得尝试。

 

 

技术方案

整体技术方案是:

phonegap负责和底层OS通信,调用摄像头、获取网络状态等

backbone+underscore做路由以及视图渲染

iscroll做布局

css3做动画效果

 

路由及视图管理

整个app其实是个single page application(SPA),对于SPA来说,路由和视图的管理很重要,我用了backbone+underscore来做这个事情。
通过backbone的router实现不同hash值对应不同视图,视图里用到的模版用underscore。

 

app布局

典型的app布局如下图,header和footer固定,中间内容可以滚动,第一个想到的就是用position:fixed,但是po主google一下,android 2.x,ios5以下不支持position:fixed,然后po主看到了业界比较推荐的 iscroll,试了些demo,po主就决定用iscroll了。

用iscroll有以下几点好处:
1、很容易实现app的布局,而且每个视图是用的绝对定位,这样做视图切换动画的时候很方便
2、下拉刷新,上拉加载也一并实现了
3、iscroll自带左右滑动的手势功能

弊端:
1、滚动区域里图片多了,低端机卡爆- -
2、iscroll引发的“ fake click”问题
其他倒没有什么弊端了

 

视图切换

考虑到体验问题,没有采用豆瓣的做法, 其实本来我是想用angularJs而不是backbone+underscore,但是angularJs的视图切换原理也是先append一个frame,动画结束再删掉这个frame,这种做法一是无法保留原有视图的状态,第二视图渲染是需要时间的,导致动画切换时,下一个视图会有很短暂的空白时间。

所以我的做法是,多个视图并存,要展示哪个视图就加上current,并调用计算视图相对位置和滑动动画的函数。

 

 

 

屏幕大小及分辨率适配

屏幕大小:布局要自适应不同的屏幕大小,所以固定宽度神马的尽量少用,改用百分比

屏幕像素密度:主要影响到css里引用的图片,以及页面中展示的图片(即img标签的图片),豆瓣音乐人的做法是对不同密度提供不同的图片,但是po主比较懒,只针对像素密度为2的做了一套,比如有个叫icon的div,我们可以这样

.icon{
width:20px;
height:20px;
background: url(‘../images/icon.png’) no-repeat 0 0;
background-size: contain;
}

 

icon.png的大小其实是40*40,这样虽然有点浪费资源,但是减轻了工作量啊有木有 

对于页面中的img标签,提供的图片也是2倍展示宽度的,这个倒是浪费部分用户流量了- -

 

其他

dom操作和事件还是用的jquery,不要问偶为什么- -

关于开发中遇到的各种问题,请看 下一篇

 

 

 

 

参考文献

豆瓣音乐人app的PhoneGap实践

移动Web单页应用开发实践——页面结构化

 web app自适应屏幕方案探讨

作者:xiebaochun 发表于2014-7-8 23:20:17 原文链接
阅读:77 评论:0 查看评论

相关 [phonegap 开发 app] 推荐:

基于phonegap开发app的实践

- - CSDN博客Web前端推荐文章
app开发告一段落,期间遇到不少问题,写篇文章记录一下. 为虾米要用phonegap. 开发app,至少要考虑android和ios两个版本吧,android偶可以应付,ios表示完全木有接触过,于是时间成本、开发成本上去了. phonegap则解决了这个问题,而且对po主而言,用web开发的方式来搞app很爽啊有木有.

phonegap开发app中踩过的那些坑

- - CSDN博客Web前端推荐文章
把遇到的问题列出来,如果有解决方案的,偶也会写下来,如果大家有更好解决方法的,欢迎留言噢. phonegap 2.9无法触发deviceready事件. 亲们可以看下控制台有木有报错,如果有提示cordova_plugins.json 404 (Not Found) ,就在www目录下新建个空文件,命名为cordova_plugins.json就好了,cordova初始化的时候会请求这个文件,但po主还没发现这个文件有啥用,但是没有这个文件的话,cordova初始化失败,自然不会触发deviceready事件.

看看国外的phonegap和ionic移动app开发框架有多火

- - Web前端 - ITeye博客
下面给大家分享一下外的phonegap和ionic移动app开发框架到底有多火:. phonegap网站的日访问量:  ip:555000. 基于phonegap 以及angularjs 的移动app  html5开发框架 Ionic 的日访问量  ip:492000. 大家都懂的,下面给大家简单介绍一下  phonegap   Angularjs    ionic  懂的可以不看.

Phonegap + HTML5 开发经验小结

- - Miller
        去年曾对 Phonegap做过一次调研,当时还是1.1版本,印象也一般. 对他的性能以及真实的跨平台能力都不太确定. 今年过完春节至今正好有机会参与了一个纯Phonegap + HTML5开发的项目,项目至今已经完成了一期的App Store提交,所以也正好能抽时间来小结一下. 一个月左右的开发过程让我对这种开发模式有了更深的认识,这对于前端开发人员而言绝对是一个大的机会.

基于 PhoneGap 与 Java 开发的 Android 应用的性能对比

- jinn - 搜索研发部官方博客
        此次的调研的重点是针对一个Android应用的基础需求,用phonegap与Java实现的应用在性能及开发成本等方面的对比.        开发一个应用的最基本需求应该是浏览性需求,而在Android开发中ListView比较常用的控件,广泛被用于数据列表的展现上,而且也比较灵活. 所以本次选择用phonegap和Java各自实现一个ListView的内容展现功能的应用;同时引入另外一个常用组件GridView来实现图片浏览的功能应用.

PhoneGap开发不可或缺的五件装备

- - 方糖气球
1 轻量级的JQuery兼容库:JQ.mobi/Zepto. JQuery已经成长的得非常强大了,但在移动设备上有些臃肿. 如果你的应用只运行在WebKit内核的机器上,那么我强烈建议你换用移动版本的JQuery兼容库. Zepto和 JQ.mobi都是专门为移动设备优化后的JQ兼容库. Zepto我不是特别熟悉,JQ.mobi我用得比较多,官方提供的数据称,JQ.mobi比JQueryMobile快3倍以上.

PhoneGap:免费开源的 HTML5 移动应用开发平台

- - HTML5研究小组
PhoneGap 是一个免费开源的开发框架,让 Web 开发人员能够使用熟悉的 HTML,. JavaScript 构建跨平台的移动本地应用. 通过 PhoneGap 框架提供的 JavaScript API 能够以非常简单的方式调用移动设备的核心功能,包括地理位置,摄像头,加速器,通讯录,多媒体,文件和网络等功能.

PhoneGap 1.0 让手机程序开发者横扫七个平台!(影片)

- Yihui - Engadget 中国版
目前手机程序开发者的开发模式:先开发 iOS 的程序,然后再将程序移植到 Android 上,其他平台要再等一下. 但是,Nitobi 公司的最新软件开发工具可能可以改变这个局面了. Nitobi 的 PhoneGap 1.0 可以将以 HTML、JavaScrpt 或 CSS 语言写成的程序转换为可以在 iOS、Android、BlackBerry、Windows Phone 7、webOS、Bada、和 Symbian 上运行的程序,一举多得.

初识PhoneGap

- - IT技术博客大学习
标签:   PhoneGap.      一、PhoneGap是什么.     PhoneGap是一个标准的开源框架,用PhoneGap开发移动应用是免费的,无论是商业或是开源;一个用基于HTML,CSS和JavaScript的,创建跨平台移动应用的 快速开发平台. 它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能.

移动开发者的瑞士军刀:PhoneGap支持一次开发,六大平台部署

- Caiwangqin - 36氪
PhoneGap是由Nitobi推出的一个开源的HTML5开发平台,可帮助开发者通过HTML、CSS和JavaScript开发本地移动应用. 一次开发,然后部署到六大平台:iOS、Android、BlackBerry、WebOS、Bada和塞班. PhoneGap刚刚发布了1.0版产品. 说到PhoneGap的成功,不得不提到PhoneGap社区.