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

 

   

posted @ 2016-10-30 20:17  离开前请叫醒我  阅读(6602)  评论(0编辑  收藏  举报