浅谈跨平台移动应用开发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动画属性。