基于phonegap开发app的实践

开发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自适应屏幕方案探讨

《PhoneGap精粹：构建跨平台的移动App》——导读 本节书摘来自异步社区《PhoneGap精粹：构建跨平台的移动App》一书中的目录，作者 【美】John M. Wargo，更多章节内容可以访问云栖社区“异步社区”公众号查看