标签： html

MUI新手使用教程详细

前言

每个人都在不断的学习，不断的进步，希望这篇文章能记录我在公司学习使用MUI的过程和坑。

mui的官方文档 dev.dcloud.net.cn/mui/u

目录

  1. 基本工具
  2. 开发流程
  3. 怎么快速做一个简洁的列表
  4. input输入表单
  5. 消息框
  6. 日期选择器
  7. 关闭详情页面，返回时，希望刷新列表界面
  8. 事件绑定
  9. mui循环 合并对象 延迟加载

基本工具

  • 开发工具 HBuilder1
  • js引入文件 mui.min.js
  • css引入文件 mui.min.css

开发流程

  • 首先你要把相关js文件和css文件引入进来
  • 然后你在新建一个js文件 里面调用
    • mui.init() -官方解释 mui页面加载时需要调用很多基础控件，比如监听返回键，因此务必在每个页面中调用
    • mui.plusReady() 这个是可以理解为初始化 就是页面加载的时候会触发一次 仅仅在移动端运行
    • mui.ready() 这个也是初始化，不过它在PC端和移动端都能运行 建议是当你要用mui的时候 首先把这三个都加到js里去
<!DOCTYPE html> <html>  <head>   <meta charset="UTF-8">   <title>MUI示例</title>   <link rel="stylesheet" href="../../mui/css/mui.min.css"/>  </head>  <body>   <script src="../../mui/js/mui.min.js"></script>   <script type="text/javascript" charset="UTF-8">    mui.init();    mui.plusReady(function(){         });    mui.ready(function(){          });       </script>  </body> </html>

怎么快速做一个简洁的列表

  • 在父节点加.mui-table-view 子节点加.mui-table-view-cell 就可以形成要给最简单的列表
  • 加.mui-navigate-right 就是在右边加一个>图标
  • 如果你想在列表右边加一个删除按钮 也就是角标
    • 你只要加上.mui-badge mui-badge-primary 这个就好了
    • 角标的核心class是.mui-badge 后面可以加颜色
    • mui内置了5种颜色
    • .mui-badge-primary 蓝色
    • .mui-badge-success 绿色
    • .mui-badge-warning 黄色
    • .mui-badge-danger 红色
    • .mui-badge-purple 紫色
<ul class="mui-table-view .mui-active">       <li class="mui-table-view-cell">        <a class="mui-navigate-right">Item 2</a>       </li>       <li class="mui-table-view-cell">Item 2         <span class="mui-badge mui-badge-primary">11</span>       </li>       <li class="mui-table-view-cell">Item 3        <span class = "mui-badge mui-badge-success">删除</span>       </li>   </ul>

效果：

MUI新手使用教程详细

input输入表单

  • 主要class只有两个
    • 父节点class用.mui-input-group 表示分组的意思
    • 子节点class用 .mui-input-row 表示一行的意思
    • 在.mui-input-row同级上加.mui-search就可以使用搜索控件
    • .mui-input-clear 表示快速删除input的内容
    • .mui-input-password 表示显示或隐藏密码
<form class="mui-input-group">    <div class="mui-input-row mui-search">        <input type="search" class="mui-input-clear" placeholder="">    </div>       <div class="mui-input-row">           <label>用户名:</label>       <input type="text" class="mui-input-clear" placeholder="请输入用户名">       </div>       <div class="mui-input-row">           <label>密码:</label>           <input type="password" class="mui-input-password" placeholder="请输入密码">       </div>   </form>

效果：

MUI新手使用教程详细

消息框

  • .confirm(message,title,btnValue,callback[,type])
    • message显示的是消息 如 “该记录还没保存，是否保存?”
    • title 显示的标题
    • btnValue 是一个数组 主要是显示按钮上的提示 是or否
    • callback 提示对话框上关闭后的回调函数
    • type 是否使用h5绘制的对话框 一般用 ‘div’ 也可以不写
    var btnArray = ['是', '否'];     mui.confirm('该记录还没保存，是否保存？', '提示', btnArray, function(e) {       if (e.index == 0) {         //如果点是执行这个逻辑 否则会自动关闭确认框       }     });

效果：

MUI新手使用教程详细

日期选择器

    • 首先想用mui的日期选择器 你必须加上
      • mui.picker.min.css
      • mui.picker.min.js
  • 如下代码讲解
    • 首先创建一个日期控件new mui.DtPicker
    • 给里面的type赋值
      • datetime 显示年月日时分
      • date 显示年月日
      • time 显示时分
      • month 显示年月
      • hour 显示年月日时
    • 给日期input设置一个id
    • js后面监听这个id点击事件
    • 当日期被点击的是时候 显示show日期控件
    • 把选择的值放入到input中
<form class="mui-input-group">    <div class="mui-input-row" >     <label>入库日期 <span style="color:red">*</span></label>     <input id="in_date" type="text" class="" placeholder="日期"/>    </div>   </form>  mui.init(); mui.plusReady(function(){  }); mui.ready(function(){   var dtPicker = new mui.DtPicker({     type:'datetime'    });   // 监听日期选择点击事件   tap在mui是点击事件   document.getElementById("in_date").addEventListener('tap', function() {       dtPicker.show(function (selectItems) {       //把选中的值放入到input日期里         this.value=selectItems.value;       });     }   }); });

效果：

MUI新手使用教程详细

关闭详情页面，返回时，希望刷新列表界面

    • 触发mui.back()页面关闭事件的三种方式
      • 点击包含class带有.mui-action-back的标签
        • 下方代码 会自动生成带有返回导航箭头的标题栏，点击返回箭头可关闭当前页面，原因就是因为该a标签class里包含.mui-action-back
    • Android手机按下back按键
      • Android back按键返回功能默认开启，如果想禁用 则须 backbutton: false
      • 在屏幕内，向右快速滑动
        • mui框架的右滑关闭功能，默认是关闭的，可以手动启动 swipeBack:true
        • 注意ios是原生支持右滑关闭的 如果要禁用，需要设置popGesture:none
  • beforeback参数可以让你在页面关闭之前在处理一些业务逻辑
    • 比如获取列表的界面 然后触发列表界面的刷新事件 就行了
  • 如果你获取不到列表界面 你可以尝试一下预加载界面preloadPages 亲测可用
//详情页js mui.init({   preloadPages:[{     id:'store-in-list.html',//列表界面id 自己填写     url:'store-in-list.html' //列表界面url 根据自己的相对路径填写 如果在上级目录就../store-in-list.html             }   ],  beforeback: function(){   //获得列表界面的webview   var list = plus.webview.getWebviewById('list');   //触发列表界面的自定义事件（refresh）,从而进行数据刷新   mui.fire(list,'refresh');   //返回true，继续页面关闭逻辑   return true;  },  swipeBack:true, //启用右滑关闭功能   keyEventBind: {   backbutton: false  //关闭back按键监听  } });  //详情页标题头html <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>  //列表界面js window.addEventListener('refresh', function(event){ //我要刷新列表   loadList();//向后台发送查询数据的方法 });

事件绑定

  • 拆分讲解
    • mui(‘.mui-indexed-list ul’) 这就是一个对象集合意思是查询.mui-indexed-list下所有的ul
    • tap 就是事件名 点击的意思 如果你想事件改变的时候触发你就改成 change 就好了
    • li 就是要监控的标签 li 其实就在.mui-indexed-list ul下面 一个是父类 一个是子类
    • function() 就是回调函数 当li被点击后要执行的逻辑
//点击入库列表查看入库信息 mui('.mui-indexed-list ul').on('tap', 'li', function(){    }); //当事件改变的时候触发 mui('.mui-indexed-list ul').on('change', 'li', function(){    });

mui循环 合并对象 延迟加载

  • each循环
    • array 就是要循环的对象 可以是数组 也可以是json对象
    • index 就是下标
    • item 就是循环获取的值
var array = [1,2,3] mui.each(array,function(index,item){   console.log(item*item); })
  • extend合并对象
    • deep 递归合并 若为true则递归合并
    • target 目标对象
    • obj1 需要合并的对象 如果合并的不止两个 可以在后面继续加对象 mui.extend(true,target,obj1,obj2,…);
  var target = {   company:"dcloud",   product:{     mui:"小巧、高效"   } }  var obj1 = {   city:"beijing",   product:{     HBuilder:"飞一样的编码"   } } //支持深度合并 mui.extend(true,target,obj1); //输出：{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飞一样的编码"},"city":"beijing"} console.log(JSON.stringify(target));
  • later延迟加载
    • function() 就是回调函数
    • 300 就是延迟的毫秒数
    • 我是用在当你打开页面默认异步加载下拉框列表时 那时候你也要默认加载数据 这个时候你会发现 你加载数据的时候 下拉框还没又加载好 就会导致数据不对 这个你如果用延迟加载 等待下拉框加载完 你在加载下拉框的值 就对了
mui.later(function(){   console.log("我延迟加载啦!!!");        },300);

转自：https://zhuanlan.zhihu.com/p/361878292

禁止回车提交表单

项目里用了太多的弹层，还有太多的逻辑判断，要提交到不同的 action

结果发现一个问题，某个弹层内直接回车时表单就被提交了，省略了中间好多的逻辑判断什么的

决定先暂时把这个回车禁用掉，后期再来修复功能

自动提交情况说明：

默认情况下，单个输入框，无论按钮的type="submit"还是type="button"类型，回车即提交。
当type="submit"时，无论有几个type="text"输入框，回车均表示提交。（<button>按钮默认的type为submit）
当type="button"时，且存在多个输入框，回车不提交。（button）

网上查了下，处理办法有如下二种

1：解决单个输入框的回车即提交问题，可以增加一个隐藏的input="text" display='none'; 然后 type 类型为 button 。

2：在 form 表单或 input 中加入：onkeydown="if(event.keyCode==13){return false;}" 。

决定还是使用第二种，现在各种库用得太多，反而不直观。直接onkeydown，以后代码查起来清晰一点

10个开源免费的管理后台模板（控制面板）

作者 | SevDot

来源 | http://1t.click/VE8

Web 开发中几乎的平台都需要一个后台管理，但是从零开发一套后台控制面板并不容易，幸运的是有很多开源免费的后台控制面板可以给开发者使用

1. AdminLTE

GitHub Star 数 24969 ， GitHub 地址：

https://github.com/almasaeed2010/AdminLTE

非常流行的基于 Bootstrap 3.x 的免费的后台 UI 框架。

640?wx_fmt=png

2. vue-Element-Admin

GitHub Star 数 19546， GitHub 地址：

https://github.com/PanJiaChen/vue-element-admin

一个基于 vue2.0 和 Eelement 的控制面板 UI 框架。

640?wx_fmt=png

3. tabler

GitHub Star 数 15870， GitHub 地址：

https://github.com/tabler/tabler

构建在 BootStrap 4 之上的免费的 HTML 控制面板框架。

640?wx_fmt=png

4. Gentelella

GitHub Star 数 15654， GitHub 地址：

https://github.com/puikinsh/gentelella

一个基于 Bootstarp 的免费的后台控制面板。

640?wx_fmt=png

5. ng2-admin

GitHub Star 数 13181， GitHub 地址：

https://github.com/akveo/ngx-admin

基于 Angular 2, Bootstrap 4 和 Webpack 的后台管理面板框架。

640?wx_fmt=png

6. ant-design-pro

GitHub Star 数 12707，GitHub 地址：

https://github.com/ant-design/ant-design-pro

开箱即用的中台前端/设计解决方案。

640?wx_fmt=png

7. blur-admin

GitHub Star 数 9241，GitHub 地址：

https://github.com/akveo/blur-admin

基于 Angular 和 Bootstrap 的后台管理面板框架。

640?wx_fmt=png

8. vue-admin

GitHub Star 数 8676，GitHub 地址：

https://github.com/vue-bulma/vue-admin

基于 Vue 和 Bulma 的控制面板。

640?wx_fmt=png

9. iview-admin

GitHub Star 数 8668，GitHub 地址：

https://github.com/iview/iview-admin

基于 iView 的 Vue 2.0 控制面板。

640?wx_fmt=png

10. material-dashboard

GitHub Star 数 7111，GitHub 地址：

https://github.com/creativetimofficial/material-dashboard

基于 Bootstrap 4 和 Material 风格的控制面板。

640?wx_fmt=png

有