酷应用

30 分钟带你学透快应用界面开发的最正确姿势

百家作者：CSDN 2018-10-24 08:03:51

这篇文章适合快速开发快应用，提高效率，不管你是资深的前端开发，还是刚入门快应用开发的菜鸟，本文都值得你一读。通过阅读本文，我相信一定能节省你的时间，少走很多弯路，将主要的精力放在项目的开发中来。

入门式

从官网的介绍可以知道，快应用是以前端技术栈作为开发基础，渲染是Native来渲染的。
从这句话中我们可以明确两个点：

快应用不是HTML5；
可以用前端经验去开发。

如果你有过前端的开发经验，来做快应用，会很快，当然如果你有开发经验，做快应用，也很快，快应用的入门门槛不高。

如果你是一个前端小白，也可以通过看官网来入门的，官网地址在 https://doc.quickapp.cn/
这里我来简单说一下入手开发快应用的步骤：

对着文档安装好环境，熟悉hap-toolkit的使用；
对着文档看下我们提供的教程部分；
看看官网提供的Sample的例子。

进入正题

本文主要讲解快应用的界面布局

界面布局其实就是两大块：

样式：修饰页面；
结构（骨架）。

样式部分

快应用的样式部分和HTML5相比，进行了一些缩减，但是也增加了一些特有的。

1.盒模型

框架使用border-box模型，暂不支持content-box模型与box-sizing属性。

因此，高度height和宽度width都包括padding和border。

2.长度单位

快应用仅仅支持px和%两种单位，和Web不一样，px是参考项目基准宽度，在manifest的config.designWidth可以动态配置，默认宽度是750。

所以这里我们会有一个设计稿宽度和框架样式的一个转换关系。

设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度。

一般我们推荐设计稿的宽度为750，那么开发者，可以按照设计稿中的像素进行开发。

3.选择器

目前支持的仅有5种：ID、Class、Tag、并列、后代。

举例说明一下：

/* tag选择器 */
span {
color: #000;
}
/* class选择器（推荐） */
.title {
color: #00FF00;
}
/* ID选择器 */
#title {
color: #00A000;
}
/* 并列选择 */
.title, #title {
font-weight: bold;
}
/* 后代选择器 */
.tutorial-page text {
font-size: 30px;
}
/* 直接后代选择器 */
.tutorial-page > text {
text-decoration: underline;
}

在快应用里面用这些基本的选择器就可以了，CSS3里面一些比较新的选择器目前暂不支持。强调一句，如果使用后代选择器，不要嵌套层级太多了。

再举一个例子：比如我们在开发中经常碰到 “文本不能超过2行，超过2行，用省略号表示” 这样的需求。

在快应用中是用lines属性，在HTML5里面这个是-webkit-line-clamp这个属性（仅Webkit支持的，未列入草案）。

它们的写法分别是：

在快应用中：

lines: 2;
text-overflow:ellipsis;

在HTML5中：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

再比如在快应用里面，不支持浮动，绝对定位，相对定位。

因此以下代码在快应用是不生效的。

float:left;
position:relative
position:absolute;

因此，习惯了之前前端开发的同学，这种布局方式，不要在快应用中使用了。

结构部分

这部分需要明确两个东西：用什么布局、怎么布局。

1.用什么布局？

用组件（标签）进行布局，快应用提供了一些组件，供开发者使用。

组件（标签）分为几大类：

容器组件；
基础组件；
表单组件；
媒体组件；
画布组件；
其他组件；
第三方组件。

需要说明一点的是，这里的标签写法和HTML5写法类似，但是他们两者没有任何关系，含义也不一样（至于什么是一样，读者可以自己琢磨）。

这里我大致总结了下标签与HTML5中不一致的部分，方便开发者进行开发。

显示文本放置于Text组件, 不能放置于DIV组件；
基础组件中：a, text 组件支持内部嵌套组件，其他不支持；
a的子组件：span；
Text的子组件：a和span。

如果想查阅组件可以参考 https://doc.quickapp.cn

这块相对来说，比HTML5缩水了不少。同时也说明，快应用入门门槛不高，非常适合开发，省时省力。

2.怎么布局？

前面提到过，快应用不支持浮动float，绝对定位absolute，相对定位relative，所以不要尝试在快应用采用这种布局方式。

快应用默认采用的是弹性盒（Flex）布局方式。但是快应用的Flex布局和HTML5布局也有一些不同，这里要知道一些不同的地方。Flex布局这块，主要弄清楚2个核心概念：主轴和交叉轴；容器和项目。

a.主轴和交叉轴

这里的是一致的，主轴和交叉轴可以根据设置，可以交换的。

b.容器和项目

快应用的组件中，有容器这个组件分类，但是仅仅支持三个标签（DIV、list-item、Tabs）。

换一句话说，就是仅仅在这些元素上才支持Flex布局，其他的元素上是不支持的。因此不要在其他元素上，比如a标签上写display：flex，这些代码也是不生效的。但是在HTML5里面这是可以的。

项目就是容器内的子组件了。当然也支持嵌套使用。

需要说明一点的是，快应用默认Flex布局。以下两种代码：

flex-direction: column;
padding:20px;

和

display: flex;
flex-direction: column;
padding:20px;

都是生效的。

其实就是可以省略掉display：flex 这一行。但是作者推荐采用第二种写法，不要省略这行（为什么呢？因为现在转换工具在横行，保持兼容性，说不定哪天就把快应用的代码一键转成小程序了，一举两得啊，不用你再去开发小程序啦）。

最后用一个图来总结以下快应用Flex布局和HTML5的Flex布局一些差异（截止1020版本）。

参考资料：
1.https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2.https://doc.quickapp.cn/tutorial/framework/page-style-and-layout.html
3.https://doc.quickapp.cn/widgets/common-styles.html
4.https://doc.quickapp.cn/widgets/div.html
5.https://doc.quickapp.cn/framework/style-sheet.html

点击阅读原文，报名参加10月25日线上直播的快应用系列公开课第二期《快应用界面布局》，掌握如何快速开发快应用！