MUI框架快速开发

创建项目

使用MUI框架搭建项目,首先我们要下载一个HBuilderX。使用HBuilderX新建一个项目,在工具栏选择文件–新建–项目。
在这里插入图片描述
选择5+App项目,选择mui项目模板,输入项目名称,创建成功!
在这里插入图片描述
项目目录如下,包含基本的mui的css、js文件,入口文件是index.html。
在这里插入图片描述

快速编写

标题

输入mh可以快速生成标题栏。
在这里插入图片描述
生成的代码如下。
在这里插入图片描述
页面效果如图所示。
在这里插入图片描述

页面主体

输入mbo,创建项目主体代码。
在这里插入图片描述
在mui-content包含的盒子内书写代码,属于项目主体的代码,当需要滚动的时候,mh生成的标题栏仍然一直在顶部。
在这里插入图片描述

底部选项卡

输入mt,得到底部选项卡。
在这里插入图片描述
页面显示如下。
在这里插入图片描述

常用关键词

mui-dom结构标题主体选项卡数字角标按钮九宫格区域滚动开关
mdmhmbomtmbmbumgmsmsw

字体图标

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的简介
  • 3
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值