這篇文章適合快速開發快應用，提高效率，不管你是資深的前端開發，還是剛入門快應用開發的菜鳥，本文都值得你一讀。通過閱讀本文，我相信一定能節省你的時間，少走很多彎路，將主要的精力放在專案的開發中來。

一、入門式

從官網的介紹可以知道，快應用是以前端技術棧作為開發基礎，渲染是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.   }</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版本）。

聯絡我們：

快應用官方訂閱號：