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与后台进行交互。