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

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

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

~~现在的jQuery Mobile 1.0.1只能用jQuery 1.6.4。像我这种迷恋新版本的，直接改成1.7.1，结果虚拟机里报错，调试了半天才发现居然是类库问题。~~今天又试了一下，1.7.1没问题，很奇怪，可能当时的配置有问题吧。
想用jQuery Mobile的话，提前看遍文档很有帮助。文档里面列举了大部分控件的使用实例，配合开发者工具看源码很容易学习。
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，于是需要这样去重置某些默认行为。
jQuery Mobile在大屏幕的性能很差，调试的时候可以把浏览器窗口调小点。
PhoneGap说直接用经典版Eclipse就行，但是为了以后写代码舒服，我觉得还是aptana好。
js出错会在虚拟机里搞出各种问题，很难搞明白（我是新手），所以这种基于WebView的app直接在浏览器里调试比较好，基本上chrome里跑好的代码直接编译就能在模拟器里稳定运行，不会出什么岔子。
但是浏览器往往不支持跨域ajax，所以就需要进行些设置。chrome没有设置这个的选项，需要在启动时增加一个参数：
```
chrome.exe --disable-web-security
```
chrome真是个好东西，可以分析页面、调试代码、监控下载、看本地存储，双屏的话，还可以把页面和调试工具分开放，实在是太方便了~~强烈推荐。

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

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

相关文章

【视频教程】技术栈大升级：Vue3 到 Nuxt3（4）深入理解 SSR 和 `useAsyncData`

聊聊前端入门（1）：HTML+CSS

在 Code.fun 做 Code Review（四）

觉得文章有帮助？

评论