MUI框架的基本使用

要使用MUI框架，在Hbuilder中必须新建HTML5+ APP，并且创建MUI项目，Hbuilder会自动生成代码代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-sc

st紫月

5864人浏览 · 2021-05-31 09:47:33

st紫月 · 2021-05-31 09:47:33 发布

要使用MUI框架，在Hbuilder中必须新建HTML5+ APP，并且创建MUI项目，Hbuilder会自动生成代码

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"/
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">标题</h1>
	</header>
	<footer class="mui-bar mui-bar-footer">
		底部
	</footer>
	<div class="mui-content">
		主体
	</div>
	<script type="text/javascript" charset="utf-8">
	    mui.init();
	</script>
</body>
</html>

效果如下：
在这里插入图片描述

当底部内容为选项卡的时候，会将.mui-bar-footer替换为.mui-bar-tab,代码如下：

<!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"/
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">标题</h1>
	</header>
	<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 mui-active">
			<span class="mui-icon mui-icon-phone"></span>
			<span class="mui-tab-label">电话</span>
		</a>
		<a class="mui-tab-item mui-active">
			<span class="mui-icon mui-icon-email"></span>
			<span class="mui-tab-label">邮件</span>
		</a>
		<a class="mui-tab-item mui-active">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">设置</span>
		</a>
	</nav>
	<div class="mui-content">
		主体
	</div>
	<script type="text/javascript" charset="utf-8">
	    mui.init();
	</script>
</body>
</html>

效果如下：
在这里插入图片描述

在子页面时，想要出现一个返回按钮，代码如下：

		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">标题</h1>
		</header>
		<footer class="mui-bar mui-bar-footer">
			底部
		</footer>
		<div class="mui-content">
			主体
		</div>
		<script type="text/javascript" charset="utf-8">
		    mui.init();
		</script>

效果如下：
在这里插入图片描述

在使用时要注意这两个小细节：
1.固定栏靠前，所谓MUI的固定栏，也就是class属性带有 mui-bar 属性的HTML元素节点，它们都是基于fixed固定定位的元素，常见组件包括：顶部导航栏（HTML元素的class属性包含了 mui-bar-nav），底部工具条（class属性中包含了 mui-bar-footer），底部选项卡（class属性中包含了mui-bar-tab）。它们一定要放在class属性包含mui-content的属性之前，即使是底部工具和底部选项卡，也要放在前面，否则固定栏会遮住分主部分，因为固定栏是基于fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮挡
2.为了使用简便，建议将除固定栏之外的所有内容，全部放在class属性为mui-content的容器中

折叠面板：

<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">面板1</a>
				<div class="mui-collapse-content">
					<p>子面板1内容</p>
				</div>
				
			</li>
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">面板2</a>
				<div class="mui-collapse-content">
					<p>子面板2内容</p>
				</div>
			
			</li>
		</ul>

效果如下：

在这里插入图片描述
数字角标：

<span class="mui-badge">1</span>
		<span class="mui-badge mui-badge-primary">12</span>
		<span class="mui-badge mui-badge-success">123</span>
		<span class="mui-badge mui-badge-warning">3</span>
		<span class="mui-badge mui-badge-danger">45</span>
		<span class="mui-badge mui-badge-purple">456</span>

效果如下：

在这里插入图片描述

按钮：

<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>

在这里插入图片描述

actionsheet（操作表）
actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；

<button  type="button" class="mui-btn-blue" οnclick="showMenu();">点击</button>
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
		    <!-- 可选择菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a href="#">菜单1</a>
		      </li>
		      <li class="mui-table-view-cell">
		        <a href="#">菜单2</a>
		      </li>
		    </ul>
		    <!-- 取消菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a href="#sheet1"><b>取消</b></a>
		      </li>
		    </ul>
		</div>
		<script type="text/javascript">
			function showMenu(){
				mui('#sheet1').popover('toggle');
			}
		</script>

在这里插入图片描述
badge（数字角标）
数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标，如下：

<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>

在这里插入图片描述
若无需底色，则增加.mui-badge-inverted类即可

button（按钮）
mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如：通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮；若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可

<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>

在这里插入图片描述
加载中按钮：

//data-loading-text可以自定义文字
<button type="button" data-loading-text="登录中" class="mui-btn mui-btn-blue">确认</button>
		<script type="text/javascript">
		mui(document.body).on('tap', '.mui-btn', function(e) {
		    mui(this).button('loading');
		    setTimeout(function() {
		        mui(this).button('reset');
		    }.bind(this), 2000);
		});
		</script>

在这里插入图片描述

复选框：

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可

<div class="mui-input-row mui-checkbox">
  <label>checkbox示例</label>
  <input name="checkbox1" value="Item 1" type="checkbox" checked>
</div>

在这里插入图片描述
单选框：

<div class="mui-input-row mui-radio mui-left">
		  <label>checkbox示例</label>
		  <input name="checkbox1" value="Item 1" type="radio" checked>
		</div>
		<div class="mui-input-row mui-radio mui-left">
		  <label>checkbox示例</label>
		  <input name="checkbox1" value="Item 1" type="radio" checked>
		</div>

在这里插入图片描述

MUI对话框：
1.mui.alert( message, title, btnValue, callback [, type] )
message
Type: String
提示对话框上显示的内容
title
Type: String
提示对话框上显示的标题
btnValue
Type: String
提示对话框上按钮显示的内容
callback
Type: Function
提示对话框上关闭后的回调函数
type
Value: ‘div’
是否使用h5绘制的对话框

在这里插入图片描述
2.mui.confirm( message, title, btnValue, callback [, type] )
message
Type: String
提示对话框上显示的内容
title
Type: String
提示对话框上显示的标题
btnValue
Type: Array
提示对话框上按钮显示的内容
callback
Type: Function
提示对话框上关闭后的回调函数
type
Value: ‘div’
是否使用h5绘制的对话框

实例代码：mui.confirm(‘MUI是个好框架’,‘Hello MUI’,new Array('是,‘否’),function(e){
if(e.index==1){
mui.toast(666);
}
});
如果想要判断用户的选择是哪一个，可以在后面加一个回调函数，形式参数为e，e.index为0代表用户选择是，为1代表用户选择否

在这里插入图片描述

3.mui.prompt( message, placeholder, title, btnValue, callback[, type] )
message
Type: String
提示对话框上显示的内容
placeholder
Type: String
编辑框显示的提示文字
title
Type: String
提示对话框上显示的标题
btnValue
Type: Array
提示对话框上按钮显示的内容
callback
Type: Function
提示对话框上关闭后的回调函数
type
Value: ‘div’
是否使用h5绘制的对话框

实例代码：
mui.prompt(‘请输入您对MUI的评语’,‘性能好’,‘Hello MUI’,new Array(‘取消’,‘确认’),function(e){
if(e.index==1){
mui.toast(e.value);
}else{
mui.toast(‘您取消了评语’);
}
})
在这里插入图片描述

mui表单的基本使用：

<form class="mui-input-group">
			<div class="mui-input-row">
				<label>用户名</label>
				<input type="text" class="mui-input-clear" placeholder="请输入用户名" />
			</div>
			<div class="mui-input-row">
				<label>密码</label>
				<input type="password" class="mui-input-password" placeholder="请输入密码">
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary">确认</button>
				<button type="button" class="mui-btn mui-btn-danger">取消</button>
			</div>
		</form>

mui-input-clear可以实现快速清空表单中内容的功能，mui-input-password可以实现显示密码的功能
在这里插入图片描述

列表:

<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1</li>
    <li class="mui-table-view-cell">Item 2</li>
    <li class="mui-table-view-cell">Item 3</li>
</ul>

在这里插入图片描述

列表添加导航栏箭头：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 1</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 2</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 3</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="../images/shuijiao.jpg">
            <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="../images/muwu.jpg">
            <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="../images/cbd.jpg">
            <div class="mui-media-body">
                CBD
                <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
        </a>
    </li>
</ul>

在这里插入图片描述

进度条：

<div id="demo1" class="mui-progressbar">
			<span></span>
		</div>
		<script type="text/javascript">
			mui('#demo1').progressbar({progress:20}).show();
			//progress:20代表进度条已经过20%
		</script>

在这里插入图片描述
switch开关：

<div class="mui-switch" id="mySwitch">
			<div class="mui-switch-handle"></div>
		</div>
		<script type="text/javascript">
			var mySwitch =document.getElementById('mySwitch');
			mySwitch.addEventListener('click',function(){
				var isActive = mySwitch.classList.contains('mui-active');
				//通过是否包含mui-active类来判断当前按钮的状态
				if(isActive){
					console.log('打开');
				}
				else{
					console.log('关闭');
				}
			})
		</script>

在这里插入图片描述

1.内联块元素和块级元素的设置：
如果需要把HTML元素快速转换成内联块元素，可以给元素class属性添加mui-inline类，也就是设置css属性display：inline-block。同理，给元素class属性设置mui-block类，也就是设置css属性display：block

2.浮动：
给元素class属性设置mui-pull-left实现左浮动，设置mui-pull-right实现右浮动，设置mui-clearfix

3.列表元素的处理：
ul标签在浏览器中显示时，会有默认的原点和内边距，可以给ul元素的class属性设置mui-list-unstyled去掉，设置mui-list-inline将li标签设置为内联块元素

4.元素的显示与隐藏
可以给HTML元素的class属性设置mui-visibility让元素可见，class属性设置mui-hidden隐藏元素

mui对象的内置方法和对象：
1.mui()方法：
mui()方法使用css选择器获取HTML元素对象，返回一个mui对象数组

mui("p");	//选取所有的<p>元素
mui("p.title");	//选取所有包含.title类的<p>元素

若要将mui对象转化成DOM对象，可以使用如下方法：

//obj1是mui对象
var obj1 = mui("#title");;
//obj2是DOM对象
var obj2 = obj1[0];

2.each()方法：
each即是一个类方法，同时也是一个对象方法，两种方法的适用场景不同，可以使用mui.each()去变力数组或者json对象，也可以使用mui(selector).each()去遍历DOM结构

3.init()方法：
MUI框架将很多功能配置都集中在mui.init()方法中，要使用某项功能，只需要在mui.init()方法中完成对应的参数配置即可，目前支持在mui.init方法中配置的功能包括创建子页面/关闭页面/手势事件配置，预加载，下拉刷新，上拉加载，设置系统状态栏背景颜色，配置形式如下：

mui.init({
	//子页面
	subpages:[{
		
	}],
	//预加载
	preloadPages:[
	
	],
	//下拉刷新，上拉加载
	pullRefresh:{
		
	},
	//手势配置
	gettrueConfig:{
		
	},
	//侧滑关闭
	wipeBack:true,
	
	
})

4.scrollTo()方法：
滚动窗口屏幕指定位置，该方法是对window.scrollTo()方法在手机端的增强实现，可以设置滚动动画时间以及滚动结束后的回调函数，鉴于手机屏幕大小，该方法仅可以实现屏幕纵向滚动

mui.scrollTo(ypos[,duration][,handler]);
ypos是整形值，要在窗口文档显示区左上角显示的文档的y坐标
duration是滚动时间周期，单位是毫秒
handler是滚动结束后执行的回调函数

例如：1秒钟之内滚动到页面顶部：
mui.scrollTo(0,1000);

5.mui.os对象：
在浏览器中，经常需要通过navigator.userAgent判断当前运行环境，MUI框架对此进行了类似的封装：

属性说明
mui.os.plus 判断是否在基座中运行
mui.os.stream 判断是否为流应用
mui.os.android 判断是否为Android
mui.os.ios 判断是否为ios
mui.os.ipad 判断是否为ipad
mui.os.iphone 判断是否为iphone
mui.os.wechat 判断是否在微信中运行
mui.os.verson 返回当前运行环境的版本号

事件管理：
1.tap事件
快速响应式移动应用开发实现的重中之重，tap事件能实现快速响应

ele.addEventListener('tap',function(){
	
})

2.事件绑定
除了可以使用addEventListener()方法监听某个特定元素上的事件外，也可以使用.on()方法实现事件的绑定

mui(selecor).on(event,selector2,handler);

event是String类型，代表要监听的事件名称，如tap
handler式事件触发时的回调函数
selector1和selector2都是选择器，但是selector2必须是selector1代表的HTML元对象下面的后代选择器

代码：

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
	//监听选择器  .mui-table-view对象下面的子元素选择器".mui-table-view-cell"对象的tap事件
	
})

3.事件取消
使用on方法绑定事件后，若希望取消绑定，则可以使用off()方法
mui(selector).off():删除mui对象上所有的事件
mui(selector1).off(event,selector2):删除selector1选择器对应的HTML对象中的selector2对应的子对象上特定事件的所有回调
mui(selector1).off(event,selector2,handler):删除selector1选择器对应的HTML对象中对应的selector2子对象上之前绑定的事件函数，不支持匿名函数

4.事件触发
mui.trigger()方法可以动态触发特定DOM元素上的事件。

mui.trigger(element,event,data);
/*
element是触发事件的DOM对象
event是事件名称，如tap
data是JSON对象格式，代表需要传递给事件的业务参数
*/
例如：
btn.addEventListener("tap",function(){
	console.log("tap event trigger");
})
//自动触发按钮的点击事件
mui.trigger(btn,'tap');

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

事件名称	说明
tap	单机屏幕
doubletap	双击屏幕
longtap	长按屏幕
hold	按住屏幕
release	离开屏幕
swipeleft	向左滑动
swiperight	向右滑动
swipeup	向上滑动
swipedowm	向下滑动
dragstart	拖动开始
drag	拖动中
dragdowm	拖动结束

6.屏幕输出函数toast：

<button type="button" class="mui-btn mui-btn-blue" οnclick="qq();">按钮</button>
		<script type="text/javascript">
			function qq(){
				mui.toast(666);
			}
		</script>

在这里插入图片描述

1.mui插件初始化：使用mui.init()进行mui插件初始化

2.页面初始化：
在App开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中

3.事件触发：
使用mui.trigger()方法可以动态触发待定DOM元素上的事件

var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function(){
	console.log("tap event trigger");
})
//触发submit按钮的点击事件
mui.trigger(btn,"tap");

MUI Ajax的使用方法：
mui框架基于html5+的XMLHTTPRequest，封装了常用的Ajax函数，支持GET、POSST请求方式，支持返回json、等数据类型

1.mui.ajax()
在这里插入图片描述

<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
			    document.querySelector('#btn1').addEventListener('tap',function(){
					mui.ajax({
						url:'www.baidu.com',
						type:'GET',
						success:function(data){
							mui.toast(data);
						},
						error:function(xhr,type,errorThrown){
							mui.toast(type);
						}
					});
				});
			});
		</script>

Ajax简化模式：
mui.post(url[,data][,success][,dataType])
url:地址，data：携带的请求数据，success：请求成功的回调函数，dataType：返回数据的类型
例：

mui.post('www.baidu.com',{
	username:'username',
	password:'password'
},function(data){
	//服务器返回响应，根据响应结果，分析是否登录成功
	
],'json')

mui.get(url[,data][,success][,dataType])

mui.getJSON()方法是在mui.get()方法基础上的进一步简化，限定返回json格式的数据，其他参数和mui.get()方法一致

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

解锁HDC 2024之旅：从购票到报名，全程攻略

华为云开发者联盟

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

华为云开发者联盟

华为云云原生FinOps解决方案，释放云原生最大价值

华为云开发者联盟

所有评论(0)

查看更多评论

st紫月

@ziyue13

已为社区贡献8条内容