初学mui感悟

mui介绍

• 官方文档：https://dev.dcloud.net.cn/mui/ui/
• MUI 官方号称最接近原生APP体验的高性能前端框架
• 简单的说就是webapp的一个开发框架
• MUI是国产的，北京数字天堂。和它配套的有开发工具 HBuilder，5+runtime
  5+runtime：可以将H5打包成native app，原理：利用原生态的webview去承载HTML5

mui特点

1. 轻量，原生UI，容易上手
2. 不需要其他框架基础：语法上和我们之前 学到用到 的写法是一样的。
3. 其他框架：ionic(Angular.js), react(native),vue(发音:view）
   vue、react、Angular.js是并列关系。
   4…Vue.js 和Angular.js、React.js 一起，并成为前端三大主流框架！

开发工具

推荐HBuilder 下载地址：http://www.dcloud.io/

创建简单Hello word

• 打开hbuilder点击最上方【文件】选项，选择【新建】（或者直接使用Ctrl + N快捷键），选择【移动App】。
• 创建移动APP工程：
• 设置【应用名称】（manifest.json里面的应用名称默认为此处所填的应用名称）
• 设置【位置】（存放项目源代码的文件夹，可以通过浏览按钮选择路径）
• 选择【mui项目】（如果hbuilder是最新版本，创建的工程会包含mui框架最新版本的css、js、字体文件）
  
  注：【空模板】只是初始化一个项目，不使用mui框架及模板；【mui登陆模板】是基于mui框架的一个包括登陆和设置的模板项目；【Hello H5+】是Hello html5+ 演示APP的源码，建议与APP一起对照，从而学习html5+的常用例子；【Hello mui】是mui组件的实际例子，借鉴价值极高，但是对于新手来说，开始门槛有点高，不方，后面我会将里面的例子进行详细讲解。
  这里我们选择【mui项目】开始我们的项目，默认项目目录结构如下：
  
  图[1-2] 项目目录结构图
  这里简单讲一下目录里面的文件，css文件夹是存放*.css文件（层叠样式表）的，主要是对页面布局进行修饰，mui.css是修饰mui框架组件的样式表，通过以mui-*为前缀的类选择器进行修饰，也就是你只需要引入mui.css文件，建议放在
  之间，然后按照mui一些固定结构去写就可以实现一些常用组件。组件使用方法可以查看后面的章节或者直接在【创建移动APP】工程时选择【Hello MUI】创建一个演示APP项目。
  fonts文件夹下的mui.ttf是矢量图标字体文件，这里是mui框架内置的图标，具体图标可以查看hello mui演示APP里面的icon(图标)查看，使用用法可以在演示APP项目查看examples文件夹下的icons.html，这个是基于Iconfont-阿里巴巴矢量图标库,用户可以自定义图标，具体方法请看这里mui如何增加自定义icon图标,因为mui.css里面是通过@font-face下的src: url(’…/fonts/mui.ttf’) format(‘truetype’);引入，若图标没有正常显示，请查看是否文件的路径是否正确。
  js文件夹下的mui.js文件是与mui.css配合使用的，主要是实现一些具有动态效果的组件，mui.js建议放在;前，mui.js暴露出来的公共方法是mui对象，mui.js只封装与组件相关的一些方法，开发者可以根据自己的需要自己选用其他js组件，官方推荐开发者使用原生js去书写，因为原生js效率更高，对于APP性能更佳。
  mui.min.css和mui.min.js文件是经过压缩后的文件，不影响使用，部署到实际项目中建议使用压缩版。
  unpackage文件夹不会被打包到APP安装包里面，有些文件不希望被打包，可以存放在这个文件夹下，当APP执行了在线打包后，这个文件夹下也会默认生成release文件夹（存放APP打包生成的安装包文件），res会存放启动图标等文件。
  manifest.json是APP配置文件，就是定义APP打包所需要的基本设置信息，默认为界面模式也有代码模式。具体配置介绍请查看 manifest配置指南。
  index.html为APP默认的页面入口文件，可以通过设置manifest.json中的【页面入口】进行修改。