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