编写一个简单的php页面
HBuilder提供一组UI组件，请参看这里：MUI。

对于一个认识web开发的人来说，上面的这些都太容易了，分分钟就可以搞定了。但是别忘了这是移动开发，与一般的扫瞄器应用还是有所不同。接下来我们来看看页面的布局应当怎么设计。

这里大家不要遗忘一个原则，由于目前HTML5+ 的实现仅此一家（HBuilder），所以我们在实现各种功能的时候，一定要遵循HBuilder官方推举的办法。

接下来我们从一个index.html开头。mui框架常用组件有哪些

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

Html代码


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

Html代码

假如你想问假如不用 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代码

这是底部信息

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

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

Html代码


用户名

密码

登录

注册

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

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


至于你想让输入框垂直居中，请自行查如何让 div 垂直居中，解决计划是一样的。

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

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

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

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


     

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。