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

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

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

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

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

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

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

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

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

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

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

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

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

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

在公眾號(hào)「小米開(kāi)放平臺(tái)」當(dāng)天的推送文章中，我們可以看到這樣的段落：

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

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

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

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

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

一、入門(mén)式

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

從這句話中我們可以明確兩個(gè)點(diǎn)：

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

2. 可以用前端經(jīng)驗(yàn)去開(kāi)發(fā)

如果你有過(guò)前端的開(kāi)發(fā)經(jīng)驗(yàn)，來(lái)做快應(yīng)用，會(huì)很快，當(dāng)然如果你有開(kāi)發(fā)經(jīng)驗(yàn)，做快應(yīng)用，也很快，快應(yīng)用的入門(mén)門(mén)檻不高。

如果你是一個(gè)前端小白，也可以通過(guò)看官網(wǎng)來(lái)入門(mén)的，官網(wǎng)地址在 https://doc.quickapp.cn/

這里我來(lái)簡(jiǎn)單說(shuō)一下入手開(kāi)發(fā)快應(yīng)用的步驟

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

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

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

二、進(jìn)入正題

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

界面布局其實(shí)就是兩大塊：

1. 樣式：修飾頁(yè)面

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

三、樣式部分

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

1.盒模型

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

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

2.長(zhǎng)度單位

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

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

設(shè)計(jì)稿1px / 設(shè)計(jì)稿基準(zhǔn)寬度 = 框架樣式1px / 項(xiàng)目配置基準(zhǔn)寬度

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

3.選擇器

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

舉例說(shuō)明一下：

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

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

再舉一個(gè)例子

比如我們?cè)陂_(kāi)發(fā)中經(jīng)常碰到  “文本不能超過(guò)2行，超過(guò)2行，用省略號(hào)表示” 這樣的需求。

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

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

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

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

1）用什么布局？ 

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

組件（標(biāo)簽）分為幾大類(lèi)：

1. 容器組件

2. 基礎(chǔ)組件

3. 表單組件

4. 媒體組件

5. 畫(huà)布組件

6. 其他組件

7. 第三方組件

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

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

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

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

3. a的子組件：span

4. text的子組件：a 和span

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

這塊相對(duì)來(lái)說(shuō)，比html5縮水了不少。同時(shí)也說(shuō)明，快應(yīng)用入門(mén)門(mén)檻不高，非常適合開(kāi)發(fā)，省時(shí)省力。

2）怎么布局？

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

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

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

flex布局這塊，主要弄清楚2個(gè)核心概念：主軸和交叉軸；容器和項(xiàng)目

1）主軸和交叉軸

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

2）容器和項(xiàng)目

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

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

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