小米快應(yīng)用中心具備傳統(tǒng)APP完整的應(yīng)用體驗，無需安裝、即點即用，快應(yīng)用中心集合所有快應(yīng)用，便于節(jié)省手機的實用空間性，非常的便捷簡單。

小米快應(yīng)用中心介紹

快應(yīng)用是基于手機硬件平臺的新型應(yīng)用形態(tài)，它根植于rom級別，具備傳統(tǒng)app完整的應(yīng)用體驗。第三方應(yīng)用基于這種形態(tài)可以更為直接的觸達用戶，為用戶帶來高效愉快的體驗�？鞈�(yīng)用是基于手機硬件平臺的新型應(yīng)用形態(tài)，它根植于rom級別，具備傳統(tǒng)app完整的應(yīng)用體驗。第三方應(yīng)用基于這種形態(tài)可以更為直接的觸達用戶，為用戶帶來高效愉快的體驗。

小米快應(yīng)用中心特色

1、免安裝應(yīng)用設(shè)計，不需要安裝占用你的手機內(nèi)存，在線即可操作。

2、多樣化的應(yīng)用分類方式，可以按照自己的需求進行分類管理。

3、只需安裝一次即可支持所有快應(yīng)用，操作上面更加的具有可擴展性。

4、添加到桌面的app，隨時可以進行搜索尋找，方便管理使用記錄。

小米快應(yīng)用中心說明

1.快應(yīng)用是基于手機硬件平臺的新型應(yīng)用形態(tài)，標準是由主流手機廠商組成的快應(yīng)用聯(lián)盟聯(lián)合制定。

2.快應(yīng)用標準的誕生將在研發(fā)接口、能力接入、開發(fā)者服務(wù)等層面建設(shè)標準平臺，以平臺化的生態(tài)模式對個人開發(fā)者和企業(yè)的開發(fā)者全品類開放。

3.快應(yīng)用具備傳統(tǒng)APP完整的應(yīng)用體驗，無需安裝、即點即用。

快應(yīng)用有什么用？

在公眾號「小米開放平臺」當天的推送文章中，我們可以看到這樣的段落：

快應(yīng)用使用前端技術(shù)棧開發(fā)，原生渲染，同時具備HTML5頁面和原生應(yīng)用的雙重優(yōu)點。用戶無需下載安裝，即點即用，享受原生應(yīng)用的性能體驗。

這個說法是不是似曾相識?沒錯，這些都是微信小程序的賣點：同樣使用前端技術(shù)棧，同樣具備HTML5與Native App的雙重優(yōu)勢，用戶使用微信小程序和快應(yīng)用，也皆可以「即點即用」。

回過頭看看同樣擁有這些賣點的支付寶小程序吧。對比微信與支付寶兩個小程序平臺的開發(fā)文檔，除了一些特定接口因業(yè)務(wù)需要而有所差異之外，二者的接口、組件相似度極高;實際上手中，開發(fā)者也完全可以做到將小程序幾乎零成本地從微信移植到支付寶。

因此，快應(yīng)用極有可能與支付寶一樣，使用與微信小程序看齊的開發(fā)標準，盡最大可能，降低開發(fā)者的開發(fā)門檻，進一步吸引更多小程序，特別是微信小程序，移植到快應(yīng)用平臺。

如何學透快應(yīng)用界面開發(fā)？

一、入門式

從官網(wǎng)的介紹可以知道，快應(yīng)用是以前端技術(shù)棧作為開發(fā)基礎(chǔ)，渲染是Native來渲染的。

從這句話中我們可以明確兩個點：

1. 快應(yīng)用不是Html5

2. 可以用前端經(jīng)驗去開發(fā)

如果你有過前端的開發(fā)經(jīng)驗，來做快應(yīng)用，會很快，當然如果你有開發(fā)經(jīng)驗，做快應(yīng)用，也很快，快應(yīng)用的入門門檻不高。

如果你是一個前端小白，也可以通過看官網(wǎng)來入門的，官網(wǎng)地址在 https://doc.quickapp.cn/

這里我來簡單說一下入手開發(fā)快應(yīng)用的步驟

1. 對著文檔安裝好環(huán)境，熟悉hap-toolkit的使用

2. 對著文檔看下我們提供的教程部分

3. 看看官網(wǎng)提供的sample 的例子

二、進入正題

本文主要講解快應(yīng)用的界面布局

界面布局其實就是兩大塊：

1. 樣式：修飾頁面

2. 結(jié)構(gòu)（骨架）

三、樣式部分

快應(yīng)用的樣式部分和Html5相比，進行了一些縮減，但是也增加了一些特有的。

1.盒模型

框架使用border-box模型，暫不支持content-box模型與box-sizing屬性。

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

2.長度單位

快應(yīng)用僅僅支持px和% 兩種單位，和web不一樣，px是參考項目基準寬度，在manifest的config.designWidth 可以動態(tài)配置，默認寬度是750.

所以這里我們會有一個設(shè)計稿寬度和框架樣式的一個轉(zhuǎn)換關(guān)系。

設(shè)計稿1px / 設(shè)計稿基準寬度 = 框架樣式1px / 項目配置基準寬度

一般我們推薦設(shè)計稿的寬度為750，那么開發(fā)者，可以按照設(shè)計稿中的像素進行開發(fā)。

3.選擇器

目前支持的僅有5種：id，class，tag，并列，后代。

舉例說明一下：

在快應(yīng)用里面用這些基本的選擇器就可以了，CSS3里面一些比較新的選擇器目前暫不支持。

強調(diào)一句，如果使用后代選擇器，不要嵌套層級太多了。

再舉一個例子

比如我們在開發(fā)中經(jīng)常碰到  “文本不能超過2行，超過2行，用省略號表示” 這樣的需求。

在快應(yīng)用中是用lines 屬性，在html5里面 這個是-webkit-line-clamp 這個屬性（僅webkit支持的，未列入草案）

因此，習慣了之前前端開發(fā)的同學，這種布局方式，不要在快應(yīng)用中使用了。

四、結(jié)構(gòu)部分

這部分需要明確兩個東西：用什么布局、怎么布局。

1）用什么布局？ 

用組件（標簽）進行布局，快應(yīng)用提供了一些組件，供開發(fā)者使用。

組件（標簽）分為幾大類：

1. 容器組件

2. 基礎(chǔ)組件

3. 表單組件

4. 媒體組件

5. 畫布組件

6. 其他組件

7. 第三方組件

需要說明一點的是，這里的標簽寫法和html5 寫法類似，但是他們兩者沒有任何關(guān)系，含義也不一樣【至于什么是一樣，讀者可以自己琢磨】。

這里我大致總結(jié)了下標簽與html5中不一致的部分，方便開發(fā)者進行開發(fā)。

1. 顯示文本放置于text組件, 不能放置于div組件

2. 基礎(chǔ)組件中：a, text 組件支持內(nèi)部嵌套 組件，其他不支持

3. a的子組件：span

4. text的子組件：a 和span

如果想查閱組件可以參考 https://doc.quickapp.cn

這塊相對來說，比html5縮水了不少。同時也說明，快應(yīng)用入門門檻不高，非常適合開發(fā)，省時省力。

2）怎么布局？

前面提到過，快應(yīng)用不支持浮動float，絕對定位absolute，相對定位relative，所以不要嘗試在快應(yīng)用采用這種布局方式。

快應(yīng)用默認采用的是彈性盒（flex）布局方式。

但是快應(yīng)用的flex布局和html5 布局也有一些不同，這里要知道一些不同的地方。

flex布局這塊，主要弄清楚2個核心概念：主軸和交叉軸；容器和項目

1）主軸和交叉軸

這里的是一致的，主軸和交叉軸可以根據(jù)設(shè)置，可以交換的。

2）容器和項目

快應(yīng)用的組件中，有容器這個組件分類，但是僅僅支持三個標簽（div，list-item，tabs）。

換一句話說，就是僅僅在這些元素上才支持flex布局，其他的元素上是不支持的。因此不要在其他元素上，比如a標簽上寫display：flex，這些代碼也是不生效的。但是在html5里面這是可以的。

項目就是容器內(nèi)的子組件了。當然也支持嵌套使用。