WeX5的簡單介紹及UI的簡單講解
(2016-01-13 14:49:05)
一.WeX5的簡單講解
1.WeX5是前端快速開發框架，可開發跨端運行應用。是移動App/微信/WebApp開發利器，一次開發多平台運行。
二.WeX5平台了解
1.菜單和工具欄 ：查看API；啟動Tomcat；搜索；首選項；復位透視圖
2.透視圖 ：導入java項目；使用svn
3.模型資源 ：文件對比 ；新建、復制、刪除；重命名文刷件新及文件夾；模型編譯
切換到資源管理器 ；創建本地App；生成App包；模擬運行
4.編輯器：格式化；查找、替換；編輯文件(使用快捷鍵)
5、控制台 ：顯示Tomcat信息；搜索結果
1.擺放組件的兩種方法：（1）雙擊；（2）拖拽；
2.編輯組件的幾種方法：
（1）設置屬性；
（2）右鍵菜單；
（3）添加事件；
（4）剪切、復制、粘貼;
(5)刪除組件;
(6)刪除組件事件 ;
三.WeX5中的快捷鍵
-
Ctrl+Shift+/ 整段注釋
-
Ctrl+Shift+\ 取消整段注釋
-
Ctrl+Shift+C (取消)逐行注釋
-
Ctrl+Shift+F 格式化文檔
-
Ctrl+Shift+L 查看快捷鍵
-
Ctrl+D 刪除行
-
Ctrl+F 查找、替換
-
Ctrl+K 查找
-
Ctrl+L 定位行
-
Ctrl+M 編輯器窗又最大化
-
Ctrl+S 保存文件
-
Ctrl+Z 插銷前一個操作
-
Alt+↑(↓) 當前行向上(下)移一行
四.UI部分的講解
1.頁面是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。
五. 簡單demo
1.創建應用：
2.創建W文件
3.在設計模式中放入input和output組件
（1）拖入控件的第一種方法：首先點擊一下控件，然后在點擊一下設計界面；
（2）拖入控件的第二種方法：選取好父視圖后，雙擊控件就可以；
4.輸入代碼：
5.設置屬性
KO可以把bind-value 的值動態寫入input的value屬性
6.output控件要顯示值得話需要設置bind-text屬性
7.利用瀏覽器運行
（1）首先啟動Tomcat（如果沒有啟動過的話）
（2）啟動瀏覽器運行
8.注意：WeX5運行的時候不會自動保存，如果是新添加的內容，所以每次運行前要保存
運行效果如下圖：
