淺談跨平臺移動應用開發AppCan 移動端UI2.0框架

咱們會找到很是多的關於移動端的開發框架，諸如JqueryMobile，JQTouch，Sencha等，都是專門爲移動端構建前端用的。開發者學起這些框架來，也很是的方便和快捷，可能你們用到比較多的是Jquery，這在開發PC網站的時候，不少前端開發人員很是喜歡用的一個js框架，但其實Jquery還有針對PC網站的Jquery UI以及針對移動端的JqueryMobile；Sencha也是你們很是常見的，不少PC網站前端是用Ext開發的，其實Sencha就是Ext在移動端的版本。這兩個常見的移動終端框架，都須要一個很是大的JS庫，這裏所說的「大」是根據在終端上運行效率來考量的。好比，在android的設備上，運行幾十K或上百K的js庫，明顯會比較卡頓。所以，隨着終端設配的性能提高以及系統的性能調優，在將來，JqueryMobile和Sencha會具備它們在PC網站前端開發一樣的知名度和使用率。然而，咱們今天要討論的是在現階段，在可預見的將來幾年裏，終端設備特別是android設備性能還達不到要求的狀況下，如何作好移動端的web開發。

瞭解過AppCan的開發者，可能知道UI1.0框架跟JqueryMobile的UI很是的像，實際上是對的，AppCan 的UI1.0框架是在JqueryMobile的基礎上，去掉了繁重的JS庫，摘出其css樣式做爲一個界面設計基礎。這確實可以給開發帶來很大的便利性，然而，通過幾個月的項目開發後發現，即便去掉了JS庫，去作開發，也有不少的不方便：代碼太過冗餘，一個按鈕要很是多的代碼來拼裝；class類過多，形成css屬性優先級相互覆蓋；不利於擴展，耦合性過高。所以，根據項目經驗，AppCan從新梳理並採用css3的「彈性盒子模型」做爲設計理念，推出了UI2.0框架。框架設計理念爲「基石+骨架」，其中骨架包括「主幹+皮膚+旁支」，這種設計，比較符合「響應式web設計」理念，同時又具有擴展性。每一個class 類都很明確本身作的事，經過和其它class類組合，可以構建複雜的效果。若是開發者有興趣，能夠研究下AppCan UI2.0框架，這裏以一個簡單的例子，說明如何方便快捷的使用UI2.0框架。

好比要製做以下一張界面：

這裏要求開發者須要簡單的PS（photoshop）技術，以及簡單的Html+css(div+css)佈局技術。

• 拿到一張psd圖，先把對應的所須要的圖片元素經過ps切出來：

• 其次，利用AppCan UI2.0框架搭建頁面雛形：

• 其次，利用AppCan UI2.0框架搭建頁面雛形：
• 替換下導航樣式：

在ui-tab.css文件中，加上以下代碼：

input[type="radio"] + div>div.tp-info1{ background: url(res-apple/user_icon.png) 50% 50% no-repeat; } input[type="radio"]:checked + div>div.tp-info1{ background: url(res-apple/user_h_icon.png) 50% 50% no-repeat; } input[type="radio"] + div>div.tp-info2{ background: url(res-apple/network_icon.png) 50% 50% no-repeat; } input[type="radio"]:checked + div>div.tp-info2{ background: url(res-apple/network_h_icon.png) 50% 50% no-repeat; } input[type="radio"] + div>div.tp-info3{ background: url(res-apple/subject_icon.png) 50% 50% no-repeat; } input[type="radio"]:checked + div>div.tp-info3{ background: url(res-apple/subject_h_icon.png) 50% 50% no-repeat; } input[type="radio"] + div>div.tp-info4{ background: url(res-apple/attention_icon.png) 50% 50% no-repeat; } input[type="radio"]:checked + div>div.tp-info4{ background: url(res-apple/attention_h_icon.png) 50% 50% no-repeat; } input[type="radio"] + div>div.tp-info5{ background: url(res-apple/more_icon.png) 50% 50% no-repeat; } input[type="radio"]:checked + div>div.tp-info5{ background: url(res-apple/more_h_icon.png) 50% 50% no-repeat; } 

• 替換標題背景：  
  

在ui-color.css文件中，加上以下代碼：

.c-my1 { background-image:url('images/top_bg.png'); }

• 替換標題右側按鈕樣式：

在ui-btn.css文件中，加上以下代碼：

.btn-n1 { background-image:url('images/refurbish_icon.png'); background-repeat:no-repeat; -webkit-background-size:cover; background-position:center; padding:0 0.4em; min-height:2.2em; }

標題導航代碼以下：

<div id="header" class="uh c-my1 c-m1 t-wh ub"> <div class="umw4" ontouchstart="zy_touch()" onclick=""> <!--插入按鈕控件--> </div> <h1 class="ut ub-f1 ulev0 ut-s tx-c" tabindex="0">AppCan</h1> <div class="umw4" ontouchstart="zy_touch()" onclick=""> <!--插入按鈕控件--> <!--按鈕開始--> <div class="btn btn-r btn-n1 ub ub-ac" style="width:2em;height:2em;"> </div> <!--按鈕結束--> </div> </div>

• 替換標題下tab標籤樣式：

在ui-color.css文件中，加上以下代碼：

.c-bla1 { /* 用於替換背景色 */ background-color:#333; } .c-red1 { /* 用於替換選中背景色 */ background-color:#B11D2B; }

在ui-base.css或其它css文件中，加上以下代碼：

.ui-new-right-icon { /* 表示右箭頭 */ display:inline-block; background: url(images/right_icon.png) no-repeat; margin:0.7em 0.5em; background-size: .5em .5em; width: .5em; height: .5em; } 

其tab導航代碼以下：

<!--塊容器開始--> <div class="ub uba b-gra c-bla1 t-wh uc-a1 "> <div class="ubr b-gra ub-f1 uinn c-red1 uc-l1"> 條目1 </div> <div class=" b-gra ub-f1 uinn "> 條目2 </div> <div class=" ub-f1 b-gra uinn uc-r1"> 條目3 </div> <div class="ub-f1 uinn uc-r1"> 條目3 </div> <span class="ui-new-right-icon"></span> </div> <!--塊容器結束-->

• 替換列表樣式：

在ui-base.css或其它css文件中，加上以下代碼：

.ui-icon-link { /* 藍色圓圈 */ background: -webkit-gradient(linear, 0 0, 0 100%, from(#4ba4d1), to(#1d79ab)) !important; background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(75,164,209,1)), to(rgba(29,121,171,1))) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.5); width:1em; min-width:1em; height:1em; -webkit-border-radius: 0.5em; background-size: 1em 1em; } .ui-icon-hover { /* 紅色圓圈 */ background: -webkit-gradient(linear, 0 0, 0 100%, from(#f8441a), to(#d6190b)) !important; background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(248,68,26,1)), to(rgba(214,25,11,1))) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.5); width:1em; min-width:1em; height:1em; -webkit-border-radius: 0.5em; background-size: 1em 1em; }

列表代碼以下：

<!--列表開始--> <div class="uc-a uba b-gra c-wh us "> <ul ontouchstart="zy_touch('btn-act')" class="uc-t c-m2 ubb ub b-gra t-bla ub-ac lis"> <li class="ui-icon-link"></li> <ul class="ub-f1 ub ub-ver" style="margin-left:0.5em;"> <li class="ulev1"> 標題名標題名標題名標題名標題名標題名標題名標題名 </li> <ul class="ub ub-ac t-gra ulev-2"> <li class="ub-f4"></li> <li class="ub-f1">評論數</li> </ul> </ul> </ul> <ul ontouchstart="zy_touch('btn-act')" class=" ub ubb b-gra c-m2 t-bla ub-ac lis"> <li class="ui-icon-link"></li> <ul class="ub-f1 ub ub-ver" style="margin-left:0.5em;"> <li class="ulev1">標題名標題名標題名標題名標題名標題名標題名標題名 </li> <ul class="ub ub-ac t-gra ulev-2"> <li class="ub-f4"></li> <li class="ub-f1">評論數</li> </ul> </ul> </ul> <ul ontouchstart="zy_touch('btn-act')" class="uc-b c-m2 ub t-bla ub-ac lis"> <li class="ui-icon-hover"></li> <ul class="ub-f1 ub ub-ver" style="margin-left:0.5em;"> <li class="ulev1">標題名標題名標題名標題名標題名標題名標題名標題名 </li> <ul class="ub ub-ac t-gra ulev-2"> <li class="ub-f4"></li> <li class="ub-f1">評論數</li> </ul> </ul> </ul> </div> <!--列表結束--> 

 

最後頁面效果以下：

利用AppCan UI2.0框架，能夠很方便的構建出一個定製界面，開發者只需掌握少量的web開發知識，就可以設計移動端web設計。固然，若是要作的精美，還須要精通css技術，去細調裏面的樣式，包括css3的陰影，漸變，圓角等，也包括css3的Animations和Transitions動畫屬性。