## 創建我的第一個應用 #### 創建我的第一個應用 視頻地址：[http://pan.baidu.com/s/1c0u8hJ6](http://pan.baidu.com/s/1c0u8hJ6) ## 本文通過一個簡單的hello案例介紹使用WeX5開發一個手機應用的過程 #### 第一步，環境準備 #### 第二步，應用開發 #### 第三步，調試運行，本地打包 ## 介紹模擬器、谷歌瀏覽器、手機真機三種調試方法 #### 第四步，打包發布，部署運行 ## 打App正式發布的包發布，這個過程需要使用到打包服務器，隨后有一篇文檔專門講解。 * * * #### 第一步，環境準備 ## 1\. 進入官網[下載中心](http://wex5.com/downloads.html "下載中心")，下載WeX5應用快速開發框架。 2\. 下載后直接解壓，主要解壓后文件夾不能帶有中文目錄。 #### 第二步，應用開發 ## 1\. 首先打開WeX5的開發環境，運行解壓后文件夾根下的“啟動WeX5開發工具”或者，直接運行“studio\studio.exe”啟動開發工具。 2\. 進入工具后，可以看到兩個目錄，UI2和Native，在UI2上點擊右鍵，“新建——應用”，應用名稱填寫“hello”，此時，在UI2下就會自動生成一個“hello”的目錄。 3\. 在hello目錄上點擊右鍵，選擇“新建——.w文件”，此時可以通過向導的模式新建自己的頁面，選擇“標準——空白”，在文件名的地方填寫“index”，這里的文件名不限于這個，可以隨意起，然后點擊完成。系統生成了兩個文件,index.w和index.js，并且使用UI設計器打開的index.w。 [](http://wex5.com/cn/wp-content/uploads/2015/03/01-2.jpg) 4\. 接下來進行頁面布局，往這個空白頁面上放一個input、一個output和一個按鈕，最終達到的效果是，在input中輸入一個內容，然后點擊按鈕，讓相關內容顯示到output中。 5\. 界面布局：第一行顯示一個input和一個按鈕，所以我們先放入一個行組件，放入行組件是因為該組件提供了多列的特性，默認是3列，刪除其中一列，接下來在第一列放入input組件，第二列放button組件，button組件固定寬度，剩下的寬度由input充滿。在行組件的列上進行設置，選中行組件的第二列，class，選擇固定，width，設置為auto。 第二行直接放上output組件。 [](http://wex5.com/cn/wp-content/uploads/2015/03/02-2.jpg) 6\. 寫按鈕的單擊事件，思路是，首先獲得input組件的對象，然后獲得該組件的值，然后再獲得output組件js對象，使用set方法將值賦給output組件。 選中按鈕，點擊“事件”onclick雙擊，此時界面切換到了js頁面，這個js就是index.js，點擊設計就可切換回原來的界面。 注意：代碼中根據組件的的xid來獲取組件的js對象。 [+ expand source](http://wex5.com/cn/?p=3321#) #### 第三步，調試運行 ## 1、 模擬器運行調試 使用模擬器前，必須啟動tomcat，啟動時有紅色和黑色字是正常的，但出現藍色字就是發生錯誤，要根據錯誤具體進行排查。 在需要運行的.w文件上點右鍵，然后點擊“模擬運行”，就出現下圖所示模擬運行的效果，此時，在input窗中輸入“小伙伴”，點擊按鈕，下面的ouput窗就會顯示“hello：小伙伴”。 [](https://box.kancloud.cn/2015-09-22_560154c4ce447.png) 如何調試？ 在代碼中加上debugger，切換到模擬器中，右鍵點擊刷新，然后再右鍵點擊“Show DevTools”，即進入調試模式，然后可進行單步調試也可直接運行。 [](https://box.kancloud.cn/2015-09-22_560154c534afe.png) [](https://box.kancloud.cn/2015-09-22_560154cb12f11.png) 2、 谷歌Chorme瀏覽器調試（Chrome的版本需32及以上） 打開chrome瀏覽器，F12進入調試模式，點擊手機模式后選擇手機設備； 在瀏覽器地址欄輸入：http://127.0.0.1:8080/x5，回車后即出現開發的界面； 在Input中輸入“小伙伴”，點擊按鈕； 代碼運行至debugger處停止； 然后可以進行單步調試，也可直接運行。 [](https://box.kancloud.cn/2015-09-22_560154cb7475a.png) 3、 真機調試 使用真機調試需要打包一個App，使用手機下載安裝，將手機連接到計算機方后可進行調試。以下以安卓為例介紹一下這個過程： 1）生成本地App：Native目錄上右鍵，新建創建本地APP，資源不要選，只填寫服務器地址和首頁，此時系統訪問時取的是服務器上最新的資源，這樣修改后可直接體現修改效果。 服務地址：http://IP:端口（端口默認8080） 首頁：/x5/UI2/hello/index.w 下面的資源都不要選。 2）填寫應用名：hello，下一步。 3）填寫版本號，注意，一定要是三段的，例如1.0.0； 4）填寫應用包名：com.justep.x5.hello，該包名不能跟自己開發的其他應用相同，是應用的唯一ID。 5）選擇“增強型瀏覽器”（尤其是安卓4.4以下一定要選擇），下一步，再下一步。 6）選擇“完成后啟動App生成向導”，點擊“完成”。 7）下一步，選擇安卓；不選擇為“本地快捷打包”如果使用未越獄的蘋果手機調試，要使用服務器打包才可以。 8）完成。經過幾分鐘，就完成打包。 9）使用安卓手機掃描二維碼，下載安裝后使用數據線連接到計算機上。 10）詳細調試可參看[《WeX5本地App（Android和iOS）使用電腦（PC）調試》](http://wex5.com/cn/wex5%E6%9C%AC%E5%9C%B0app%EF%BC%88android%E5%92%8Cios%EF%BC%89%E4%BD%BF%E7%94%A8%E7%94%B5%E8%84%91%EF%BC%88pc%EF%BC%89%E8%B0%83%E8%AF%95/ "WeX5本地App（Android和IOS）使用電腦（PC）調試") #### 第四步，部署運行 ## 這里所說的部署運行，是將自己開發的App發布到蘋果AppStore中或者發布正式安卓App包。由于最終正式發布使用的包需要使用到打包服務器，所以會另外附一篇文章講解。 * * * 最后，如果大家關心使用WeX5開發出來的效果，可以先進行[在線體驗](http://wex5.com/cn/appstore/ "應用展廳")，或者掃描二維碼下載到手機中體驗。 [](https://box.kancloud.cn/2015-09-22_560154cc7ce06.jpg) [](http://wex5.com/cn/my-first-app/x5-xz_2-11-0/) [](http://wex5.com/cn/my-first-app/x5-xz_5-11-0/) [](http://wex5.com/cn/my-first-app/x5-xz_3-11-0/)