跨平台APP开发-MUI之快速搭建一个APP

笔者之前在大学曾经需要做一个手机端的app，因为笔者没有学过安卓，ios，故而经过了解开始使用手机端的UI框架来制作跨平台的app

使用MUI最好要懂的知识：

• HTML
• JS
• CSS
• 一门网页后端技术（javaweb、php…）

什么是MUI？

• MUI的定位是：最接近原生体验的移动App的UI框架。
• 基于mui的定位，产生了mui的几个特点，轻、小、只涉及UI、只为移动App而生、界面风格原生化。
• 这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。有些控件就是原生态的效果，mui起到了桥梁的作用

开发工具：

Hbuilder 下载地址跳转

MUI必须要说的特点

• 国产的有木有，全是中文有木有（滑稽）。对MUI是我们国人自己的ui框架，是目前国内最火的手机app前端框架。

废话不多说，直接开始干
首先打开下载好的开发工具，我们可以看到，全是中文。易于操作

点击—文件—新建—移动App

进入这个界面：我们可以看到，全是中文。

• 移动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，我们可以将此应用安装到自己的手机上，以及拖动到模拟器中，进行安装。
  

完成操作，感谢观看