• MUI学习之路---了解MUI，MUI的第一个项目和页面的跳转

    MUI

    MUI概述：

    MUI是一款APP的前端框架
    进入官网可以浏览更加全面的API

    MUI官网

    特点：
    追求性能体验，是启动MUI项目的首要目标，轻量必然是重要特征；
    MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K

    第一个MUI项目：

    打开HBuilder，右键新建项目选择APP，选择带有mui项目的模板就可以生成第一个mui项目
    在这里插入图片描述
    创建好后自动生成一些文件
    在这里插入图片描述
    打开首页后里面自动为我们导入了对应的css文件和js文件。

    官网：顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏。
    根据官网的提示，我们输入输入mheader后，可以生成一个带有箭头的头部信息

    <!--
	声明头部栏mui-bar
	头部栏是一个导航形式mui-bar-nav			
-->
<header class="mui-bar mui-bar-nav">
	<!--
		mui-action-back声明一个后退的样式:
			action行动
			back后退				
	-->
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">标题</h1>
</header>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述
    生成头部导航后，我们继续输入下列代码：

    <!--
	mui-bar声明底部栏
	mui-bar-tab底部栏是一个表格形式
	
-->

<footer class="mui-bar mui-bar-tab">
	<a class="mui-tab-item mui-active" id="home">
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item mui-active" id="phone">
		<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>

</footer>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    生成一个底部导航栏。
    在这里插入图片描述
    从上面代码可以了解到几个标签的含义：

    • mui-bar：意为声明一个导航栏，-后面的不同参数，决定了其位置和定位的不同
      • nav表示以单个形式出现的导航多为头部
        • mui-bar-tab中每一项的标签需要有mui-tab-item的声明
      • tab表示以表格形式出现的导航多为底部
        导航中有的照片信息时MUI里自带的，比如我们创建的底部栏并没有导入图片，却有不同的图标

    接下来我们创建一个简单的折叠面板：

    <!--
	折叠面板
-->
<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>
</ul>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    可以发现，并没有出现对应的页面，是因为mui-bar标签声明的都为固定定位，会将一部分内容遮挡，官网也给我出们提示：

    官网：除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。
    所以切记，所有的内容一定要放进mui-content标签中也就是我们输入mbody生成的代码块中

    <div 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>
	</ul>
</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    页面跳转：

    由于mui框架屏蔽了onclick和href事件。所以不能用常规的a标签和onclick点击事件来跳转，只能来绑定监听事件来实现，

    参考:
    页面跳转

    个人喜欢用第三种

    示例：
    首先创建一个新的html页面

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>这是phone</h1>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    实现点击电话按钮，跳转到新html页面中：

    html：
	<a class="mui-tab-item mui-active" id="phone">
		<span class="mui-icon mui-icon-phone"></span>
		<span class="mui-tab-label">电话</span>
	</a>
js：
<script type="text/javascript" charset="utf-8">
	mui.init();
	document.getElementById("phone").addEventListener("tap",function(){
		mui.openWindow("phone.html","ID");
	})
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    尝试后成功点击跳转。
    tap可以理解为点击事件

  • 相关阅读:
    学生HTML个人网页作业作品----(画家企业8页)
    20230925工作心得
    每日三题 8.29
    【OpenCV实现平滑图像形态学变化】
    API网关与社保模块
    传感器信息系统中的节能收集研究（Matlab代码实现）
    嵌入式系统关于晶振的问题汇总
    .NET混合开发解决方案6 检测是否已安装合适的WebView2运行时
    浙江文投旗下良渚文创与艾叶文化达成战略合作，让版本文化“活”起来
    cmu中间代码groud_based_autonomy_basic在适配不同机器人时主要修改的参数
  • 原文地址：https://blog.csdn.net/qq_57480977/article/details/126478078