使用PhoneGap+jQuery Moblie开发蜂鸟镜头库手机App

拿以前做蜂鸟镜头库的两个接口尝试开发蜂鸟镜头库app,基本完工。这里总结下踩过的坑。

蜂鸟镜头库app效果图
蜂鸟镜头库app

自从春节期间在家尝试了PhoneGap之后,一直想做点实际的东西,好总结点经验,以备不时之需。可惜后台苦手,数据源是个问题。后来想起来以前做蜂鸟镜头库的时候有两个接口,可以取得完整的数据,于是便动起手来,开始做这个app。

开发本身并不复杂,大概花了一天时间搞出雏形,加上翻页基本就能发布了。不过还是遇到不少问题,今天简单总结下踩过的坑,以免以后再踩。

  1. 现在的jQuery Mobile 1.0.1只能用jQuery 1.6.4。像我这种迷恋新版本的,直接改成1.7.1,结果虚拟机里报错,调试了半天才发现居然是类库问题。今天又试了一下,1.7.1没问题,很奇怪,可能当时的配置有问题吧。
  2. 想用jQuery Mobile的话,提前看遍文档很有帮助。文档里面列举了大部分控件的使用实例,配合开发者工具看源码很容易学习。
  3. jQuery Mobile提供一个mobileinit事件来修改默认行为。这个事件会远早于document.ready触发,要改变默认行为就需要侦听这个事件并进行处理:
    $(document).bind("mobileinit", function(){
      //在这里覆盖默认行为
    });

    而且这个事件在加载完jquery-mobile.js之后就会触发,所以包含上面那段代码的js也应该放在它前面:

    <script src="jquery.js"></script>
    <script src="custom-scripting.js"></script>
    <script src="jquery-mobile.js"></script>

    这段文字基本照抄jQuery Mobile文档。我的理解是jquery-mobile.js加载完就会开始介入渲染页面,并广播mobileinit事件;因为我们通常把js放在<head>里,所以触发的时机也会早于document.ready,于是需要这样去重置某些默认行为。

  4. jQuery Mobile在大屏幕的性能很差,调试的时候可以把浏览器窗口调小点。
  5. PhoneGap说直接用经典版Eclipse就行,但是为了以后写代码舒服,我觉得还是aptana好。
  6. js出错会在虚拟机里搞出各种问题,很难搞明白(我是新手),所以这种基于WebView的app直接在浏览器里调试比较好,基本上chrome里跑好的代码直接编译就能在模拟器里稳定运行,不会出什么岔子。
  7. 但是浏览器往往不支持跨域ajax,所以就需要进行些设置。chrome没有设置这个的选项,需要在启动时增加一个参数:
    chrome.exe --disable-web-security
  8. chrome真是个好东西,可以分析页面、调试代码、监控下载、看本地存储 ,双屏的话,还可以把页面和调试工具分开放,实在是太方便了~~强烈推荐。

万事具备后,发现鬼图片服务器做了防盗链,图片下不下来。无奈之下,只好拿自己的服务器做了一下抓取的工作,现在虽然勉强可以访问,但是图片打开的速度巨慢,唉。下一步还是去看看flickr的api,再弄的话就弄flickr好了。希望未来PhoneGap也能增加个修改refer的功能,让本地和远程能模拟到一个域下。