HBuilder 入门(4) / 编写一个登录页面

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

 

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

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

    HBuilder提供一组UI组件,请参看这里:MUI

 

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

 

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

 

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

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

 

 

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 

 

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

 

	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 

 

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

 

 

	<link rel="stylesheet" href="css/mui.min.css">
	<script src="js/mui.min.js"></script>
	<script src="js/app.js"></script>
 

 

     如果你想问如果不用 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 之上。总之,最后的代码应该是这个样子:

 

    

<body>
	<div class="mui-bar mui-bar-tab" style="height:20px;line-height:20px;font-size:10px;text-align:center;">
			这是底部信息
	</div>
	<div class="mui-content">

        </div>
<body>

 

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

    接下来,我们来放入一些 mui 的组件:输入框

<div class="mui-content-padded" style="margin: 5px;">
	<form class="mui-input-group">
		<div class="mui-input-row">
			<label>用户名</label>
			<input type="text" id="username" placeholder="用户名">
		</div>
		<div class="mui-input-row">
			<label>密码</label>
			<input type="password" id="userpassword" placeholder="密码">
		</div>
	</form>
</div>
<div style="margin-top:20px;text-align: center;">
	<button class="mui-btn mui-btn-primary" id="loginBtn">登录</button>
	&nbsp;&nbsp;<button class="mui-btn mui-btn-primary" id="regBtn">注册</button>
</div>

 

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

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

 

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

 

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

  1. 定义一个表单(form),点击登录按钮的时候提交到后台。后台处理完毕后,显示新的页面给前端。
  2. 在登录按钮上绑定一个click方法。点击的时候,使用Ajax发送数据到后台,接受到数据后,前端页面更新。

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

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

    

document.getElementById("loginBtn").addEventListener('tap', function(){
   处理内容;当然肯定是ajax 了。
});
     这个事件的名字叫 ”tap“,也就是点击屏幕的事件。

 

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

 

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

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

    

<script>
	mui.init();
	mui.plusReady(
		function() {
                    这里写上刚才的事件绑定方法。
		}
	);
</script>

 

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

    

<html>
  <head>
    <meta charset="utf-8">
    <title>测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  

    <link rel="stylesheet" href="css/mui.min.css">  
    <script src="js/mui.min.js"></script>  
    <script src="js/app.js"></script>
  </head>
  <body>
    <div class="mui-bar mui-bar-tab" style="height:20px;line-height:20px;font-size:10px;text-align:center;">  
            这是底部信息  
    </div>  
    <div class="mui-content-padded" style="margin: 5px;">  
      <form class="mui-input-group">  
        <div class="mui-input-row">  
            <label>用户名</label>  
            <input type="text" id="username" placeholder="用户名">  
        </div>  
        <div class="mui-input-row">  
            <label>密码</label>  
            <input type="password" id="userpassword" placeholder="密码">  
        </div>  
     </form>  
    </div>  
    <div style="margin-top:20px;text-align: center;">  
        <button class="mui-btn mui-btn-primary" id="loginBtn">登录</button>  
        &nbsp;&nbsp;<button class="mui-btn mui-btn-primary" id="regBtn">注册</button>  
    </div>  
    <script>  
     mui.init();  
     mui.plusReady(  
        function() {  
           document.getElementById("loginBtn").addEventListener('tap', function(){  
                 alert("点击了登录按钮");
            }); 
        }  
      );  
    </script>
  </body>
</html>

 

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

 

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

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

 

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

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

    

 

 

 

没有更多推荐了,返回首页