教你在五分钟构建一个App页面

前言

最近参加学校比赛，由于业务需求要做一个App，当时心想我不是web开发的吗?App跟我有啥关系？而且之前也没去了解相关的东西，当时很慌啊队友还说上一次某某某三天就出了个App，我…
怀着忐忑的心情上度娘”app怎么开发“，发现常用的语言有java，html5，css3，javascript等等。博主是学PHP的且对安卓，java一窍不通。
后来了解到App其实是有三种类型 原生应用程序（Native App）,混合应用程序（Hybrid App），Web版APP （Web App）

对于他们的区别，百度百科给出如下解释

Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。

WebApp是指基于Web的系统和运用，其作用是向广大的最终用户发布一组复杂的内容和功能。

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好的用户交互体验的优势”和“Web App跨平台开发的优势”。

由于篇幅的原因，对于它们三者的详细区别这里就不在阐述，想了解更多可参照这篇文章

博主今天给大家带来的是WebApp的开发，在此之前请确保你对HTML5,CSS3,JavaScript有一定的了解。
我们知道，网页响应式开发常用的框架是Bootstrap，但对应移动App的开发我们就没有必要使用Bootstrap了，因为它好多样式也是争对网页，用他来开发移动app显得有点重了。

这里给大家推荐一款专门争对移动app开发的框架----mui
什么是mui
他官网上是这样说的”最接近原生APP体验的高性能前端框架“。
开发移动app的框架有很多，既然他敢这么说肯定有一定的实力
这里我总结了三个使用mui的理由 简，快，易。
简

1. mui文件大小只有108kb
2. mui 提供20多个控件 和50多个js api 及100多个样式

快

1. js加载快一般17ms左右
2. 体量小页面绘出快，预加载，专场快

易
使用HbuilderX编辑器 自带mui代码快捷操作，边看边改，模拟器调试。

如何使用mui
如果你使用mui框架，那你一定要用HbuilderX，他俩组合才体现了mui”易“的特点。
Hbuilder官网https://www.dcloud.io/
选择第一个

点击下载

选标准版即可

下载安装后你无需关注mui下载的问题，因为这个编辑器自带mui。
我们点击文件—新键项目，进行如下操作

这是创建成后的目录结构

接下来我们可以参照mui官方文档进行愉快的编码了。
我们往下拉，有一个代码块，使用代码块可以快速方便的为我们创建一个应用

列出常用的代码块

我们只需在编辑器输入 m…之类的东西即可快速创建页面，如下列创建一个app的首页

这是简单的编写了结构，没有设置样式，如果你对css，html了解相信这些都不是问题

我们用到的代码块有

• mheader:（标题栏）
  – mText_Search(搜索框)
• mBody(主体)
  – mGallery(图片轮播)
  – mGrid(九宫格)
  – mListMedia(图文列表图片居左)
• mTab(底部选项卡)

需要说明的是，mui只是简单构建一个app页面，如果你要实现界面交互，还得学习HTML5plus的相关内容，如tab切换，调用手机硬件等等。

博主也是刚学还在不断地探索中

最后贡献一份app调试的方法
关于app的调试，可以直接通过浏览器打开，但是一些移动端相关的操作，必须借助真机或者模拟器来调试。

这里简单介绍真机调试。
首先将手机与电脑usb连接，可借助第三方软件连接手机如，360手机助手
在连接手机之前需要打开手机的开发者模式，并在打开usb调试

对于不同的手机开发者模式打开不同，大家自行百度
连接成功图示

完成上述步骤后，我们在编辑器菜单栏选择“运行”

点击运行到设置

底部控制台打印信息如下

第一次会在你的手机上面安装Hbuilder，然后手动或自动启动Bulilder即可在手机上运行
如下：

到此完成
【个人博客已上线】欢迎来访http://www.zihanzy.com