PhoneGap+JQuery Mobile移动应用开发学习笔记

最近一直在学习使用PhoneGap+JQuery Mobile的开发框架开发Android应用，抛开这个框架的运行效率不说，暂且将使用中遇到的问题进行一下整理。

1.JS文件引用顺序

也许在进行web开发是对这个问题并不是特别注意，但是JQuery mobile对这个特别敏感，如果顺序不对，会造成页面无法渲染，官方建议引入顺序为先引用JQuery的最新版本，然后在引用自己的JS文件，其次才是 JQuery Mobile的JS文件，最后是使用到JQuery Mobile特性的JS文件。

2.本地存储

使用PhoneGap的本地存储一直有问题，替代方案请参考之前发布的文章

3.Document.ready

普通的JQuery首先学会的肯定是在这里面写代码，但是JQM在首次加载的时候，如果一个页面存在多个#Page（DIV）只会加载第一 个#Page，这时就会返回DOM加载完成的事件，所以如果在Document.ready中写其他#Page的操作，将会出现无法绑定的错误，要实现整 个页面操作，需要写进pageInit(),而不是$(document).ready()。还有一点需要注意的是，在JS文件中动态加载的元素有些情况 也无法被Document.ready中的函数渲染。

4.在浏览器中打开链接

如果单独用a标记的话，JQM会将页面与程序内置浏览器中打开，如果想在系统浏览器中打开，写法为：

<a href=”javascript:navigator.app.loadUrl(‘http://elanblog.sinaapp.com/’,{ openExternal:true });”>博客
</a>

5.退出程序

Android程序大部分都没有退出选项，不过加个退出的话会令那些内存控更放心。

<a href=”#” onclick=”javascript:navigator.app.exitApp();”>退出</a>

6.检索框事件

Android应用里面一般检索框都没有像windows那样的检索按钮，JQM中提供的检索框同样没有，那么我在输入完检索词之后需要监听哪个事 件才能实现检索呢？答案是OnChange，只需要绑定这个事件即可监听到用户点击输入法的“检索”按钮或者“回车”按钮的事件。

7.点击不触发全屏

JQuery Mobile里面有个开发应用时很忌讳的功能，就是随便碰下屏幕空白区域或者文本框，header和footer部分就不会一直显示在屏幕上下，而是跟着 一块滚动起来了。去掉这种效果只需在header或footer的标签中加入 data-tap-toggle=”false” 即可。