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来开发&#