HBuilder完成webApp入門（4） 實例

 接下來咱們就來作一個最基本的頁面：登陸頁面。

 1.index頭部

     HBuilder默認生成的index.html裏的meta部分，只有viewport一個屬性：

     

     這些遠遠不夠你能夠根據須要加入其它作移動端的meta屬性

     其次，咱們要引入 mui 須要的 css，以及相應的 javascript 文件。或者你自定義的一些js

     

     至此，HTML 的 head 部分就結束了。接着咱們開始寫body部分了。

2.body部分

    按照官方的說法，頁面中全部的內容都應該放入一個 div 中，而且這個 div 的class 應該是 "mui-content" --- 固然，這是你使用 mui 的時候。這裏咱們暫定會使用 mui 。

 

    按照通常的方式，咱們都會在窗口的底部加一個 copyright 之類的文字。按照標準的說法，咱們須要有一個class="mui-bar mui-bar-tab" 的 div，並且要注意：這個 mui-bar DIV 必定要放到 mui-content 之上。總之，最後的代碼應該是這個樣子：

   

接下來，咱們來放入一些 mui 的組件：輸入框

3.與後臺的交互

   接下來就是登陸按鈕如何與服務器進行交互？

1. 定義一個表單(form)，點擊登陸按鈕的時候提交到後臺。後臺處理完畢後，顯示新的頁面給前端。
2. 在登陸按鈕上綁定一個click方法。點擊的時候，使用Ajax發送數據到後臺，接受到數據後，前端頁面更新。

     在手機的HTML5開發中，使用 form 提交方法不提倡。因此用 Ajax。

     按照官方的說法，儘可能不要使用JQuery，同時，也不要使用 onclick 這樣的方式，取而代之應該使用的是綁定一個事件：

     

    這個事件的名字叫 」tap「，也就是點擊屏幕的事件。

     按照官方的說法，咱們應該寫在 mui 組件和頁面組件所有加載完畢後，就如同 JQuery的ready方法同樣，mui 也有一個 ready 的方法：

    

對於mui，雖然你能夠不使用mui 組件，可是一些基本的規則，例如 mui.init，mui.plusReady 這樣的方法，仍是要使用的。

接下來，咱們就要實現登陸按鈕經過ajax與後臺進行交互。