跨平台移动开发实战（五）------基于Jquery mobile开发UI的核心要素

Phonegap不管UI这块，并且既然选择HTML5作为技术路线，那么就不能基于各个平台的UI库来开发界面，因此选择一个基于mobile的HTML5 UI框架就显得非常重要了。Phonegap官方网站提供了一个选择列表，基本上涵盖了能够和Phonegap集成并且非常主流的开源框架：http://phonegap.pbworks.com/w/page/36767911/UI%20Development%20on%20PhoneGap

这个Page罗列了各个框架的比较信息，我没有做仔细的技术选型的工作，大致通过接受面的广度筛选出Sencha Touch和Jquery Mobile，然后Sencha(以前叫Ext)之前在桌面浏览器端给我留下了不太好的印象（主要是性能方面），所以我就选择了Jquery Mobile，但这里我需要强调的是，我只是选择一种而已，不确定Jquery Mobile就是最好的。

做UI不像做后台架构，主要就是一些细小经验的积累，用过Jquery Mobile一两个月后，有如下的点值得总结：

• 页面流转模式
• page生命周期
• 自动完成组件
• 基于不同大小的Screen动态适配样式
• 统一字体显示
• 采集用户体验数据
• Mobile UI设计的最佳实践
  

1）页面流转模式

基于Phonegap实际上是用B/S的技术基于C/S的模式来开发，因此页面流转和传统的会有差别。JQM(JQuery Mobile简称)的官方demo是采用传统的B/S模式，页面与页面之间都是通过服务器端来跳转，并且每个page都是独立的html。这对于Phonegap的离线模式来说就不适用了，应用里的所有html都不是从服务器端下载下来执行，而是存放在mobile端本地。这样一来页面流转和业务流程就很自然地放在客户端来开发和执行，因此对于这种方式上的改变，我采取以下两种方案：

• 主要业务逻辑和流程的开发基于JS完成，Server端只是提供相关数据处理的支持，Mobile端与Server端通过Ajax和Websocket来通信，page间通过$.mobile.changePage( "xxx", { transition: "xxx"} );来流转
• page与html文件是多对一的关系，多个page公用一个html可以简化多个page间传值的方便，如果multi-page来开发&#