前言：随着互联网技术的进步，现已衍生出一些基于APP开发的前端框架。只需要一套代码就可以打包基于 安卓和ios系统的APP。哎，好多安卓和ios工程师要下岗啊！
一、为什么要学习mui?
当前三大前端APP主流框架有：mui、ionic、framework7。当然看了数据对比似乎framework7更胜一筹，但是mui学习更简单对后台工程师和全栈来说是福音，更何况是在以前接触过mui的基础上。framework7后期会学习。
二、mui能干什么？
①：改变传统模式用 安卓、ios两种工程师开发APP的模式。一套代码生成不同的应用程序。
②：为解决HTML5在低端 Andorid机上的性能缺陷。mui引入了原生加速，其中最关键的就是webview控件。因此mui若要发挥其全部能力，需要和5+APP配合使用，若脱离5+APP，mui功能会受限制。
③：mui以窗口形式加载。
三、mui优势
①：文件极小，100k的js文件，60k的css文件。原生编写，不依赖任何三方框架
②：极强，xcode和Android studio里所有原生控件都具备
③：高性能，精练的代码、适时的5+原生动画调用，达到原生应用的体验
④：多端发布，编写一套代码，iOS、Android、浏览器、微信H5、百度直达号、流应用全覆盖
四、开发工具 HBuilder http://www.dcloud.io/hbuilderx.html
HBuilder是一款国产开发工具，全中文，有BUG。
五、创建APP模板
利用HBuilder创建一个APP项目和传统的Web项目差不多，老版本HBuilder选择创建移动APP，新版本的选择5+APP（H5标准的跨平台APP）或uni-app（开发一次同时发布为andorid、ios、小程序、H5等多个平台）具体文件目录如下：
①：css
②：fonts 字体图标文件
③：js
④：unpackage 打包
⑤：index.html
⑥：manifest.json 设置App的参数，例如APP名称等
当然高版本的HBuilder不同的模板还有更高级的功能，比如自动创建登录注册等页面。小白同学一定要知道这些，不然幸亏半天写页面不然别人点点点几下。
六、mui使用组件
使用mui引入其css、js、fonts即可。重点部分查看官网http://dev.dcloud.net.cn/mui/ui/ 的组件、窗口管理、事件管理的使用。
下面介绍初学mui的三点常识
①：在HTML中引入以m开头，比如mui封装的header就加mheader。
②：怎么改变元素样式，在class属性名后面空格新增header，在css文件中添加.header属性样式引用即可。
③：在网页中出现两个div之间有灰白色空格线的去除方法，body为受影响的元素，可自行选择。
body{
-webkit-box-shadow:none;
box-shadow:none;
}
七、与后台数据交互
①：Art-template 用于页面的动态渲染，官方文档http://aui.github.io/art-template/docs/syntax.html
②：Ajax 向后台请求数据 ,mui有对ajax的封装
八：运行移动模式
①：安装手机模拟器：推荐 夜神手机模拟器
②：参考 https://www.jianshu.com/p/a2631cdfc049
九：打包
点击HBuilder工具栏的“发行”选择 发行为原生安装包
修改应用名称，即APP名称
云端获取，登录远端账号
图标Logo需要.png格式的图片
ios打包需要账号，这个是收费的