最接近原生APP体验的高性能前端框架 ：MUI框架 基础入门（特性，组件，表单）

---

前言

MUI框架是一款轻量级的面向移动端的web前端框架，在开发者仅掌握前端开发技术的情况下，就能快速地开发一款移动端应用。简而言之，即使你在对于安卓，IOS系统底层一无所知的情况下，也能开发出一款高性能的移动端app。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、特性

1.轻量

作为一款框架，压缩后的JS和CSS文件仅有100+K和60+K

2.原生UI

MUI对于手机原生UI的模仿还是非常到位的，有以假乱真内味儿~（当然也可能是心理作用）

3.流畅度

这点是官网给的，由于没用使用MUI真正开发过项目，所以这点就先照搬官网呗。

---

二、组件

1.折叠面板，卡片，轮播图，列表

（1）折叠面板

代码如下（示例）：

<ul class="mui-table-view">
	<li class="mui-table-view-cell mui-collapse">
		<a class="mui-navigate-right" href="#">复选框
			<span id="" class="mui-badge mui-badge-primary">1span>
		a>
		<div class="mui-collapse-content">
			<div class="mui-input-row mui-checkbox">
				<label>选项1label>
				<input type="checkbox" class="input-checkbox" name="" id="" value="a" />
			div>
			<div class="mui-input-row mui-checkbox">
				<label>选项2label>
				<input type="checkbox" class="input-checkbox" name="" id="" value="b" />
			div>
		div>
		
	li>
ul>

需要调用mui-table-view ， 和 mui-table-view-cell mui-collapse，其中，mui-collapse 应作用与

上，作为内显示可见的内容，而mui-collapse-content则作用与要被隐藏起来的内容。

（2）卡片
代码如下（示例）：

	<div class="mui-card">
		
		<div class="mui-card-header mui-card-media">
			<img src="../images/logo.png" />
			<div class="mui-media-body">
				作者
				<p>副标题p>
			div>
		div>
		
		<div class="mui-card-content">
			<a href="#">
				<div class="mui-card-header mui-card-media" 
				style="height:40vw;background-image:url(imgs/getdata.png)">div>
				<p>内容p>
			a>
		div>
		
		<div class="mui-card-footer">页脚div>
	div>

（3）轮播图
如果要使用JS操作轮播图，代码必须写在这个plusReady事件内才能生效，且只有在真机运行的时候才能看到效果
代码如下（示例）：

<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
	<div class="mui-slider-item">
		<img src="imgs/getdata.png" style="width: 100px;height: 100px;">
	div>
	<div class="mui-slider-item">
	  <img src="imgs/home.png" style="width: 100px;height: 100px;">
	div>
  div>
div>

（4）列表
代码如下（示例）：

<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="imgs/getdata.png">
            <div class="mui-media-body">
                标题
                <p class='mui-ellipsis'>p>
				
				<div class="mui-input-row">
					<div class="mui-switch mui-active">
						<div class="mui-switch-handle">div>
					div>
				div>
            div>
        a>
    li>
ul>

2.角标，对话框，蒙板

（1）角标
代码如下（示例）：

<span id="" class="mui-badge mui-badge-primary">1span>

其实badge被我悄悄咪咪放到折叠面板上了~

（2）对话框
对话框分为三种，一种就是确认框(只有一个按钮)，一种是两个按钮的确认取消操作的，还有一种是带输入框的
代码如下（示例）：

触发事件的按钮

<button type="button" class="mui-btn mui-btn-blue" onclick="showDialog();">打开对话框button>

function showDialog(){
     
	//方法1
	 mui.alert('已触发对话','提示','好的~',function(){
     
	 	console.log('回调成功~');
	 });
	
	//方法2
	 mui.confirm('已触发对话','提示',['取消','确认'],function(){
     
	 	console.log('回调成功~');
	 });
	
	//方法3
	mui.prompt('已触发对话','请输入','提示',['取消','确认'],function(e){
     
		console.log('回调成功~');
		console.log(e.value); //获取输入值
	},'div');
	
}

（3）蒙板
代码如下（示例）：

function showMask(){
     
	var mask = mui.createMask(function(){
      //回调
		mui.toast('蒙板取消');
	});
	mask.show();
}

3.日期选择器

代码如下（示例）：

function getDates(){
     
	var date = new Date();
	date.setFullYear(2021,0,9); //默认时间
	var minDate = new Date();
	minDate.setFullYear(2019,11,31); //最早日期
	var maxDate = new Date();
	maxDate.setFullYear(2020,11,31); //最晚日期
	
	plus.nativeUI.pickDate(function(e){
      //成功选中
		//获取用户选择的时间
		var d = e.date;
		console.log(d.format());
		mui.toast(d.getFullYear()+"-"+d.getMonth()+"-"+d.getDay());
		
	},function(e){
      //未选中
		mui.toast("还未选中时间哦~");
	},{
      //数据模型
		title:"请选择时间",//标题
		date:date,
		maxDate:maxDate,
		minDate:minDate
	});
}

4.进度条，滑块，开关

（1）进度条
代码如下（示例）：

<div class="" style="padding: 20px;">
	<div id="progress_1" class="mui-progressbar">
		<span>span>
	div>
div>

MUI通过了专门的API操作进度条：

function setProVals(){
     
	var val = 10;
	mui('#progress_1').progressbar({
     progress:val}).show();
}

（2）滑块
代码如下（示例）：

<div class="mui-input-row mui-input-range">
	<label>滑块label>
	<input type="range" min="0" max="100" value="50">
div>

（3）开关

HBuilder中输入switch即可

代码如下（示例）：

<div class="mui-input-row">
	<label>Switchlabel>
	<div class="mui-switch mui-active">
		<div class="mui-switch-handle">div>
	div>
div>

---

三、表单

其实表单是内容跟bootstrap的内容是几乎一模一样的，就是把col换成了mui而已

	<form class="mui-input-group">
		<div class="mui-input-row">
			<label>用户名label>
			<input type="text" class="mui-input-clear" placeholder="请输入">
		div>
	form>

四、总结（废话）

难道已经到了要靠记笔记增加幸福指数的时候了嘛？每次看到这些笔记都是满满的幸福感