hbuilder怎么做登录界面_HBuilder 入门(4) / 编写一个登录页面

通过之前的介绍，我们应该对HTML5+ 有了一个较为直观的认识。但是正所谓“好记性不如烂笔头”，能够实际地做出一个页面才是最重要的。

接下来我们就来做一个最基本的页面：登录页面。

那我们先构思一下登录页面都需要什么内容：用户名，密码，登录按钮。如果你有一个得力的美工，我们还可以加上酷炫的美工设计。

HBuilder提供一组UI组件，请参看这里：MUI。

对于一个熟悉web开发的人来说，上面的这些都太简单了，分分钟就可以搞定了。但是别忘了这是移动开发，与普通的浏览器应用还是有所不同。接下来我们来看看页面的布局应该怎么设计。

这里大家不要忘记一个原则，因为目前HTML5+ 的实现仅此一家(HBuilder)，所以我们在实现各种功能的时候，一定要遵循HBuilder官方推荐的方法。

接下来我们从一个index.html开始。

HBuilder默认生成的index.html里的meta部分，只有viewport一个属性：

其实这完全是不够的，我们还需要手动增加几个属性：

其次，我们要引入 mui 需要的 css，以及相应的 javascript 文件。

如果你想问如果不用 mui 和默认的 app.js 可以吗？答案是肯定的。但是，你可能会遇到很多意想不到的问题。所以，对于一个界面组件 mui 来说，个人如果你有强大的美工小伙伴，那么不用 mui 是完全可以的。但是 app.js ，还是最好用吧！

另外，按照官方的说法，尽量不要用 jquery等 js 类库，这会严重影响你的应用的速度。所以，请遵循官方的建议。其实在移动端现代浏览器上， jquery 也真的是可有可无了。

至此，HTML 的 head 部分就结束了。接着我们开始写body部分了。

按照官方的说法，页面中所有的内容都应该放入一个 div 中，并且这个 div 的class 应该是 "mui-content" --- 当然，这是你使用 mui 的时候。这里我们暂定会使用 mui 。

按照一般的方式，我们都会在窗口的底部加一个 copyright 之类的文字。按照标准的说法，我们需要有一个class="mui-bar mui-bar-tab" 的 div，而且要注意：这个 mui-bar DIV 一定要放到 mui-content 之上。总之，最后的代码应该是这个样子：

这是底部信息

上面的 mui-bar 里，又额外加了一些样式，用于控制高度，大家可以根据需要自行订制。

接下来，我们来放入一些 mui 的组件：输入框

用户名

密码

登录

  注册

这里的输入框和button 按钮都是 mui 提供的组件。我使用了一些 margin 等属性控制了一下位置。个人觉得，输入框组件还好，按钮组件的样式就比较一般了。如果你有好的美工，还是自己打造好看的按钮比较好。

在 html 对象的命名上，也秉承了一贯的原则，用唯一的ID 来标示一个对象。总之，这个内容对于有web开发经验的人来说，没有什么特别的地方。

至于你想让输入框垂直居中，请自行查找“如何让 div 垂直居中”，解决方案是一样的。

接下来就是重头戏了，登录按钮如何与服务器进行交互？按照web开发的理解，有这么几种选择：

定义一个表单(form)，点击登录按钮的时候提交到后台。后台处理完毕后，显示新的页面给前端。

在登录按钮上绑定一个click方法。点击的时候，使用Ajax发送数据到后台，接受到数据后，前端页面更新。

对于一个手机应用，如果出现页面刷新，或者大白页这样的状态肯定是不好的体验。所以，在手机的HTML5开发中，我们绝对不会使用 form 提交这样的东西的。可以肯定的说：我们只用 Ajax。

按照官方的说法，尽量不要使用JQuery，同时，也不要使用 onclick 这样的方式，取而代之应该使用的是绑定一个事件：

document.getElementById("loginBtn").addEventListener('tap', function(){

处理内容；当然肯定是ajax 了。

});      这个事件的名字叫 ”tap“，也就是点击屏幕的事件。

那好学的同学肯定会问有多少个事件可以用啊？请参看这里：手势事件。这是mui 提供的一个特性--- 就这个特性来说，你很难不用 mui 这个组件，毕竟你自己再实现一个的话，又要费不少事。

那我们把这个事件的代码写在哪里好呢？最开始，还是最后边？都不是。

按照官方的说法，我们应该写在 mui 组件和页面组件全部加载完毕后 ---  就如同 JQuery一样，mui 也有一个 ready 的方法：

mui.init();

mui.plusReady(

function() {

这里写上刚才的事件绑定方法。

}

);

到了这里，画面的部分基本完事了，整个代码大概是这个样子：

测试

这是底部信息

用户名

密码

登录

  注册

mui.init();

mui.plusReady(

function() {

document.getElementById("loginBtn").addEventListener('tap', function(){

alert("点击了登录按钮");

});

}

);

这时，你可以把手机连接到电脑上，然后进行调试，就可以看到第一个登录的画面了。点击登录按钮，会弹出”点击了登录按钮“这个对话框。

对于mui，虽然你可以不使用mui 组件，但是一些基本的规则，例如 mui.init，mui.plusReady 这样的方法，还是要使用的。

另外，mui 的布局方案中没有垂直居中的方式(希望以后能增加上)，虽然方式有很多，但是仍然推荐这个：CSS Transform让百分比宽高布局元素水平垂直居中

接下来，我们就要实现登录按钮通过ajax与后台进行交互。

由于这篇内容已经够多，将在下一篇里分享给大家。