01-mui框架使用概述

1 MUI概述

1.1 MUI诞生背景？

• 性能和体验的差距，一直是手机APP开发者放弃HTML5的首要原因。
• 浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦。

1.2 MUI简述

• 定位：最接近原生体验的移动APP的UI框架
• 特点：轻、小、只涉及UI、只为移动APP而生、界面风格原生化。
• MUI不封装DOM操作
  • 它专注于UI，不涉及dom操作，避免因为封装dom操作导致的性能下降。
  • 尽量使用或不用jQuery。
• MUI其实是一个前端框架，它和HTML5+、5+Runtime没有太大关系。
  • MUI是一个前端框架，HTML5+是一套HTML5能力扩展规范，HTML5+ Runtime是实现HTML5+规范的强化浏览器引擎。
  • HTML5+规范隶属于http://www.html5plus.org，定义了HTML5规范中没有但开发者做App需要的扩展规范。
  • DCloud的5+ Runtime完整的实现了HTML5+规范。同时5+ Runtime还实现了Native.js，一种通过js调用几十万原生API的技术。
  • 为了提升体验，mui势必会调用一些5+Rutime的增强能力，例如：plus.webview、plus.nativeobj、plus.nativeUI。

1.3 相关资源

• DCLOUD社区（提供开发工具下载、相关技术文档、论坛、插件）：https://dcloud.io/
• MUI官网：https://dev.dcloud.net.cn/mui/
• HTML5+规范文档：http://www.html5plus.org/doc/h5p.html
• APP离线打包教程：https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android
• HBuilderX历史版本下载地址（w72y）：https://pan.baidu.com/share/init?surl=TZwqHpyNfwFXXtgIeQsOjA

注：HBuilderX高版本SVN插件安装不了，建议安装以前历史版本，先安装SVN插件，然后再通过升级版本来解决SVN插件安装不了问题。

2 项目环境搭建

2.1 MUI基本项目搭建

1. 打开HBuilderX，新建项目

2. 创建mui基础项目

3. 启动模拟器，并将项目运行在模拟器上

注：此时项目启动成功，并且可以正常运行在模拟器上。

2.2 项目目录结构分析

• css：mui的样式文件目录或其他样式文件。
• fonts：mui使用的字体文件或扩展其他字体文件，例如：阿里的iconfont字体文件。
• js：mui的js包或其他第三方js包。
• unpackage：打包APP时忽略的目录。
• index.html：APP的默认入口文件，可在manifest.json文件中配置。
• manifest.json：APP的配置文件，例如：APP安装图标、启动界面、入口页面、权限等配置。

注：MUI源码：https://github.com/dcloudio/mui/releases