## UI2前端框架基礎01：應用和頁面 本篇文章以最簡單的hello應用為例，介紹UI2前端框架的應用、頁面的概念，以及頁面的兩種編譯方式和應用的三種部署方式。 目錄 [1 UI2的應用和頁面](http://wex5.com/cn/?p=3560#1) [2 制作一個簡單的hello應用](http://wex5.com/cn/?p=3560#2) [3 運行hello應用](http://wex5.com/cn/?p=3560#3) [4 編譯和部署hello應用](http://wex5.com/cn/?p=3560#4) [4.1 頁面編譯方式一](http://wex5.com/cn/?p=3560#4.1) [4.2 頁面編譯方式二](http://wex5.com/cn/?p=3560#4.2) [4.3 UI三種部署運行方式](http://wex5.com/cn/?p=3560#4.3) ## 1 UI2的應用和頁面 啟動WeX5 Studio，可以看到模型資源目錄下有UI2和Native兩個目錄。UI2目錄包含了所有WebUI的資源（.w、html、js、csss、圖片等），為啥叫UI2，因為這是WeX5的第二代Web UI，Native用作移動app開發。 [](https://box.kancloud.cn/2015-09-22_560158512c0ed.png) 看上圖UI2下的目錄，所有的Web資源按目錄組織，可以任意多級目錄。system目錄包含UI2框架的核心js庫、css和組件等資源。UI2下除system目錄之外的第一級目錄我們通常稱為一個Web應用，比如Demo、takeout就是WeX5自帶的綜合演示和外賣兩個應用。每個應用由多個頁面和相關的資源組成，比如外賣有一個頁面(index.w)，demo應用就可以看到很多個頁面。開發WeX5的應用，就是利用系統js庫、css庫和組件編寫應用頁面(.w)。 頁面是UI2的核心，頁面是一個相對獨立可復用的界面展現和交互單元，它即可作為Web頁面獨立運行，也可作為一個頁面片段嵌入到別的頁面運行。每個頁面包括.w、.js和.css三個同名文件，.w是頁面的主文件，.js和.css可以沒有。如果頁面有.js和.css文 件，.w在編譯運行時會自動引入, 不需要手工在.w里鏈接引用。比如外賣頁面包含index.w、index.js、index.csss三個文件，在瀏覽器請求index.w時，index.w會自動請求index.js和index.css。 ## 2 制作一個簡單的hello應用 下面開發一個簡單的hello應用，該應用只包含一個hello頁面。hello頁面包含hello.w和hello.js兩個文件，沒有特殊樣式，所有不需要hello.css樣式文件。在這個頁面里放一個輸入框（input）、一個輸出框（output），功能就是在input里輸入名字，output就會立即動態顯示“hello,名字!”。在Studio里新建一個hello的空白頁面，把下面代碼拷貝粘貼到相應文件。 hello.w <-?xml version="1.0" encoding="UTF-8"?> <-div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="device:mobile"> <div component="$UI/system/components/justep/model/model" xid="model"/> <!-- 綁定可監控對象 --> <input bind-textinput ="name"></input> <!-- name有值就顯示output，否則隱藏 text綁定了表達式--> <output bind-visible = "name" bind-text ="'hello, ' + name.get() + '!'"></output> <-/div> hello.js define(function(require){ var $ = require("jquery"); var justep = require("$UI/system/lib/justep"); var Model = function(){ this.callParent(); //定義可監控對象 this.name = justep.Bind.observable(""); }; return Model; }); hello應用頁面的目錄和文件如下： [](https://box.kancloud.cn/2015-09-22_5601585686f27.png) ## 3 運行hello應用 hello應用和頁面制作好了，怎么運行呢？啟動tomact，在瀏覽器地址欄中輸入http://localhost:8080/x5/UI2/hello/hello.w，hello應用和頁面就運行起來了。如圖： [](https://box.kancloud.cn/2015-09-22_56015856daf31.png) 每個頁面都有一個URL，通過這個URL在瀏覽器中就能夠打開這個頁面。 上面說到啟動tomcat，這兒tomcat服務主要用來做開發調試，應用發布為app后，就可以不需要tomcat服務了。有兩個地方可以啟動tomcat： * 一是點擊studio的工具欄[](https://box.kancloud.cn/2015-09-22_5601585a57432.png)的第一個圖標，這是啟動調試模式tomcat服務 調試模式下每次打開或刷新頁面都會刺激重新編譯頁面，并且讓瀏覽器加載最新的頁面而不使用任何緩存。調試模式對開發更方便，每次修改保存后，直接刷新頁面即可。調試模式下，由于每次運行都會重新編譯頁面，所以頁面運行會稍慢。 * 二是運行WeX5目錄里的“**啟動X5運行平臺.bat”**命令，這是啟動正常模式tomcat服務 正常模式下如果頁面或資源有緩存可用，就會使用緩存。所以，修改且保存了頁面，但刷新瀏覽器看不到最新的修改時，就要檢查下是不是啟動了正常模式tomcat。 一般情況下，我們在開發階段都用調試模式運行tomcat。正常模式的作用在后續文章會講到。感興趣的同學可以動手對比下這兩種模式，分別啟動這兩種模式，修改頁面并保存，刷新瀏覽器，看看修改是否立即起作用。 ## 4 編譯和部署hello應用 hello應用開發好了，我們需要部署應用，在部署前我們需要編譯頁面，為什么需要編譯呢？ 頁面(.w)包含有加快開發的自定義的組件標簽和屬性，不能直接在瀏覽器里運行，需要編譯轉換為標準html格式頁面后才能加載到瀏覽器里運行。根據頁面編譯的時機和輸出目標不同，頁面有下面兩種編譯方式。 ### 4.1 頁面編譯方式一 頁面編譯方式一利用編譯工具把頁面（.w）編譯為標準的html頁面，然后把標準的html頁面和相關的資源做發布。發布的資源即可部署到任意的Web服務器，也可打包到本地app。 [](https://box.kancloud.cn/2015-09-22_5601585adf588.png) 這種方式，如何操作才能把頁面編譯為標準的html頁面呢？ 我們把剛才做的hello應用編譯一下，步驟如下： 第一步，在Native下新建hello本地app，不要奇怪，就是Native下，因為Native需要編譯UI資源。設置如下圖 [](http://wex5.com/cn/wp-content/uploads/2015/04/hello-app.jpg) 第二步，Native下的hello應用創建好后，點擊右鍵菜單-“編譯使用到的UI資源”，彈出界面后點編譯，hello應用就編譯好了。編譯好的資源在Native/hello/www目錄下，如下圖: [](https://box.kancloud.cn/2015-09-22_5601585ce5b7d.png) 頁面資源編譯好后，就可以把這些資源按下文的部署方式部署了。 ### 4.2 頁面編譯方式二 頁面編譯方式二是通過UIServer動態編譯頁面（.w）。編譯過程是，當對頁面（.w）的請求到達UIServer后，UIServer會先檢查是否有該頁面的編譯轉換結果(標準html頁面)的緩存，如果有緩存就用緩存響應返回；如果沒有緩存，就會先編譯頁面（.w）為標準html頁面，然后緩存并且響應返回。 [](https://box.kancloud.cn/2015-09-22_560158625d007.png) ### 4.3 UI三種部署運行方式 根據上面兩種編譯方式，WeX5的UI有下面三種部署運行方式。 * 部署方式一：頁面等應用資源打包到本地app，通過本地app直接訪問(編譯方式一) 這種部署的具體操作可參考app打包。 * 部署方式二：頁面等應用資源部署到標準Web服務器，通過瀏覽器或本地app殼訪問(編譯方式一) 標準Web服務器，可以是tomact、apache、nginx、IIS等任意web服務器。為了方便我們以tomcat為例來部署前面已經編譯好的hello應用資源。如下圖，把hello/www目錄下的app目錄整個拷貝到tomcat下的webapps，就部署好了。 [](https://box.kancloud.cn/2015-09-22_56015862dd13e.png) 如果還沒啟動tomcat，啟動tomcat。在瀏覽器地址輸入http://localhost:8080/app/UI2/hello/hello.w，就可以訪問了，這時我們就完全不依賴WeX5的調試運行環境（UIServer）了。 小知識點: 1、編譯后的URL還是保持了.w后綴； 2、UI2前的webpath可以自己根據需要設定，這兒就用了app，沒有用x5，另外這個webpath也可以是多級目錄。 * 部署方式三：頁面等應用資源部署到UIServer，通過瀏覽器或本地app殼訪問(編譯方式二) 本部署方式詳細請看[《Web App部署》](http://wex5.com/cn/wex5-web-app-publish/)。