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

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

 

一、入门式

从官网的介绍可以知道，快应用是以前端技术栈作为开发基础，渲染是Native 来渲染的。

从这句话中我们要明确几个点：

1.快应用不是Html5

2.可以用前端经验去开发

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

如果你是一个前端小白，也可以通过看官网来入门的，开发文档地址：https://doc.quickapp.cn/

 

这里我来简单说一下入手开发快应用的步骤

1.对着文档安装好环境，熟悉hap-toolkit的使用

2.对着文档看下我们提供的教程部分

3.看看官网提供的sample 的例子

    https://github.com/quickappcn/sample

 

二、进入正题

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

界面布局其实就是两大块

1.样式：修饰页面

2.结构（骨架）

 

三、样式部分

快应用的样式部分和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，并列，后代。

举例说明一下：

快应用支持的仅有5种：id，class，tag，并列，后代。

举例说明一下：

1. /* tag选择器 */
2.   span {
3.    color: #000;
4.   }
5.   /* class选择器（推荐） */
6.   .title {
7.    color: #00FF00;
8.   }
9.   /* ID选择器 */
10.   #title {
11.    color: #00A000;
12.   }
13.   /* 并列选择 */
14.   .title, #title {
15.    font-weight: bold;
16.   }
17.   /* 后代选择器 */
18.   .tutorial-page text {
19.    font-size: 30px;
20.   }
21.   /* 直接后代选择器 */
22.   .tutorial-page > text {
23.     text-decoration: underline;
24.   }​

在快应用里面用这些基本的选择器就可以了，CSS3里面一些比较新的选择器目前暂不支持。

强调一句，如果使用后代选择器，不要嵌套层级太多了。

 

再举一个例子

比如我们在开发中经常碰到  “文本不能超过2行，超过2行，用省略号表示” 这样的需求。
在快应用中是用lines 属性，在html5里面 这个是-webkit-line-clamp 这个属性（仅webkit支持的，未列入草案）

 

他们的写法分别是：

在快应用中

1. lines: 2;
2. text-overflow:ellipsis;

在html5中

1. overflow:hidden;
2. text-overflow:ellipsis;
3. display:-webkit-box;
4. -webkit-box-orient:vertical;
5. -webkit-line-clamp:2;

再比如在快应用里面，不支持浮动，绝对定位，相对定位。
因此以下代码在快应用是不生效的。

1. float:left;
2. position:relative
3. 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个核心概念：主轴和交叉轴；容器和项目

（1）主轴和交叉轴

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

（2）容器和项目
快应用的组件中，有容器这个组件分类，但是仅仅支持三个标签（div，list-item，tabs）。
换一句话说，就是仅仅在这些元素上才支持flex布局，其他的元素上是不支持的。因此不要在其他元素上，比如a标签上写display：flex，这些代码也是不生效的。但是在html5里面这是可以的。

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

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

1. flex-direction: column;
2. padding:20px;

和

1. display: flex;
2. flex-direction: column;
3. 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

---

联系我们：

快应用官方网站：https://www.quickapp.cn/

快应用论坛：https://bbs.quickapp.cn/

快应用官方订阅号：