01mui框架使用概述

1 MUI概述

1.1 MUI诞生背景&＃xff1f;

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

1.2 MUI简述

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

1.3 相关资源

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

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

2 项目环境搭建

2.1 MUI基本项目搭建

1. 打开HBuilderX&＃xff0c;新建项目

2. 创建mui基础项目

3. 启动模拟器&＃xff0c;并将项目运行在模拟器上

注&＃xff1a;此时项目启动成功&＃xff0c;并且可以正常运行在模拟器上。

2.2 项目目录结构分析

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

注&＃xff1a;MUI源码&＃xff1a;https://github.com/dcloudio/mui/releases