WeX5 開發(fā)原理

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

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

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

1. 應用

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

2. 頁面

    一個頁面由描述HTML、代碼JS、樣式CSS三部分構(gòu)成。在頁面中即可以調(diào)用服務，實現(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)兩個部分，組件也對應分為數(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. 服務

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

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

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