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了。

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上常用的下拉刷新。

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

然后是页面切换的问题。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的应用模板。

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

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

这东西基于JQM和iScroll。

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

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

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

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

相关推荐