本文详细介绍了MUI框架的手势事件、事件处理、登录页的创建以及使用HbuilderX开发工具。通过实例展示了如何使用MUI的.on()方法和addEventListener()方法进行事件绑定，以及登录事件的处理。同时，提到了HbuilderX作为新一代开发工具的优势，并提供了登录页的源码下载链接。
MUI 官网：https://www.dcloud.io/mui.html
MUI 文档：https://dev.dcloud.net.cn/mui/ui/
演示地址：https://dcloud.io/hellomui/ （支持手机和电脑浏览器）
开发工具：https://www.dcloud.io/hbuilderx.html （Hbuilder X）
mui框架中，默认封装了类似 jquery 的语法，进行元素的事件绑定、ajax操作、上拉刷新、下拉加载等操作。
1、mui事件处理：
一般情况下，点击事件是用的最多的，在移动端通常是 tap 事件 ， 对于PC浏览器就是 click 事件了。
手势事件
在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：
| 分类 | 参数 | 描述 |
|---|---|---|
| 点击 | tap | 单击屏幕 |
| doubletap | 双击屏幕 | |
| 长按 | longtap | 长按屏幕 |
| hold | 按住屏幕 | |
| release | 离开屏幕 | |
| 滑动 | swipeleft | 向左滑动 |
| swiperight | 向右滑动 | |
| swipeup | 向上滑动 | |
| swipedown | 向下滑动 | |
| 拖动 | dragstart | 开始拖动 |
| drag | 拖动中 | |
| dragend | 拖动结束 |
手势事件配置
根据使用频率，mui默认会监听部分手势事件，如点击、滑动事件；为了开发出更高性能的moble App，mui支持用户根据实际业务需求，通过mui.init方法中的gestureConfig参数，配置具体需要监听的手势事件，。
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false，不监听
release:false//默认为false，不监听
}
});注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关
事件绑定
除了可以使用 addEventListener() 方法监听某个特定元素上的事件外， 也可以使用 .on() 方法实现批量元素的事件绑定。
事件取消
使用 on() 方法绑定事件后，若希望取消绑定，则可以使用 off() 方法。 off() 方法根据传入参数的不同，有不同的实现逻辑。
事件触发
使用 mui.trigger() 方法可以动态触发特定DOM元素上的事件。
2、下载开发工具 Hbuilder X
https://www.dcloud.io/hbuilderx.html （Hbuilder X）
注意：
原来的开发工具叫 Hbuilder , 后面不在维护了。
现在官方推出 Hbuilder X 版本，软件体积小，功能比 之前的Hbuilder 更强大。支持 vue 、小程序、5+app等项目的开发。
默认为普通项目（空项目模板），并且是没有任何文件的空项目。如果你要使用 mui 框架则要选中其他模板。
3、编写登录页
移动端页面，通常是 页面头部是导航栏 ，下面是页面的内容。通常的页面格式是：
<body>
<!-- 页面导航栏 -->
<header id="header" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">导航栏</h1>
</header>
<!-- 页面内容 -->
<div class="mui-content">
<!-- 页面内容， 你可以在这里添加多种组件 -->
</div>
</body>使用 开发工具 Hbuilder X 创建一个项目：项目名称为 mui-login 。因为要使用mui 框架，所以选中mui项目模板。
项目创建成功后，在左侧菜单可以看到，点击打开 index.html 文件，可以看到页面的js、css、mui初始化操作都写好了。
我们直接在 body 里面编写代码，和在js标签中完成相应的逻辑即可。
在 index.html 编写登录表单，可以进行预览（2种预览方式）。
通过预览按钮预览结果：
另一种预览方式是，打开电脑已安装的浏览器来查看网页：
具体操作是：开发工具菜单栏 -- 运行 -- 运行到浏览器 -- 选择浏览器。之后电脑会自动启动已选择的浏览器进行预览网页。
选择在 IE 浏览器的运行效果：
4、登录事件处理
上面已经编写好表单，然后需要对登录按钮进行处理，这里假设账号 为 admin , 密码为 123456 即可登录成功。
上面已经介绍过，元素的事件绑定操作可以 使用 .on()方法 或者 addEventListener()方法
下面分别用这两种方法进行操作：
使用 .on()方法：
<!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>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<!-- 页面导航栏 -->
<header id="header" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">用户登录</h1>
</header>
<!-- 页面内容 -->
<div class="mui-content">
<!-- 页面内容， 你可以在这里添加多种组件 -->
<form class="mui-input-group" id="loginForm">
<div class="mui-input-row">
<label>账号</label>
<input type="text" id="account" placeholder="请输入账号">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="text" id="password" class="mui-input-clear" placeholder="请输入密码" data-input-clear="5">
<span class="mui-icon mui-icon-clear mui-hidden"></span>
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" id="loginBtn" >登录</button>
<button type="button" class="mui-btn mui-btn-danger" id="resetBtn">重置</button>
</div>
</form>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
//使用 .on()方法进行事件绑定
//登录按钮
mui('.mui-button-row').on('tap' , '.mui-btn.mui-btn-primary' , function(event){
var account = document.getElementById("account").value;
var password = document.getElementById("password").value;
if (!account){
alert("请输入账号");
}else if(!password){
alert("请输入密码");
}else if(account != "admin" || password != "123456"){
alert("账号或密码错误");
}else{
alert("登录成功");
}
});
//重置按钮
mui(".mui-button-row").on("tap" , ".mui-btn.mui-btn-danger" , function(event){
//表单重置操作
mui(".mui-input-group")[0].reset();
});
</script>
</body>
</html>
使用 addEventListener()方法 ：
<!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>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<!-- 页面导航栏 -->
<header id="header" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">用户登录</h1>
</header>
<!-- 页面内容 -->
<div class="mui-content">
<!-- 页面内容， 你可以在这里添加多种组件 -->
<form class="mui-input-group" id="loginForm">
<div class="mui-input-row">
<label>账号</label>
<input type="text" id="account" placeholder="请输入账号">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="text" id="password" class="mui-input-clear" placeholder="请输入密码" data-input-clear="5">
<span class="mui-icon mui-icon-clear mui-hidden"></span>
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" id="loginBtn" >登录</button>
<button type="button" class="mui-btn mui-btn-danger" id="resetBtn">重置</button>
</div>
</form>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
//使用 .on()方法进行事件绑定
/**
//登录按钮
mui('.mui-button-row').on('tap' , '.mui-btn.mui-btn-primary' , function(event){
var account = document.getElementById("account").value;
var password = document.getElementById("password").value;
if (!account){
alert("请输入账号");
}else if(!password){
alert("请输入密码");
}else if(account != "admin" || password != "123456"){
alert("账号或密码错误");
}else{
alert("登录成功");
}
});
//重置按钮
mui(".mui-button-row").on("tap" , ".mui-btn.mui-btn-danger" , function(event){
//表单重置操作
mui(".mui-input-group")[0].reset();
});
*/
//使用 addEventListener()方法进行事件绑定
//登录按钮
var loginBtn = document.getElementById("loginBtn");
loginBtn.addEventListener("tap" , function(){
var account = document.getElementById("account").value;
var password = document.getElementById("password").value;
if (!account){
alert("请输入账号");
}else if(!password){
alert("请输入密码");
}else if(account != "admin" || password != "123456"){
alert("账号或密码错误");
}else{
alert("登录成功");
}
});
//重置按钮
var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("tap" , function(){
//重置表单
document.getElementById("loginForm").reset();
});
</script>
</body>
</html>
登录页及实现源码：
链接：https://pan.baidu.com/s/11lpkRjhqadNLCrN1vTn2xA
提取码：j9za
注意：Hbuilder X 开发工具创建项目时，已经有登录模板了，可以参考：
扫一扫
2743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
