WeX5 開發(fā)過程

H5 App開發(fā)分為三個方面：前端頁面開發(fā)、后端服務開發(fā)和App開發(fā)。開發(fā)過程如下：

1、前端頁面開發(fā)

       前端頁面開發(fā)定義App的前端展現，可以使用WeX5開發(fā)工具，進行可視化、拖拽式開發(fā)。具體過程如下：

（1）新建應用

每次開發(fā)一個新的應用，都需要從新建應用開始。

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

圖1-14 新建應用

（2）新建頁面

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

新建頁面的步驟是：選擇應用目錄或下級目錄，右擊，在彈出的快捷菜單中選擇“新建”→“W文件”命令，打開“新建W向導”對話框，如圖1-15所示。選擇一個“模板”并輸入文件名。單擊“完成”按鈕，系統(tǒng)自動生成W和JS兩個文件，并且使用UI設計器打開新生成的W文件。

圖1-15 新建頁面

W文件的根組件是window組件，window組件下有一個model組件。組件分為數據組件和展現組件，所有的展現組件都可以放到window組件下，所有的數據組件都必須放到model組件下。新建W文件后，通過擺放組件，設置組件的屬性，在組件的事件中調用組件的方法，完成頁面的開發(fā)。

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

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

（3）頁面運行調試

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

運行前，需要啟動Tomcat，如果訪問了數據庫，還需要啟動數據庫。

圖1-16 頁面運行調試

2、后端服務開發(fā)

    后端服務為前端頁面提供數據。前端頁面需要數據時，向后端服務發(fā)送請求，后端服務訪問數據庫表，將查詢結果返回前端頁面；用戶輸入數據后，前端頁面提交數據給后端服務，后端服務將數據存入數據庫。圖1-17展示了記賬本App的后端服務。

       后端服務可以使用WeX5中的Baas來實現，WeX5的Bass支持多種語言，例如：Java、.NET、PHP。后端服務不僅可以使用Bass來實現，也可以直接使用云API來替代，或者自定義服務端。

圖1-17 記賬本App的后端服務

3、App開發(fā)

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

（1）新建本地App

       新建本地App時，主要設置App以下的信息：

l        應用模式（見圖1-18）：支持四種模式，其中模式3常用于開發(fā)調試階段，當修改W文件后，手機界面將會同步刷新。

l        服務端信息：Web服務地址和Web路徑；

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

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

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

l        屏幕選項：應用圖標、縱向歡迎圖片和橫向歡迎圖片；

l        本地插件：設置App需要使用的本地插件（一般根據頁面資源自動選擇插件即可）以及配置插件的參數；

l        更新信息：設置UI資源版本號、UI資源及App安裝包下載地址和更新說明。

圖1-18 新建本地App

（2）生成本地App包

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

l        選擇應用平臺：支持Android和iOS；

l        是否包含UI資源：建議選中本選項，有利于提升App運行速度；

l        是否重新編譯UI資源：如果之前已經編譯過UI資源，且UI資源沒有變化，可以不選中本選項；

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

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

圖1-19 生成本地App包

（3）安裝調試App

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

如果是蘋果手機，使用iTunes或Xcode，通過添加應用，選擇IPA文件安裝到手機上。如果是企業(yè)證書，可以安裝；如果是開發(fā)證書，需要安裝的設備ID在證書里有記錄，一個證書可以有100個設備進行安裝調試。

也可以使用安卓模擬器代替安卓手機運行App。推薦使用夜神模擬器，在計算機上啟動模擬器，將APK拖拽到模擬器里，直接進行安裝。

在手機上安裝后的運行效果如圖1-20所示。

圖1-20  安裝調試App