登录页面
那我们先构思一下登录页面都需要什么内容:用户名,密码,登录按钮。如果你有一个得力的美工,我们还可以加上酷炫的美工设计。
HBuilder提供一组UI组件,请参看这里:MUI。
对于一个熟悉web开发的人来说,上面的这些都太简单了,分分钟就可以搞定了。但是别忘了这是移动开发,与普通的浏览器应用还是有所不同。接下来我们来看看页面的布局应该怎么设计。
这里大家不要忘记一个原则,因为目前HTML5+ 的实现仅此一家(HBuilder),所以我们在实现各种功能的时候,一定要遵循HBuilder官方推荐的方法。
接下来我们从一个index.html开始。
HBuilder默认生成的index.html里的meta部分,只有viewport一个属性:
Html代码
<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 文件。
Html代码
<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 之上。总之,最后的代码应该是这个样子:
Html代码
<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 的组件:输入框
Html代码
<div class="mui-content-padded" style="margin: 5px;">
<form class="mui-input-group">