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

转自：http://blog.csdn.net/cutesource/article/details/8499633

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来开发，可以参考官方文档：http://jquerymobile.com/test/docs/pages/multipage-template.html。在我开发的应用里，由于涉及的page不多（大概20个左右），所以我都放在一个html里，page与page之间通过$.mobile.changePage( "#pageId", { transition: "xxx"} );来流转

2）page生命周期

JQM自己有一套针对各个page生命周期的事件机制，结合JQuery本身的document ready，我拟了一下从一个page的加载并跳转到另外一个page的几个主要事件的状态图（两个page在同一个html里）：

如果想深入研究某个事件的具体上下文，可以通过firebug等类似的JS Debug工具，从断点堆栈中来看整个调用流程，直接看源码是很难理清楚事件侦听的过程：

值得注意的是Phonegap的deviceready事件，它是在Phonegap各个组件ready情况下触发，一般说来应该是在jquery document ready之后，但这两者之间没有必然的先后顺序依赖，所以如果需要有两者都ready的情况下才能触发的逻辑，可以采用以下方案：

[javascript]  view plain copy

1. var jqReady = $.Deferred(),pgReady = $.Deferred();  
2. // jq page is ready  
3. $(document).bind("ready", jqReady.resolve);  
4. // phonegap ready  
5. document.addEventListener("deviceready", pgReady.resolve, false);  
6. // all ready  
7. $.when(jqReady, pgReady).then(function () {  
8.   console.log("jq and phonegap all ready");  
9. });  

3）自动完成组件

有个第三方组件比较好的提供了JQM自动完成输入的特性，https://github.com/commadelimited/autoComplete.js，doc和demo都非常简单明了，不多说了，我已在各个平台做过测试，非常不错，并且能很好的解决列表过长所带来的性能问题

4）基于不同大小的Screen动态适配样式

跨平台UI开发就需要覆盖各种不同大小screen的device，并且需要采用不同的css，这里不太可能为了screen做不同的package，需要在一个package里自动适配相应的样式，这里可以用到"media"，废话不多说，直接看samples：

[css]  view plain copy

1. #sidebar ul li a {  
2.   color: #900;  
3.   text-decoration: none;  
4.   padding: 3px 0;   
5.   display: block;  
6. }  
7.   
8. @media all and (min-width: 1001px) {  
9.   #sidebar ul li a:after {  
10.     content: " (" attr(data-email) ")";  
11.     font-size: 11px;  
12.     font-style: italic;  
13.     color: #666;  
14.   }  
15. }  
16.   
17. @media all and (max-width: 1000px) and (min-width: 700px) {  
18.   #sidebar ul li a:before {  
19.     content: "Email: ";  
20.     font-style: italic;  
21.     color: #666;  
22.   }  
23. }  
24.   
25. @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {  
26.   #sidebar ul li a {  
27.     padding-left: 21px;  
28.     background: url(../images/email.png) left center no-repeat;  
29.   }  
30. }  

这样同样的页面在不同screen里分别用不同的样式：

5）统一字体显示

为了在所有平台上都能很高效地统一显示字体，可以采用@Font-face。方法就是把字体文件放到项目package里，然后通过@Font-face加载字体，samples如下所示：

[css]  view plain copy

1. @font-face {    
2.     font-family: 'blok-regular';    
3.     src: url('type/Blokletters-Potlood.eot');    
4.     src: local('Blokletters Potlood Potlood'),     
5.      local('Blokletters-Potlood'),     
6.      url('type/Blokletters-Potlood.ttf') format('truetype');    
7.     }    
8.         
9.     @font-face {    
10.     font-family: 'blok-italic';    
11.     src: url('type/Blokletters-Balpen.eot');    
12.     src: local('Blokletters Balpen Balpen'),     
13.      local('Blokletters-Balpen'),     
14.      url('type/Blokletters-Balpen.ttf') format('truetype');    
15.     }    
16.         
17.     @font-face {    
18.     font-family: 'blok-heavy';    
19.     src: url('type/Blokletters-Viltstift.eot');    
20.     src: local('Blokletters Viltstift Viltstift'),     
21.      local('Blokletters-Viltstift'),     
22.      url('type/Blokletters-Viltstift.ttf') format('truetype');    
23.     }    
24.         
25.     h1 { font-family: blok-heavy, helvetica, arial; }    

6）采集用户体验数据

页面控制在客户端后就不像在服务端那样比较容易采集用户使用情况，这里我推荐使用google-analytics，使用方法也非常简单，可以参考http://www.google.com/analytics/，主要是以下几步：

1. 载入google-analytics lib
   
   [javascript]  view plain copy

   1. <script type="text/javascript">  
   2.     var _gaq = _gaq || [];  
   3.   
   4.     (function() {  
   5.       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;  
   6.       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  
   7.       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
   8.     })();  
   9. </script>  
2. 绑定相关事件，收集数据
   
   [javascript]  view plain copy

   1. $('[data-role=page]').live('pageshow', function (event, ui) {  
   2.     try {  
   3.         _gaq.push(['_setAccount', 'YOUR_GA_ID']);  
   4.   
   5.         hash = location.hash;  
   6.   
   7.         if (hash) {  
   8.             _gaq.push(['_trackPageview', hash.substr(1)]);  
   9.         } else {  
   10.             _gaq.push(['_trackPageview']);  
   11.         }  
   12.     } catch(err) {  
   13.   
   14.     }  
   15.   
   16. });  
3. 查看统计数据
   

7）Mobile UI设计的最佳实践

Mobile UI设计与桌面程序或网页有很大不同，需要多学习一些最佳实践，这里我推荐两个非常好的资源：

• Apple HIG: http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
• Google IO

JQuery mobile有些仿制IOS的风格，因此非常推荐参考一下Apple HIG，里面很系统地讲到各种有关UI方面的细节。另外Google IO也有很多mobile UI开发可以借鉴的最佳实践，只不过Google IO都在Youbube上，需要翻墙才能看。