前言
最近参加学校比赛，由于业务需求要做一个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的理由 简，快，易。
简
- mui文件大小只有108kb
- mui 提供20多个控件 和50多个js api 及100多个样式
快
- js加载快一般17ms左右
- 体量小页面绘出快，预加载，专场快
易
使用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
