App can入门

Posted on 2014-04-21 16:49 潘小博1992 阅读(2086) 评论(0) 编辑收藏举报

主干

主干可以认为是整个页面的整体框架布局

上图是截取与ZAKER(原生开发)、正益无线(HTML5开发)、ZAKER微博界面(原生开发)和HTML5中国(HTML5开发)。参考上述界面我们看到大部分应用的页面都遵循标题+内容+底部栏的布局方式。AppCan UI2.0提供了简单的布局架构模板来适配这种布局。

模板代码中我们可以看到默认存在index.html和index_content.html两个文件。我们通过对这两个文件的分析来讲解AppCan UI2.0推荐的应用开发模式。index.html文件分为三部分HEAD、BODY、SCRIPT。

HEAD部分：

[javascript] view plain copy print ?

<head>
<title></title>6
<meta charset='utf-8'>
<meta name='viewport' content='target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'<
<link rel='stylesheet' href='css/ui-base.css'>
<link rel='stylesheet' href='css/ui-box.css'>
<link rel='stylesheet' href='css/ui-color.css'>
<link rel='stylesheet' href='css/ui-res.css'>
<script src='js/zy_control.js'>
</script<
<script src='js/zy_click.js'>
</script>
</head>

<head>
<title></title>6
<meta charset='utf-8'>
<meta name='viewport' content='target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'<
<link rel='stylesheet' href='css/ui-base.css'>
<link rel='stylesheet' href='css/ui-box.css'>
<link rel='stylesheet' href='css/ui-color.css'>
<link rel='stylesheet' href='css/ui-res.css'>
<script src='js/zy_control.js'>
</script<
<script src='js/zy_click.js'>
</script>
</head>

这一部分定义了网页引用的CSS和JS文件。上面代码中ui-base.css代表基础类文件，ui-box.css是弹性盒子封装类文件，ui-color是色彩基础类文件。zy_control.js是默认控件和网页需要的一些默认功能支持类。zy_click.js是Click事件模拟类，用于替代默认的onclick事件(手机中onclick响应较慢使应用体验性差)。

BODY部分：

[javascript] view plain copy print ?

<body class='um-vp c-wh' ontouchstart>
<div id='page_0' class='up ub ub-ver' tabindex='0'>
<div id='header' class='uh c-org c-m1 t-wh'>
<h1 class='ut ulev0 ut-s tx-c' tabindex='0'>AppCan</h1>
</div>
<div id='content' class='ub-f1 tx-l t-bla ub-img6 res10'>
</div>
<div id='footer' class='uf c-m2 c-bla t-wh'>
<h1 class='ut ulev-2 tx-c' tabindex='0'>(c) Copyright 3G2WIN and others 2011.
<br>
All rights reserved.</h1>
</div>
</div>
</body>

<body class='um-vp c-wh' ontouchstart>
<div id='page_0' class='up ub ub-ver' tabindex='0'>
<!--header开始-->
<div id='header' class='uh c-org c-m1 t-wh'>
<h1 class='ut ulev0 ut-s tx-c' tabindex='0'>AppCan</h1>
</div>
<!--header结束--> <!--content开始-->
<div id='content' class='ub-f1 tx-l t-bla ub-img6 res10'>
</div>
<!--content结束--> <!--footer开始-->
<div id='footer' class='uf c-m2 c-bla t-wh'>
<h1 class='ut ulev-2 tx-c' tabindex='0'>(c) Copyright 3G2WIN and others 2011.
<br>
All rights reserved.</h1>
</div>
<!--footer结束-->
</div>
</body>

Body部分定义了一个页面page_0，这个页面的高度为屏幕高度(up)，使用弹性盒子布局(ub)，它的子元素纵向排列(ub-ver)。这个页面中包含header、content和footer三个区域。

header和footer部分是一个DIV，是一个定高的区域(通过内容撑开)。content是一个弹性区域，它会占满page_0中除了header和footer外的区域。如果header和footer的高度变化，content的高度也会随之变化。但是这种布局当内容区域有内容时会引起整个content的高度撑高，由于大部分移动终端都不支持DIV的内部区域滚动，这回造成整个页面能够被拖动，这是与我们要求不符的。我们通过SCRIPT区域的代码来处理这个问题。

SCRIPT部分：

[javascript] view plain copy print ?

<script>
zy_init();
window.uexOnload = function(type){
if (!type) {
zy_con('content', 'index_content.html', 0, $$('header').offsetHeight);
}
window.onorientationchange=window.onresize=function()
{
zy_resize('content',0,$$('header').offsetHeight);
}
}
</script>

<script>
zy_init();
window.uexOnload = function(type){
if (!type) {
zy_con('content', 'index_content.html', 0, $$('header').offsetHeight);
}
window.onorientationchange=window.onresize=function()
{
zy_resize('content',0,$$('header').offsetHeight);
}
}
</script>

上述代码中zy_init函数用于在模拟器中实现字体的自动适配。在手机中无作用。

window.uexOnload事件用于在AppCan中间件扩展对象加载完成后调用。在这个函数里，我们调用了封装在zy_control.js里的zy_con函数创建了一个浮动VIEW。这个View与content的区域保持同样的大小，位置也与content区域的位置保持相同。这个View显示的内容来自于index_content.html页面。也就是说，我们的index.html页面中content区域其实并不包含内容，它只起到一个定位的作用，为浮动View提供定位支持。

window.onorientationchange=window.onresize这行代码为iOS和Andorid平台的屏幕旋转事件指定了回调函数，当发生屏幕旋转时，会调用这个函数，此时我们调用封装的zy_resize接口参照content区域的新的高宽位置重新定位了浮动窗口。

更方便的是，开发者可以为content区域开发不同的content页面，可以根据的操作随时使用zy_con接口变更content区域的页面内容来实现不同的功能。例如可以配合下方的导航条控实现功能切换。

AppCan UI2.0框架推荐这种方式来编写页面，相对于UI1.0框架来说，处理逻辑更加简单,适配更加方便，并且在一个窗口中，并不是只允许包含一个浮动窗口，我们可以创建多个浮动窗口来完成不同的功能，轻松的实现功能的拆分，减少在一个页面中实现众多功能引起的逻辑问题。同时这种方式可以轻松的实现固定的背景图片。上述代码中，我们看到我们为content区域指定了一张背景图，而我们在index_content.html没有指定背景色，这样显示index_content.html网页时会显示出盖在在下方的content区域。由于浮动窗口是独立的窗口，因此它的页面滚动并不会影响下方content区域。当然这种布局我们使用iscroll等JS包也可以很方便的实现，但是在很多Android手机上，由于性能原因体验相对于原生应用还是会有很大差距。

AppCan UI2.0框架支持浮动窗口的弹动效果，开发者可以很方便的实现弹动效果，在index_content.html中我们已经默认提供了范例代码。接着我们看一下实际的内容区域网页index_content.html。这个页面与index.html一样同样分为三个部分HEAD、BODY、SCRIPT。HEAD部分与index.html的HEAD部分一样没什么区别。BODY部分开发者可以根据需求添加列表、表单、地图等功能实现。SCRIPT部分的代码我们看一下：

[javascript] view plain copy print ?

<script>
zy_init();
window.uexOnload=function(type)
{
if(!type){
uexWindow.setBounce('1');
uexWindow.showBounceView('0','#FFF','0');
uexWindow.showBounceView('1','#FFF','0');
}
}
</script>

<script>
zy_init();
window.uexOnload=function(type)
{
if(!type){
uexWindow.setBounce('1');
uexWindow.showBounceView('0','#FFF','0');
uexWindow.showBounceView('1','#FFF','0');
}
}
</script>

上述代码中zy_init()用于在模拟器状态下实现字体自适配，手机上无作用。uexOnload事件定义了浮动窗口AppCan扩展加载后的回调函数。当加载成功后，我们会调用AppCan弹动接口为浮动窗口添加弹动效果，并设定弹动背景色。大家可以使用范例应用来体验一下。

旁支

在完成页面后，我们需要对页面中的元素进行布局。使用弹性盒子，将使这个布局工作的难度降低很多。我们定一个目标,如下图：

我们可以对他进行如下区域划分。

左侧定宽图片区域
- 图片子区域
右侧文字区域
- 文字正文区域
- 文章属性区域

我们在index_content.html种进行布局，代码如下：

潘小博1992

导航

公告

App can入门

主干

旁支

皮肤-元素的美化

大小位置形状控制

色彩控制

资源控制

UI2.0中的控件

容器

编辑框

搜索框

输入域

下拉列表控件

导航栏

单选框和复选框

列表控件

开关按钮