PhoneGap应用开发的那些坑爹事儿

去年这个时候我很烦恼，因为我觉得我OUT了。

起因是我买了一台Android系统的手机。当我用自己的google账号登录上去后，我发现通讯录被同步了，Gtalk实时通知了，Gmail随身能看了。还有成百数千的应用，让我足足玩了一周。

电脑占据了用户每天8小时的时间，网站创造了巨大的价值。但是，手机这东西却能够24小时不间断的陪着用户，消息推送机制更是让用户变得永久在线，随时可响应。我很兴奋，但是却高兴不起来。

我是一个Web程序员。我喜欢写PHP，喜欢处理Mysql，我能用CSS和JavaScript构建不错的页面。但是我不喜欢Java，也不喜欢写Object C，就像那帮做客户端开发的同学不喜欢写网站后台一样。

这样的沮丧持续了挺久，直到我遇到了PhoneGap。其实我有想过通过Mobile Web的方式进入移动互联网，但是在手机上输入网址的体验太折磨了。另外消息推送和本地设备接口(比如摄像头)都是问题。而PhoneGap解决了这一切。简单的说，它就是一个提供js接口调用本地设备接口的浏览器，这个浏览器还可以打包成一个单独的应用，安装到系统，添加到桌面和发布到应用市场。

由于完全基于浏览器，PhoneGap还有一个好处，可以很轻松的跨多个平台。

基于PhoneGap，我用3天的时间，给TeamToy写了一个手机客户端，可以读取工作组的通讯录，可以浏览Feed和发布广播。当然，还能收通知。

虽然算只跳舞的熊，但它的确能工作。这让我不禁想，这东西到底能做什么程度的应用?

PhoneGap只是一个壳，它是不管里边跑的应用长什么样子的，更不会有那些移动设备上常用的控件。

好在有其他的项目提供支持，其中最有名的是两个。一个是sencha touch，一个jquery mobile。

于是我都试用了下，然后我明白了苦头在后边⋯⋯

当时这些项目都还属于发展期，连文档都没什么，需要自己去读DEMO和源代码。

首先我尝试着用sencha touch写了一个微盘的第三方客户端。坦白的说，sencha touch表现不错，在菜单导航和列表拖拽上都明显比Jquery Mobile靠谱。但是sencha touch采用JS来描述整个page的结构，这让你的layout看起来就像一堆json数据。

我很讨厌这样，因为这种级别的可读性让项目很难维护。另外，sencha1版本Bug也不少，比如那个List最后一行能拖拽出来，却永远点不到的问题。现在sencha已经在测试2版本了，据说提供了直接打包成本地应用的工具，这样也许就不需要PhoneGap了。

由于对Sencha Touch的编码方式不认同，我完全转向了Jquery Mobile。JQuery Mobile的方式更容易接受，它完全使用HTML标签进行页面布局，你只需要通过data-role之类的标签来告诉JQM你想干什么就OK了。我用JQM写了Riki.co的移动版，有兴趣的同学可以去体验下：http://riki.co/m/ (这个东西有很多问题，下边我会提到)

JQM最近已经1.0了，成熟了不少，但是问题依然很多。首先是底导航浮动的问题。JQM的底导航实现很诡异，丫是一个浮动图层，根据当前屏幕的高度，把自己降到屏幕最下方，当你拖动页面内容时，这个浮动条还会隐藏。这个效果有多么的BT，真是谁用谁知道。没用过的同学可以到这里去体验下官方版本： http://jqmdoc.sinaapp.com/docs/toolbars/footer-persist-a.html

这其实还不是最难受的，最难受的是，当你把JQM打包到PhoneGap里边后，由于未知原因10次里边JQM能有2~3次取不到浏览器高度，直接造成导航挂掉。

这个问题其实iScroll4 很好的解决了，它使用了相对距离的CSS来固定顶导航和底导航。所以后来我把它给整合到JQM里边，然后天下太平了。

iScroll4还实现了列表拖拽刷新的功能，可以做出iPhone上常用的下拉刷新。

然后是页面切换的问题。JQM和Sencha其实都有，就是在android系列机器上，页面切换时的抖动和闪烁。最开始你注意到的时候，是切换的瞬间页面反白一下，这个问题其实可以解决，用一行CSS就可以了：

.ui-page  


{  


-webkit-backface-visibility: hidden;  


} 

但是，代价是惨重的。首先是会导致性能降低，然后是，当你切到从页面A切换到页面B时，页面A的内容会突然在滑动效果结束后，再闪一下。亲，这是坑爹啊还是坑爹啊。还没完，如果你用的JQM，然后在android系统上用百度或者QQ输入法，那么恭喜，当你在输入文字时，页面会上下不停的抖动，就像ZF要强拆它家似的。

JQM通过Ajax载入的页面都有这个问题，你可以选择关闭Ajax载入，这样每个页面都独立载入，除了速度慢点外，不能忍受的是列表滚动条进度会丢失。这意味着你在列表中部选中的一条内容，查看完后，返回列表时，列表又回到第一条去了。

最后我选择了采用DIV切换的方式。我会在一个页面把所有要用的Page都载入进来，然后display:none;在需要使用的时候再显示出来。这样做的问题是一次读取了较多的内容，会稍微多占点内存，另外没有动态切换效果;但好处显而易见：页面之间的切换速度已经接近原生应用。

我想说的是，JQM是个好框架，但它并不是完全为在PhoneGap里边跑的HTML设计的。它需要考虑资源载入速度和流量的问题，而PhoneGap这种应用资源都放本地的;它在浏览器上可以不断的刷新页面，所以它不用考虑太多内存管理和DOM回收的事情，而对PhoneGap里边的应用来讲，这直接决定了应用的稳定性。

这些差异决定了一个专门为PhoneGap这种应用设计一个框架是必要的。而目前没有一个好的框架解决掉我提到的这些问题，我们只能小心的绕过这些一个个的雷点。( 如果你愿意写一个这样的框架，我可以提供一个新浪的全职职位 ：) )

虽然我吐了一肚子的苦水，但是最终结果是很不错的，我现在已经能以天为单位开发一些社交和资讯类应用了，而这些应用可以直接运行在iPhone，Android和芒果上。

更好的消息是你不用再被折腾一遍，因为我有个东西给你。

那就是我在历经折磨后，做出的一个叫做LazyMobile的应用模板。

它其实就是一个已经写好的应用，你可以直接修改它，添加自己的功能。它看起来是这个样子的：

这东西基于JQM和iScroll。

首先它用iScroll4解决了底导航固定的问题，在android和ios上都很完美，下拉刷新也是可以用的。

然后它通过Tab切换来载入其他页面，效果接近原生应用，但是不要在一个List里边放太多的数据，少放点，动态加载和实时回收item项。我已经做了一个两级导航，应该够用了，微博客户端也就用到二级导航。

它用JQuery的ajax函数从服务器端读取json格式数据，然后用jquery.tmpl进行渲染，目前这个地方会消耗不少CPU，但暂时没有更好的办法。

另外，它还用localStroage存储了上次网络请求回来的json数据，这样在网络断开时，依然可以显示内容。