WeX5 開(kāi)發(fā)過(guò)程

H5 App開(kāi)發(fā)分為三個(gè)方面：前端頁(yè)面開(kāi)發(fā)、后端服務(wù)開(kāi)發(fā)和App開(kāi)發(fā)。開(kāi)發(fā)過(guò)程如下：

1、前端頁(yè)面開(kāi)發(fā)

       前端頁(yè)面開(kāi)發(fā)定義App的前端展現(xiàn)，可以使用WeX5開(kāi)發(fā)工具，進(jìn)行可視化、拖拽式開(kāi)發(fā)。具體過(guò)程如下：

（1）新建應(yīng)用

每次開(kāi)發(fā)一個(gè)新的應(yīng)用，都需要從新建應(yīng)用開(kāi)始。

新建應(yīng)用的步驟是：選擇“模型資源”視圖中的UI2目錄，右擊，在彈出的快捷菜單中選擇“新建”→“應(yīng)用”命令，打開(kāi)“新建應(yīng)用”對(duì)話框，如圖1-14所示，輸入應(yīng)用名稱(chēng)。單擊“完成”按鈕，在UI2目錄下就會(huì)生成一個(gè)應(yīng)用目錄。

圖1-14 新建應(yīng)用

（2）新建頁(yè)面

新建W文件就是新建前端頁(yè)面，通過(guò)UI設(shè)計(jì)器、JS編輯器、CSS編輯器完成界面的布局、樣式設(shè)置以及邏輯處理。

新建頁(yè)面的步驟是：選擇應(yīng)用目錄或下級(jí)目錄，右擊，在彈出的快捷菜單中選擇“新建”→“W文件”命令，打開(kāi)“新建W向?qū)А睂?duì)話框，如圖1-15所示。選擇一個(gè)“模板”并輸入文件名。單擊“完成”按鈕，系統(tǒng)自動(dòng)生成W和JS兩個(gè)文件，并且使用UI設(shè)計(jì)器打開(kāi)新生成的W文件。

圖1-15 新建頁(yè)面

W文件的根組件是window組件，window組件下有一個(gè)model組件。組件分為數(shù)據(jù)組件和展現(xiàn)組件，所有的展現(xiàn)組件都可以放到window組件下，所有的數(shù)據(jù)組件都必須放到model組件下。新建W文件后，通過(guò)擺放組件，設(shè)置組件的屬性，在組件的事件中調(diào)用組件的方法，完成頁(yè)面的開(kāi)發(fā)。

擺放組件有兩種方法：一是單擊“組件面板”中的組件，松開(kāi)鼠標(biāo)左鍵，然后再單擊組件要放置的位置。注意不需要進(jìn)行拖拽操作；二是先單擊組件要放置的位置，即選擇組件的父組件，再在“組件面板”中雙擊要添加的組件，組件就會(huì)被添加到父組件中。如果要改變組件的位置，可以通過(guò)鼠標(biāo)拖拽組件實(shí)現(xiàn)。

擺放組件之后，就可以設(shè)置組件的屬性和添加組件的事件。設(shè)置組件屬性的方式是在UI設(shè)計(jì)器中，選擇某個(gè)組件，即可在“屬性編輯器”中編輯該組件的屬性；添加組件事件的方式是在“事件編輯器”中增加該組件的事件，在組件的事件中調(diào)用組件的方法。

（3）頁(yè)面運(yùn)行調(diào)試

W文件作為前端頁(yè)面是可以在瀏覽器里面運(yùn)行的，開(kāi)發(fā)時(shí)可隨時(shí)查看運(yùn)行效果，并且編輯保存后，瀏覽器會(huì)自動(dòng)刷新頁(yè)面。開(kāi)發(fā)工具為運(yùn)行W文件提供了快捷方式，選擇要運(yùn)行的W文件，右擊，在彈出的快捷菜單中選擇“用瀏覽器運(yùn)行”命令，即可打開(kāi)“Chrome瀏覽器”，并運(yùn)行選擇的W文件，如圖1-16所示。

運(yùn)行前，需要啟動(dòng)Tomcat，如果訪問(wèn)了數(shù)據(jù)庫(kù)，還需要啟動(dòng)數(shù)據(jù)庫(kù)。

圖1-16 頁(yè)面運(yùn)行調(diào)試

2、后端服務(wù)開(kāi)發(fā)

    后端服務(wù)為前端頁(yè)面提供數(shù)據(jù)。前端頁(yè)面需要數(shù)據(jù)時(shí)，向后端服務(wù)發(fā)送請(qǐng)求，后端服務(wù)訪問(wèn)數(shù)據(jù)庫(kù)表，將查詢(xún)結(jié)果返回前端頁(yè)面；用戶(hù)輸入數(shù)據(jù)后，前端頁(yè)面提交數(shù)據(jù)給后端服務(wù)，后端服務(wù)將數(shù)據(jù)存入數(shù)據(jù)庫(kù)。圖1-17展示了記賬本App的后端服務(wù)。

       后端服務(wù)可以使用WeX5中的Baas來(lái)實(shí)現(xiàn)，WeX5的Bass支持多種語(yǔ)言，例如：Java、.NET、PHP。后端服務(wù)不僅可以使用Bass來(lái)實(shí)現(xiàn)，也可以直接使用云API來(lái)替代，或者自定義服務(wù)端。

圖1-17 記賬本App的后端服務(wù)

3、App開(kāi)發(fā)

       前端頁(yè)面和后端服務(wù)開(kāi)發(fā)好后，可以用WeX5打包生成App（支持iOS和安卓）。App開(kāi)發(fā)過(guò)程如下：

（1）新建本地App

       新建本地App時(shí)，主要設(shè)置App以下的信息：

l        應(yīng)用模式（見(jiàn)圖1-18）：支持四種模式，其中模式3常用于開(kāi)發(fā)調(diào)試階段，當(dāng)修改W文件后，手機(jī)界面將會(huì)同步刷新。

l        服務(wù)端信息：Web服務(wù)地址和Web路徑；

l        前端頁(yè)面信息：首頁(yè)地址和前端界面資源；

l        應(yīng)用基本信息：應(yīng)用名、版本、應(yīng)用包名、應(yīng)用描述、資源加密等等；

l        開(kāi)發(fā)者信息和證書(shū)：省、市、公司、開(kāi)發(fā)者、和證書(shū)等等

l        屏幕選項(xiàng)：應(yīng)用圖標(biāo)、縱向歡迎圖片和橫向歡迎圖片；

l        本地插件：設(shè)置App需要使用的本地插件（一般根據(jù)頁(yè)面資源自動(dòng)選擇插件即可）以及配置插件的參數(shù)；

l        更新信息：設(shè)置UI資源版本號(hào)、UI資源及App安裝包下載地址和更新說(shuō)明。

圖1-18 新建本地App

（2）生成本地App包

       新建本地App之后，可以將本地App打包生成App包。生成本地App包時(shí)，需要設(shè)置以下信息（見(jiàn)圖1-19）：

l        選擇應(yīng)用平臺(tái)：支持Android和iOS；

l        是否包含UI資源：建議選中本選項(xiàng)，有利于提升App運(yùn)行速度；

l        是否重新編譯UI資源：如果之前已經(jīng)編譯過(guò)UI資源，且UI資源沒(méi)有變化，可以不選中本選項(xiàng)；

l        是否發(fā)布模式：如果是最終對(duì)外發(fā)布，必須選中本選項(xiàng)。

       App生成后，將會(huì)在本地App工程的dist目錄下生成APK或IPA文件。

圖1-19 生成本地App包

（3）安裝調(diào)試App

生成App時(shí)同時(shí)生成App的二維碼。安卓手機(jī)如果和計(jì)算機(jī)處于同一局域網(wǎng)時(shí)，可以通過(guò)掃描二維碼安裝App。注意：不可使用微信掃一掃掃描二維碼，要使用瀏覽器的掃一掃，推薦使用UC瀏覽器的掃一掃。用UC瀏覽器掃描二維碼，下載后安裝。也可以采用復(fù)制APK到安卓手機(jī)的方式，在手機(jī)上安裝。

如果是蘋(píng)果手機(jī)，使用iTunes或Xcode，通過(guò)添加應(yīng)用，選擇IPA文件安裝到手機(jī)上。如果是企業(yè)證書(shū)，可以安裝；如果是開(kāi)發(fā)證書(shū)，需要安裝的設(shè)備ID在證書(shū)里有記錄，一個(gè)證書(shū)可以有100個(gè)設(shè)備進(jìn)行安裝調(diào)試。

也可以使用安卓模擬器代替安卓手機(jī)運(yùn)行App。推薦使用夜神模擬器，在計(jì)算機(jī)上啟動(dòng)模擬器，將APK拖拽到模擬器里，直接進(jìn)行安裝。

在手機(jī)上安裝后的運(yùn)行效果如圖1-20所示。

圖1-20  安裝調(diào)試App