HBuilder⼊门（4）编写⼀个登录页⾯
通过之前的介绍，我们应该对HTML5+ 有了⼀个较为直观的认识。但是正所谓“好记性不如烂笔头”，能够实际地做出⼀个页⾯才是最重要的。
接下来我们就来做⼀个最基本的页⾯：登录页⾯。
那我们先构思⼀下登录页⾯都需要什么内容：⽤户名，密码，登录按钮。如果你有⼀个得⼒的美⼯，我们还可以加上酷炫的美⼯设计。 HBuilder提供⼀组UI组件，请参看这⾥：。
对于⼀个熟悉web开发的⼈来说，上⾯的这些都太简单了，分分钟就可以搞定了。但是别忘了这是移动开发，与普通的浏览器应⽤还是有所不同。接下来我们来看看页⾯的布局应该怎么设计。
这⾥⼤家不要忘记⼀个原则，因为⽬前HTML5+ 的实现仅此⼀家(HBuilder)，所以我们在实现各种功能的时候，⼀定要遵循HBuilder官⽅推荐的⽅法。
接下来我们从⼀个index.html开始。
HBuilder默认⽣成的index.html⾥的meta部分，只有viewport⼀个属性：
Html代码
1. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
其实这完全是不够的，我们还需要⼿动增加⼏个属性：
Html代码
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 ⽂件。
Html代码
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 之上。总之，最后的代码应该是这个样⼦：
Html代码
1. <body>
2. <div class="mui-bar mui-bar-tab" >
3. 这是底部信息
4. </div>
5. <div class="mui-content">
6.
7. </div>
8. <body>
上⾯的 mui-bar ⾥，⼜额外加了⼀些样式，⽤于控制⾼度，⼤家可以根据需要⾃⾏订制。
接下来，我们来放⼊⼀些 mui 的组件：输⼊框
Html代码
1. <div class="mui-content-padded" >
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 >
14. <button class="mui-btn mui-btn-primary" id="loginBtn">登录</button>
15. <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 这样的⽅式，取⽽代之应该使⽤的是绑定⼀个事件：
Js代码
1. ElementById("loginBtn").addEventListener('tap', function(){
2. 处理内容；当然肯定是ajax 了。
3. });
这个事件的名字叫 ”tap“，也就是点击屏幕的事件。
那好学的同学肯定会问有多少个事件可以⽤啊？请参看这⾥：。这是mui 提供的⼀个特性--- 就这个特性来说，你很难不⽤ mui 这个组件，毕竟你⾃⼰再实现⼀个的话，⼜要费不少事。
那我们把这个事件的代码写在哪⾥好呢？最开始，还是最后边？都不是。
按照官⽅的说法，我们应该写在 mui 组件和页⾯组件全部加载完毕后 --- 就如同 JQuery⼀样，mui 也有⼀个 ready 的⽅法：
Js代码
1. <script>
2. mui.init();
3. mui.plusReady(
4. function() {
5. 这⾥写上刚才的事件绑定⽅法。
6. }
7. );
8. </script>
到了这⾥，画⾯的部分基本完事了，整个代码⼤概是这个样⼦：
Html代码
1. <html>
2. <head>
3. <meta charset="utf-8">
4. <title>测试</title>
5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
6. <meta name="apple-mobile-web-app-capable" content="yes">
7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
8.
9. <link rel="stylesheet" href="css/mui.min.css">
10. <script src="js/mui.min.js"></script>
11. <script src="js/app.js"></script>
12. </head>
13. <body>
14. <div class="mui-bar mui-bar-tab" >
15. 这是底部信息
16. </div>
17. <div class="mui-content-padded" >
18. <form class="mui-input-group">
19. <div class="mui-input-row">
20. <label>⽤户名</label>
21. <input type="text" id="username" placeholder="⽤户名">
22. </div>
23. <div class="mui-input-row">
24. <label>密码</label>
25. <input type="password" id="userpassword" placeholder="密码">
26. </div>
27. </form>
28. </div>
29. <div >
30. <button class="mui-btn mui-btn-primary" id="loginBtn">登录</button>
31. <button class="mui-btn mui-btn-primary" id="regBtn">注册</button>
32. </div>
33. <script>手机上可以打html与css的app
34. mui.init();
35. mui.plusReady(
36. function() {
37. ElementById("loginBtn").addEventListener('tap', function(){
38. alert("点击了登录按钮");
39. });
40. }
41. );
42. </script>
43. </body>
44. </html>
这时，你可以把⼿机连接到电脑上，然后进⾏调试，就可以看到第⼀个登录的画⾯了。点击登录按钮，会弹出”点击了登录按钮“这个对话框。
对于mui，虽然你可以不使⽤mui 组件，但是⼀些基本的规则，例如 mui.init，mui.plusReady 这样的⽅法，还是要使⽤的。
另外，mui 的布局⽅案中没有垂直居中的⽅式（希望以后能增加上），虽然⽅式有很多，但是仍然推荐这个：
接下来，我们就要实现登录按钮通过ajax与后台进⾏交互。
由于这篇内容已经够多，将在下⼀篇⾥分享给⼤家。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论