移动端开发框架mui之注意事项及制作登录页

最新推荐文章于 2022-01-24 15:27:26 发布

zgphacker2010

最新推荐文章于 2022-01-24 15:27:26 发布

阅读量1.4k

点赞数

分类专栏：移动端开发

本文链接：https://blog.csdn.net/zgphacker2010/article/details/114478927

版权

移动端开发专栏收录该内容

22 篇文章 3 订阅

订阅专栏

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>&nbsp;&nbsp;
			<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>&nbsp;&nbsp;
			<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 开发工具创建项目时，已经有登录模板了，可以参考：

zgphacker2010

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端开发框架mui之注意事项及制作登录页

MUI 官网：https://www.dcloud.io/mui.htmlMUI 文档：https://dev.dcloud.net.cn/mui/ui/演示地址：https://dcloud.io/hellomui/ （支持手机和电脑浏览器）开发工具：https://www.dcloud.io/hbuilderx.html （Hbuilder X）mui框架中，默认封装了类似 jquery 的语法，进行元素的事件绑定、ajax操作、上拉刷新、下拉加载等操作。1、mui事件处理：一般情况下
复制链接

扫一扫