使用H5開(kāi)發(fā)出來(lái)的App可以是混合型應(yīng)用（Hybrid App），也可以是Web的應(yīng)用（Web App）?；旌闲蛻?yīng)用安裝在iOS和安卓手機(jī)上，Web的應(yīng)用在微信中運(yùn)行。混合型應(yīng)用看上去是一個(gè)本地化應(yīng)用（NativeApp），其實(shí)里面只有一個(gè)UIWebView，就是包了個(gè)客戶端的殼，其實(shí)里面是H5的網(wǎng)頁(yè)，通過(guò)Cordova插件，使得App具備訪問(wèn)本地服務(wù)的能力，例如相機(jī)、錄音等等。

H5 App由前端頁(yè)面和后端服務(wù)構(gòu)成（如圖1-12），前端頁(yè)面包括頁(yè)面組件、頁(yè)面代碼、頁(yè)面樣式。在前端頁(yè)面中可以調(diào)用后端服務(wù)、可以調(diào)用設(shè)備API。

圖1-12 H5 App構(gòu)成

1. 應(yīng)用

一個(gè)應(yīng)用由多個(gè)頁(yè)面構(gòu)成。

2. 頁(yè)面

    一個(gè)頁(yè)面由描述HTML、代碼JS、樣式CSS三部分構(gòu)成。在頁(yè)面中即可以調(diào)用服務(wù)，實(shí)現(xiàn)訪問(wèn)數(shù)據(jù)庫(kù)等動(dòng)態(tài)能力；又可以調(diào)用本地設(shè)備API，實(shí)現(xiàn)調(diào)用設(shè)備硬件能力。WeX5將HTML標(biāo)簽封裝成組件，因此頁(yè)面的描述部分由多個(gè)組件構(gòu)成。

3. 組件

    組件是將HTML標(biāo)簽進(jìn)行封裝，實(shí)現(xiàn)更強(qiáng)能力的可視化對(duì)象。組件有屬性、事件、方法、操作和樣式等。

    一個(gè)頁(yè)面分為數(shù)據(jù)和展現(xiàn)兩個(gè)部分，組件也對(duì)應(yīng)分為數(shù)據(jù)組件和展現(xiàn)組件（如圖1-13）。使用數(shù)據(jù)組件存儲(chǔ)頁(yè)面中的數(shù)據(jù)；使用展現(xiàn)組件將頁(yè)面展現(xiàn)出來(lái)。數(shù)據(jù)組件和展現(xiàn)組件使用雙向數(shù)據(jù)綁定（Two-Way Data Binding）。數(shù)據(jù)源或綁定目標(biāo)對(duì)象的屬性的值發(fā)生改變時(shí)會(huì)互相通知，也就是界面的操作能實(shí)時(shí)反映到數(shù)據(jù),數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。

圖1-13 組件分類

4. 服務(wù)

服務(wù)即可以使用WeX5提供的BasS，也可以使用自定義的后端服務(wù)，更可以由云提供服務(wù)。

5. 設(shè)備硬件能力

    WeX5的混合模式底層基于Cordova/PhoneGap。Cordova提供了一組設(shè)備相關(guān)的API，通過(guò)這組API，移動(dòng)應(yīng)用能夠以JavaScript訪問(wèn)原生的設(shè)備功能，如攝像頭、麥克風(fēng)等。