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

快到碗里来

这篇文章适合快速开发快应用，提高效率，不管你是资深的前端开发，还是刚入门快应用开发的菜鸟，本文都值得你一读。通过阅读本文，我相信一定能节省你的时间，少走很多弯路，将主要的精力放在项目的开发中来。 一、入门式 从官网的介绍可以知道，快应用是以前端技术栈作为开发基础，渲染是Native来渲染的。 从这句话中我们可以明确两个点：

• 快应用不是Html5
• 可以用前端经验去开发

如果你有过前端的开发经验，来做快应用，会很快，当然如果你有开发经验，做快应用，也很快，快应用的入门门槛不高。 如果你是一个前端小白，也可以通过看官网来入门的，官网地址在 https://doc.quickapp.cn/ 这里我来简单说一下入手开发快应用的步骤

• 对着文档安装好环境，熟悉hap-toolkit的使用
• 对着文档看下我们提供的教程部分
• 看看官网提供的https://github.com/quickappcn/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，并列，后代。

举例说明一下：

快应用支持的仅有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. }</font>

复制代码

在快应用里面用这些基本的选择器就可以了，CSS3里面一些比较新的选择器目前暂不支持。 强调一句，如果使用后代选择器，不要嵌套层级太多了。 再举一个例子，比如我们在开发中经常碰到 “文本不能超过2行，超过2行，用省略号表示” 这样的需求。 在快应用中是用lines 属性，在html5里面 这个是-webkit-line-clamp 这个属性（仅webkit支持的，未列入草案） 他们的写法分别是： 在快应用中

1. lines: 2;
2. text-overflow:ellipsis;</font>

复制代码

在html5中

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

复制代码

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

1. float:left;
2. position:relative
3. position:absolute;</font>

复制代码

因此，习惯了之前前端开发的同学，这种布局方式，不要在快应用中使用了。 四、结构部分 这部分需要明确两个东西：用什么布局、怎么布局 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. <font size="2" color="#000000">flex-direction: column;
2. padding:20px;</font>

复制代码

和

1. <font size="2" color="#000000">display: flex;
2. flex-direction: column;
3. padding:20px;</font>

复制代码

都是生效的。 其实就是可以省略掉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 最后，感谢你的阅读，有啥问题可以给我留言。

diydyq

赞！

欧巴宾

这叫什么事啊

这个有点6️⃣啊

临风听暮蝉

总结的可以

dcxj168

厉害了 谢谢楼主的分享 ，不过现在1050 flex布局好多都支持了