WeX5的簡單介紹及UI的簡單講解

WeX5的簡單介紹及UI的簡單講解

  (2016-01-13 14:49:05)

標籤：  it

分類： WeX5的初步自學

一.WeX5的簡單講解

1.WeX5是前端快速開發框架，可開發跨端運行應用。是移動App/微信/WebApp開發利器，一次開發多平臺運行。

二.WeX5平臺瞭解

1.菜單和工具欄 ：查看API；啓動Tomcat；搜索；首選項；復位透視圖

2.透視圖 ：導入java項目；使用svn

3.模型資源 ：文件對比 ；新建、複製、刪除；重命名文刷件新及文件夾；模型編譯

切換到資源管理器 ；建立本地App；生成App包；模擬運行

4.編輯器：格式化；查找、替換；編輯文件(使用快捷鍵)

五、控制檯 ：顯示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運行的時候不會自動保存，若是是新添加的內容，因此每次運行前要保存

運行效果以下圖：