一、MUI框架（前端UI框架）

（一）MUI框架简介及优劣势分析：

1.MUI基本介绍及优劣势分析
MUI是一套前端框架，由DCLOUD公司研发而成，提供大量H5和js语言组成的组件，大大提高了开发效率，可以用于开发web端应用、web APP、混合开发等应用。利用MUI框架，用户在使用APP时可以得到接近原生APP的操作体验。
2.优劣势分析
优势：
目前的APP开发中，大部分还停留在webapp开发中，相当于用浏览器的方式去运行整个APP,由于浏览器天然的切页白屏，不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题，导致HTML5APP的用户体验比较差，而MUI框架在体验与性能上接近原生App效果。MUI框架以IOS7为基础，补充android特有控件，页面切换带有侧滑，下滑等效果，用户体验度高。 
对比其他移动端常用框架： 
JQUERY MOBILE: 性能低，样式丑。（MPAS以前用的UI框架） 
AngularJS的Ionic:PC端的angularjs框架引入移动端，有些笨重。 
Bootstrap: PC端的UI框架引入移动端，有些笨重。 
自定义样式（MPAS现阶段做法），缺点：所有样式都靠自己命名，写结构，开发量大，吃力不讨好，即使定义了公共样式，但新功能，新页面出来，难免和以前的页面样式有所不同。
引用注明：https://blog.csdn.net/lpf_leo1992/article/details/79290854

劣势：
MUI框架是以IOS7组件为原型进行设计，对于组件风格没有及时的与时俱进，组件样式也不够新，需要个人自定义出满意的样式

简单介绍HTML5PLUS：
    封装移动操作系统的系统调用，
    硬件驱动，通过原生JS操作移动硬件

二、APP开发环境及工具介绍

APP开发环境：HBuilder
工具：夜神模拟器

（一）配置文件使用步骤：
1.安装APP开发环境以及工具
2.配置文件：
在adb.bat文件中输入：

cd D:\Program Files\Nox\bin（夜神模拟器）
D:（对应以上路径盘符）
nox_adb connect 127.0.0.1:62001
nox_adb devices

cd E:\Flask\移动应用开发工具\HBuilder\tools\adbs（hbuilder APP开发环境）
E:（对应以上路径盘符）
adb connect 127.0.0.1:62001
adb devices

pause

 保存后右击打开（文件内的括号为对应路径说明，保存前需全部删除），最后显示点击任意键继续即配置完毕。

（二）夜神模拟器安装HBuilder APP
1.打开HBuilder
2.点击下方红框图标

第一次连接会有下图提示，然后点取消，再次点击步骤1的图标即可连接到夜神模拟器并打开APP

（三）制作如下图的APP界面

1.打开HBuilder,并新建项目——移动APP——模板选择mui项目，起个项目名称后点击完成

2.打开项目中的Index.html并进行编辑
3.生成标题——mhe

效果：

4.生成图片轮播图——msl，在此之前在 轮播图代码外用——mbo套起来


效果：

5.生成九宫格——mg

效果：

6.生成图文列表——mli,选择图片居左

效果：

7.生成底部选项卡——mta

效果：