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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一、入門式

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

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

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

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

如果你有過前端的開發(fā)經(jīng)驗(yàn)，來做快應(yīng)用，會很快，當(dāng)然如果你有開發(fā)經(jīng)驗(yàn)，做快應(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 的例子

二、進(jìn)入正題

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

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

1. 樣式：修飾頁面

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

三、樣式部分

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

1.盒模型

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

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

2.長度單位

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

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

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

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

3.選擇器

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

舉例說明一下：

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

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

再舉一個例子

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

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

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

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

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

1）用什么布局？ 

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

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

1. 容器組件

2. 基礎(chǔ)組件

3. 表單組件

4. 媒體組件

5. 畫布組件

6. 其他組件

7. 第三方組件

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

這里我大致總結(jié)了下標(biāo)簽與html5中不一致的部分，方便開發(fā)者進(jìn)行開發(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)用默認(rèn)采用的是彈性盒（flex）布局方式。

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

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

1）主軸和交叉軸

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

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

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

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

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