数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > 移动web开发

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

2015-11-10 10:03 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:移动web开发 上一篇:HBuilder 入门(5) / 编写一个登录页面 - Ajax交互 下一篇:HBuilder 入门(3) / 关于WebView

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

 

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

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

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

 

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

 

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

 

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

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

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

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

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

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

  1. <link rel="stylesheet" href="css/mui.min.css"> 
  2. <script src="js/mui.min.js"></script> 
  3. <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 之上。总之,最后的代码应该是这个样子:

  1. <body> 
  2.     <div class="mui-bar mui-bar-tab" style="height:20px;line-height:20px;font-size:10px;text-align:center;"> 
  3.             这是底部信息 
  4.     </div> 
  5.     <div class="mui-content"> 
  6.  
  7.         </div> 
  8. <body> 

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

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

  1. <div class="mui-content-padded" style="margin: 5px;"> 
  2.     <form class="mui-input-group"> 
  3.         <div class="mui-input-row"> 
  4.             <label>用户名</label> 
  5.             <input type="text" id="username" placeholder="用户名"> 
  6.         </div> 
  7.         <div class="mui-input-row"> 
  8.             <label>密码</label> 
  9.             <input type="password" id="userpassword" placeholder="密码"> 
  10.         </div> 
  11.     </form> 
  12. </div> 
  13. <div style="margin-top:20px;text-align: center;"> 
  14.     <button class="mui-btn mui-btn-primary" id="loginBtn">登录</button> 
  15.     &nbsp;&nbsp;<button class="mui-btn mui-btn-primary" id="regBtn">注册</button> 
  16. </div> 

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

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

 

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

 

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

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

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

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

  1. document.getElementById("loginBtn").addEventListener('tap'function(){ 
  2.    处理内容;当然肯定是ajax 了。 
  3. }); 

   这个事件的名字叫 ”tap“,也就是点击屏幕的事件。

 

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

 

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

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

  1. <script> 
  2.     mui.init(); 
  3.     mui.plusReady( 
  4.         function() { 
  5.                     这里写上刚才的事件绑定方法。 
  6.         } 
  7.     ); 
  8. </script> 

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

  1. <!DOCTYPE html> 
  2. <html> 
  3.  
  4.     <head> 
  5.         <meta charset="utf-8"> 
  6.         <title>测试</title> 
  7.         <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 
  8.         <meta name="apple-mobile-web-app-capable" content="yes"> 
  9.         <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  10.  
  11.         <link rel="stylesheet" href="css/mui.min.css"> 
  12.         <script src="js/mui.min.js"></script> 
  13.         <!--<script src="js/app.js"></script>--> 
  14.         <style type="text/css"> 
  15.             .mui-bar-nav { 
  16.           background:#FF4C4C; 
  17.           } 
  18.           .mui-bar .mui-title{ 
  19.             color: white; 
  20.           } 
  21.         </style> 
  22.     </head> 
  23.  
  24.     <body> 
  25.         <header class="mui-bar mui-bar-nav"> 
  26.             <h1 class="mui-title">登录</h1> 
  27.         </header> 
  28.         <div class="mui-content"> 
  29.             <div class="mui-bar mui-bar-tab" style="text-align:center;line-height:50px;"> 
  30.                 底部版权信息 
  31.             </div> 
  32.  
  33.             <div class="mui-content-padded" style="margin: 5px;"> 
  34.                 <form class="mui-input-group"> 
  35.                     <div class="mui-input-row"> 
  36.                         <label>用户名</label> 
  37.                         <input type="text" id="username" placeholder="用户名"> 
  38.                     </div> 
  39.                     <div class="mui-input-row"> 
  40.                         <label>密码</label> 
  41.                         <input type="password" id="userpassword" placeholder="密码"> 
  42.                     </div> 
  43.                 </form> 
  44.             </div> 
  45.             <div style="margin-top:20px;text-align: center;"> 
  46.                 <button class="mui-btn mui-btn-primary" id="loginBtn">登录</button> 
  47.                    
  48.                 <button class="mui-btn mui-btn-primary" id="regBtn">注册</button> 
  49.             </div> 
  50.         </div> 
  51. <script>     
  52.      mui.init();     
  53.      mui.plusReady(     
  54.         function() {     
  55.            document.getElementById("loginBtn").addEventListener('tap', function(){     
  56.                  alert("点击了登录按钮");   
  57.             });    
  58.         }     
  59.       );     
  60.     </script>  
  61. </body> 
  62.  
  63. </html> 

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

 

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

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

 

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

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

小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。