MUI框架快速开发

创建项目

使用MUI框架搭建项目，首先我们要下载一个HBuilderX。使用HBuilderX新建一个项目，在工具栏选择文件–新建–项目。

选择5+App项目，选择mui项目模板，输入项目名称，创建成功！

项目目录如下，包含基本的mui的css、js文件，入口文件是index.html。

快速编写

标题

输入mh可以快速生成标题栏。

生成的代码如下。

页面效果如图所示。

页面主体

输入mbo，创建项目主体代码。

在mui-content包含的盒子内书写代码，属于项目主体的代码，当需要滚动的时候，mh生成的标题栏仍然一直在顶部。

底部选项卡

输入mt，得到底部选项卡。

页面显示如下。

常用关键词

mui-dom结构	标题	主体	选项卡	数字角标	按钮	九宫格	区域滚动	开关
md	mh	mbo	mt	mb	mbu	mg	ms	msw

字体图标

MUI集成了自己的字体图标，输入关键词mi回车就可以得到一个字体图标的代码。


mui提供的字体图标有限，有时候无法满足我们的需求，我们也可以使用第三方字体图标库，如阿里巴巴矢量图标库。

事件处理

MUI使用on绑定事件。
// 使用on()进行事件绑定--MUI事件处理，mui("").on(event,selector,handler)
// mui("选择器")，选中元素得到mui对象；event绑定事件名称；selector：事件委托机制，给前面选中元素内部元素添加事件；hanlder：事件回调函数；
mui(".myfooter").on("tap",".mui-tab-item",function(){
	alert("按钮被点击了！");
})	

常见手势事件

在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：

分类	参数	描述
点击	tap	单击屏幕
	doubletap	双击屏幕
长按	longtap	长按屏幕
	hold	按住屏幕
	release	离开屏幕
滑动	swipeleft	向左滑动
	swiperight	向右滑动
	swipeup	向上滑动
	swipedown	向下滑动
拖动	dragstart	开始拖动
	drag	拖动中
	dragend	拖动结束

窗口对象

1. H5+ Webview窗口对象
2. Webview介绍

底部选项卡-页面切换

底部选项卡

<nav class="mui-bar mui-bar-tab">
	<a class="mui-tab-item mui-active">
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item">
		<span class="mui-icon mui-icon-phone"></span>
		<span class="mui-tab-label">电话</span>
	</a>
	<a class="mui-tab-item">
		<span class="mui-icon mui-icon-email"></span>
		<span class="mui-tab-label">邮件</span>
	</a>
	<a class="mui-tab-item">
		<span class="mui-icon mui-icon-gear"></span>
		<span class="mui-tab-label">设置</span>
	</a>
</nav>

窗口对象设置

// 窗口对象设置。首先定义一个数组，把所有页面的html的名字存储下来
var subpage = ["home.html","wealth.html","praise.html","friends.html","mine.html"];
// 添加页面：得到当前页面的窗口对象，再得到另外五个页面的窗口对象，最后使用一个append方法将其添加进来即可
mui.plusReady(function () {
	// 先得到当前页面的窗口对象
	var currentWebview = plus.webview.currentWebview();
    for(var i= 0;i < 5;i++){
		// 将五个页面对应的窗口对象都创建出来
		var sub = plus.webview.create(subpage[i],subpage[i],{
			top:"50px",
			bottom:"50px"
		});
		// 将子窗口对象添加到当前页面窗口对象中
		currentWebview.append(sub);
		// 令打开APP首次展示的是首页，即subpage[0],若不加判断，则展示的是subpage[4]
		if(i > 0){
			sub.hide();
		}
	}
});

点击事件处理

// 事件处理。点击底部按钮，其实就是点击不同的超链接元素，切换不同的元素显示和隐藏。
// 首先，给超链接元素绑定事件，针对不同的href，显示/隐藏不同的webview
mui(".myfooter").on("tap","a",function(){
	// alert(this.href);
	var currentActiveTab = this.getAttribute("href");
	if(currentActiveTab == mui(".mui-active")[0].getAttribute("href")){
		return; 
	};
	plus.webview.hide(mui(".mui-active")[0].getAttribute("href")); // 隐藏
	plus.webview.show(currentActiveTab); // 显示
});

栅格系统

MUI 提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]，即可。

尺寸	超小屏幕(<400px)(Extrasmall)	小屏幕(≥400px) Small
类前缀	.mui-col-xs-[1-12]	.mui-col-sm-[1-12]
列（column）数	12
可嵌套	是

实例：
通过定义.mui-col-sm-6类在大屏(≥400px)设备上会展现为并排的两列,而.mui-col-xs-12在小屏(＜400px)设备上会覆盖之前定义的类展现为水平排列。

<div class="mui-content">
    <div class="mui-row">
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1    
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
        </div>
    </div>
</div>

页面传值

通过openWindow

old.html

<button type="button" class="mui-btn mui-btn-blue" id="openwindow">按钮</button>
<script type="text/javascript">
	var openwindow = document.getElementById("openwindow");
	openwindow.addEventListener("tap",function(){
		mui.openWindow({
			url:"new_file.html",
			id:"new_file.html",
			extras:{
				username:"爱发脾气的小老虎",
				password:"123456",
			}
		})
	})
</script>

new.html

<script type="text/javascript">
	mui.init()
</script>
<script>
	mui.plusReady(function(){
		// 获取当前的窗口对象下的username值
		var currentwindow = plus.webview.currentWebview();
		alert(currentwindow.username);
		alert(currentwindow.password);
	})
</script>

通过自定义事件

old.html

<button type="button" class="mui-btn mui-btn-blue" id="open2">自定义事件</button>
<script>
	var file = document.getElementById("open2");
	open2.addEventListener("tap",function(){
		// 指明要打开的窗口
		mui.openWindow({
			url:"new_file2.html",
			id:"new_file2.html",
		})
		var targetwebview = plus.webview.getWebviewById("new_file2.html");
		// 需要传值的目标webview，自定义事件名称,json格式的数据
		mui.fire(targetwebview,"getname",{username:"list"});
	})
</script>

new.html

<script type="text/javascript">
	mui.init()
</script>
<script>
	window.addEventListener("getname",function(e){
		alert(e.detail.username)
	})
</script>

常用关键词

折叠面板mac
操作表mact
数字角标mb
按钮mbt
复选框mck
字体图标mi
输入表单mip
列表ml
数字输入框mnu
单选框 mr
滑块 man
开关 msw

参考

1. MUI的简介