跨平台APP开发-MUI之快速搭建一个APP
笔者以前在大学曾经须要作一个手机端的app，由于笔者没有学过安卓，ios，故而通过了解开始使用手机端的UI框架来制做跨平台的appphp
使用MUI最好要懂的知识：
- HTML
- JS
- CSS
- 一门网页后端技术（javaweb、php…）
什么是MUI？
- MUI的定位是：最接近原生体验的移动App的UI框架。
- 基于mui的定位，产生了mui的几个特色，轻、小、只涉及UI、只为移动App而生、界面风格原生化。
- 这是一个能够方便开发出高性能App的框架，也是目前最接近原生App效果的框架。有些控件就是原生态的效果，mui起到了桥梁的做用
开发工具：
Hbuilder 下载地址跳转css
MUI必需要说的特色
- 国产的有木有，全是中文有木有（滑稽）。对MUI是咱们国人本身的ui框架，是目前国内最火的手机app前端框架。
废话很少说，直接开始干
首先打开下载好的开发工具，咱们能够看到，全是中文。易于操做
点击—文件—新建—移动App
进入这个界面：咱们能够看到，全是中文。html
- 移动app名称，就是要建立的app名字
- 位置，没必要多说，就是这个mui项目保存的位置
- 模板必定要选mui项目。咱们的初衷就是利用mui创建咱们的app，此选项帮助咱们项目中加入mui的js和css，项目中引用后遍能够使用mui的模块了。
创建完毕后，目录是这样的，发现它帮助咱们引用了mui.min.js和mui.min.css这两个压缩版，很是的方便。
mui.init()初始化js，这个时候须要打开mui的官方文档了。直接上地址。跳转
打开以后，咱们能够看到各类样式都用说明，你们能够根据本身的需求，选用各类样式以及观看他们的说明，本文只是初识mui并创建第一个app。
mui之因此说其方便，是应为其自己封装了各类代码块，举个例子，我如今须要作一个ul列表，就能够直接在html中输入“mlist”,咱们能够看到，有三种列表，都用中文介绍，你们能够根据本身需求选用。当选择敲击回车后 Hbuilder会帮助咱们生成html代码，而且自主引用mui中的css样式来生成列表。
同等功能的代码块有不少，具体参考mui官方文档
咱们会发现，mui很是方便，你们在开发过程当中，确定是要看一看本身写的界面在手机端上排版怎么样，是否整洁好看，嘿，Hbuilder有边开发边看排版的功能，点击右上角的“开发视图“的下拉框，而后点击边改变看模式。 （记得写好的代码要点Ctrl+s保存，这样视图才会刷新）咱们能够看到刚刚写上去的列表显示在了这个模拟手机视图上。
右边的界面只是视图，其实这些能够运行在手机上的，不过须要数据线连接手机，接下来咱们使用网络上的成品，安卓模拟器来模拟手机，将这个项目运行在安卓模拟器之上。由于安卓模拟器是第三方工具，因此须要一些简单的配置才能运行。
咱们点击如图所示的运行,咱们能够看到，能在各类浏览器上运行，通常检查代码，用到浏览器运行，真正要看排版，仍是得在手机上看才正确，咱们点击设置 “web服务器”
弹出以下界面,选中根目录，咱们能够看到最下方的文本框，“第三方Android模拟器端口”。笔者用的模拟器叫作夜神模拟器，它的端口号是62001，填写正确的端口后，点击肯定。而后运行下载好的模拟器
这里可能要等待一下子，由于HBuilder和模拟器连接须要一点时间
ok，等了大概一分钟,终于出来了，咱们能够看到，手机设备已经连接到了，而后咱们点击它，让他运行
出现此字样表示运行成功
接下来看向模拟器，咱们就会发现，界面上已经呈现出本身所编辑的样式了
接下来咱们将此项目打包成app,点击发行，选中第一个
弹出以下界面，这里只打包Android应用，由于ios须要开发者证书。而后点击打包，在弹出的一些东西咱们直接下一步，下一步，往下走，而后查看状态，等待打包完成
打包完成后以下界面,点击手动下载后，遍可下载成一个安卓的安装包，由此便制做成了咱们的第一个app，咱们能够将此应用安装到本身的手机上，以及拖动到模拟器中，进行安装。