WeX5 開發(fā)原理

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

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

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

1. 應(yīng)用

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

2. 頁面

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

3. 組件

    組件是將HTML標簽進行封裝，實現(xiàn)更強能力的可視化對象。組件有屬性、事件、方法、操作和樣式等。

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

圖1-13 組件分類

4. 服務(wù)

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

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

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