zoukankan      html  css  js  c++  java
  • PhoneGap应用开发的那些坑爹事儿

    子曾经曰过:如果你恨一个人,让他去开发PhoneGap应用;如果你爱一个人,让他去开发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数据,这样在网络断开时,依然可以显示内容。

    这个项目完全是一个副产品,所以我不保证会维护它。不过你已经知道了它的大多数细节,我相信Web程序员都能很好的使用它。项目地址:http://code.google.com/p/lazymobile/

     

    PS: 我的微博ID @Easy ,这应该是找到我最快的方式。

     

    微信公众号:技术创业必读 不懂创业的技术经理不是好CTO 

    本条目发布于2012 年 12 月 12 日。属于移动互联时代分类,被贴了 标签。作者是

  • 相关阅读:
    MVC3、如何应用EntityFramework 连接MySql 数据库 Kevin
    DEV EXPRESS Summary Footer 不显示 Kevin
    装饰模式 Kevin
    Dev 控件 GridControl 控件 二次绑定数据源的问题。 Kevin
    System.InvalidOperationException 异常 Kevin
    LINQ to XML Kevin
    代理模式——代码版“吊丝的故事” Kevin
    VS2012 中的设备 面板 Kevin
    maven 学习笔记(三)创建一个较复杂的 eclipse+android+maven 工程
    maven 学习笔记(一)eclipse+android+maven
  • 原文地址:https://www.cnblogs.com/zhwl/p/3513454.html
Copyright © 2011-2022 走看看