1、快速构建页面
1.1 新建含mui的HTML文件
在Hbuilder中，新建HTML文件，选择”含mui的HTML“模板，可以快速生成mui页面模板，该模板默认处理了mui的js、css资源引用。
图1.1 MUI目录
1.2输入mheader
顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏。
1.3输入mbody
除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。
图1.2 MUI顶部
1.4设置底部导航栏
第一种，MUI有自带的图标库
使用时，只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标：
<span class="mui-icon mui-icon-weixin"></span>
第二种，可以增加自定义icon图标
登录阿里巴巴矢量图标库，选择图标加入购物车，然后存储为项目，下载到本地，将iconfont.css和iconfont.ttf分别放css和fonts目录下。修改iconfont.css中的文件路径
图1.3修改iconfont.css路径
代码效果如下图：
图1.4 MUI页面框架
2、添加页面内容
在MUI官网https://dev.dcloud.net.cn/mui/有各种组件，直接选择合适的组件，复制粘贴，完成布局
3、代码实例
图3.1 MUI实例效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
<style type="text/css">
.mui-bar-tab .mui-tab-item.mui-active
{
color: #559A47;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content">
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon iconfont icon-shouye"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-tuijian"></span>
<span class="mui-tab-label">推荐</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-xiaoxi"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-wode"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="//placehold.it/400x300">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="//placehold.it/400x300">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="//placehold.it/400x300">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="//placehold.it/400x300">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="//placehold.it/400x300">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="//placehold.it/400x300">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="//placehold.it/40x30">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="//placehold.it/40x30">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="//placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
END主 编 | 王文星
责 编 | 来人间凑数
where2go 团队
微信号：算法与编程之美
