mui教程1——mui介绍、创建mui项目与初步使用、MUI常用代码提示、webview基本操作、事件管理、mui的内置函数

男娘i 2022-05-08 03:34 2149阅读 0赞

# 一、MUI资源索引及MUI介绍 #

## 1，资源索引 ##

官网：[http://dev.dcloud.net.cn/mui/][http_dev.dcloud.net.cn_mui]

MUI官方文档：[http://dev.dcloud.net.cn/mui/ui/][http_dev.dcloud.net.cn_mui_ui]

调用手机硬件（相册、摄像头等）的官方文档：[http://www.html5plus.org/doc/h5p.html][http_www.html5plus.org_doc_h5p.html]

其他：

Dcloud官网：[http://dcloud.io/][http_dcloud.io]

*  Dcloud问答社区：[http://ask.dcloud.net.cn/][http_ask.dcloud.net.cn]
 *  Dcloud文档汇总地址：[http://ask.dcloud.net.cn/docs/][http_ask.dcloud.net.cn_docs]
 *  Hello mui线上演示地址：[http://www.dcloud.io/hellomui...][http_www.dcloud.io_hellomui...]
 *  官方入门文档(强烈推荐阅读):
    
     *  [DCloud产品概述][http_ask.dcloud.net.cn_docs]
     *  [App入门开发][App]
     *  [mui产品][mui]
     *  [新手指南][Link 1]
 *  案例汇总：[http://dcloud.io/case/][http_dcloud.io_case]
 *  github地址：[https://github.com/dcloudio/][https_github.com_dcloudio]
 *  开源项目地址：[https://github.com/dcloudio/c...][https_github.com_dcloudio_c...]

### 官方分类文档 ###

*  html5+官网文档：[http://www.html5plus.org/doc/][http_www.html5plus.org_doc]
 *  mui文档：[http://dev.dcloud.net.cn/mui/ui/][http_dev.dcloud.net.cn_mui_ui]
 *  5+ App开发Native.js入门指南：[http://ask.dcloud.net.cn/arti...][http_ask.dcloud.net.cn_arti...]
 *  Native.js示例汇总：[http://ask.dcloud.net.cn/arti...][http_ask.dcloud.net.cn_arti... 1]
 *  流应用开发指南：[http://ask.dcloud.net.cn/arti...][http_ask.dcloud.net.cn_arti... 2]

## 2，相关概念介绍 ##

（1）html5+：html5+能将html5 app打包成原生app；html5指封装了常用的API，需添加功能则可以用到native js。

（2）MUI：mui是`Dcloud`官方推出的一个基于`html5+`标准的框架，同时拥有`h`5组件和原生组件，原生组件依赖于`html5+`运行环境，也就是原生`app`里面的`webview`组件（能加载显示网页，可以将其视为一个浏览器），所以`mui`里面的原生组件不能用于浏览器环境，可以通过`mui`里面的`mui.os.plus`进行判断，如果是`plus`环境会返回`true`，否则会返回`undefined`。开发者可以根据自己的需要进行代码适配，对于`APP`使用增强的原生组件，对于普通浏览器里面运行的页面使用`h5`组件。同时用户还可以使用`mui.os.android`、`mui.os.ios`及`mui.os.wechat`对平台进行检测，然后书写不同的逻辑代码。对于`mui`里面没有封装的原生组件，大家可以根据自己的需要基于`html5+`标准和`native.js`语法进行个性化定制。因此这里我们可以有一个基本影响就是我们开始可以直接上手`mui`，不过需要明白`mui`与其他`UI`框架的区别在于，`mui`拥有独有的原生组件，而且这个是依赖于`html5+`标准的，所以`mui`里面的很多组件实现方法甚至用户就是`html5+`里面的标准写法，对`html5+`标准有一定了解有助于我们理解`mui`的一些使用方法。

（3）webview：Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。那么串口和webview有什么异同？一个html页面就是一个窗口，一个html页面可以创建多个webview，这个webview是原生APP中浏览网页的组件，android和iOS都有，html5plus中的webview是对原生webview的封装，可以用js进行调用，所以它的运行环境是APP环境，普通浏览器不支持。

# 二、创建mui项目与初步使用 #

HBuilder有对mui进行支持，示例代码均是基于HBuilder进行的。

## 1，在HBuilder中新建移动项目选中 ##

![70][]

## 2，生成基本结构 ##

index.html中只用分别敲入mh、ml、mt，在html生成各目录结构，就有这么些东东了：

![70 1][]

index.html原代码：

<!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>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <link rel="stylesheet" type="text/css" href="css/main.css"/>  
    <script type="text/javascript" charset="utf-8">  
       mui.init();  
    </script>  
</head>  
<body>  
 <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>  
   
 <ul class="mui-table-view">  
         <li class="mui-table-view-cell">  
             <a class="mui-navigate-right">  
                 Item 1  
             </a>  
         </li>  
         <li class="mui-table-view-cell">  
             <a class="mui-navigate-right">  
                  Item 2  
             </a>  
         </li>  
         <li class="mui-table-view-cell">  
             <a class="mui-navigate-right">  
                  Item 3  
             </a>  
         </li>  
     </ul>  
   
 <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>  
</body>  
</html>

# 三、MUI常用代码提示 #

## 结构类: ##

*  `edo`: html结构模板 (使用方式,输入 edo–>回车–>输入模块名(如home)–>Tab键(注意不要回车)
 *  `mhe` : 固定头部导航
 *  `mbo` : 搭配头部使用, 有头部时, 添加mbo 可确保内容不被头部遮挡
 *  `mta` : 各种Tab 选项卡, 推荐使用 可左右滑动(mtabviewpage)
 *  `mgr` : 9宫格
 *  `mac` : 折叠面板
 *  `mof` : 侧滑菜单
 *  `msc` : 区域滚动

--------------------

## 表单类 ##

*  `mfo` : 表单框架
 *  `min` : 文本框
 *  `mra` : 单选框
 *  `mch` : 复选框
 *  `msw` : 开关
 *  `mran` : 滑块
 *  `mnu` : 数字框

--------------------

## 其他公用或工具类 ##

*  `mba` : 角标
 *  `mic` : 图标
 *  `mslider` : 轮播组件 (可左右滑动的视图, 应用广泛, 如tab就有用到)
 *  `mslider_grallery` : 轮播图, 根据轮播组件加工得到
 *  `mpu` : 下拉刷新容器
 *  `act` : 菜单
 *  `mpo` : 弹出悬浮菜单

## 提示 … ##

*  `mda` : 弹出框
 *  `mdc` : 确认框
 *  `mdp` : 输入框
 *  `mdt` : 自动消失框

看一下代码提示，大概就知道，一般是以m开头的，比如mheader、mbody等，就可以很快找到快捷键了！

mheader 头部

mbody  内容体

# 四、webview操作说明 #

## 1，创建新的webview窗口 ##

WebviewObject plus.webview.create( url, id, styles, extras );  
注意plus只能在手机上运行！具体参数的解释之后会在案例中进行说明。

如果直接运行会报错：

\[Web浏览器\] "Uncaught ReferenceError: plus is not defined (提示: plus api只能在手机app里运行)" /WeChat/index.html (69)  
因此要想测试这个方法，需要在手机端运行这个程序。因为南雁的手机为华为系列的，华为手机进入开发者模式：版本号连续按5+次，然后在系统设置中有开发者选项，开启usb调试选项。然后嘛点击这个地方开启手机运行该程序：

![70 2][]

## 2，显示Webview窗口 ##

plus.webview.show( id\_wvobj, aniShow, duration, showedCB, extras );  
创建完的webview需要show才能显现出来的，显现的时候是需要有它的id的。

## 3，隐藏Webview窗口 ##

void plus.webview.hide( id\_wvobj, aniHide, duration, extras );

让窗口不可见

## 4，获取当前webview窗口 ##

WebviewObject plus.webview.currentWebview();

## 5，代码分析 ##

来一段代码（代码4）进行分析：

分析：（1）var self = plus.webview.currentWebview();获取当前的webview，之后按照subPages依次增加子页面；

（2）var sub = plus.webview.create(subPages\[i\],subPages\[i\],subPageStyle);  创建的4个参数有前三个参数即可，url用来打开相关链接，id用来标志链接。

（3）plus.webview.show(subPages\[0\]);  这段代码能实现显现子页面，手机中就可以有如下页面！

![70 3][]

（4）sub1.html的效果图如下：

![70 4][]

（5）绑定事件：

// 绑定事件  
 mui(".mui-bar-tab").on("tap","a",function(e)\{  
  var page = this.getAttribute("href");  
  plus.webview.show(page, "fade-in", 100);  
 \})

# 五、事件管理 #

## 1，事件绑定 ##

除了可以使用`addEventListener()`方法监听某个特定元素上的事件外， 也可以使用`.on()`方法实现批量元素的事件绑定。

*  **event**
    
    Type: [String][]
    
    需监听的事件名称，例如：'tap'
 *  **selector**
    
    Type: [String][]
    
    选择器
 *  **handler**
    
    Type: [Function][String]( [Event][String] event )
    
    事件触发时的回调函数，通过回调中的event参数可以获得事件详情

示例代码：

点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
      //获取id
      var id = this.getAttribute("id");
      //传值给详情页面，通知加载新数据
      mui.fire(detail,'getDetail',{id:id});
      //打开新闻详情
      mui.openWindow({
        id:'detail',
        url:'detail.html'
      });
    })

其中tab表示手势事件的单击

## 2，时间绑定的取消 ##

off(event,selector,handle)适用于取消对应选择器上特定事件所执行的特定回调，例如：

//点击li时，执行foo_1函数
    mui("#list").on("tap","li",foo_1);
    //点击li时，执行foo_2函数
    mui("#list").on("tap","li",foo_2);
    
    function foo_1(){
      console.log("foo_1 execute");
    }
    
    function foo_2(){
      console.log("foo_2 execute");
    }
    //点击li时，不再执行foo_1函数，但会继续执行foo_2函数
    mui("#list").off("tap","li",foo_1);

其他取消方式类似，可参考官方文档

## 3，事件触发 ##

使用`mui.trigger()`方法可以动态触发特定DOM元素上的事件。

示例代码如下：

var btn = document.getElementById("submit");
    //监听点击事件
    btn.addEventListener("tap",function () {
      console.log("tap event trigger");
    });
    //触发submit按钮的点击事件
    mui.trigger(btn,'tap');

利用这段代码就可以出发相关的时间，是不是很神奇？

## 4，相关手势事件说明 ##

<table> 
 <tbody> 
  <tr> 
   <th>分类</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>点击</td> 
   <td>tap</td> 
   <td>单击屏幕</td> 
  </tr> 
  <tr> 
   <td>doubletap</td> 
   <td>双击屏幕</td> 
  </tr> 
  <tr> 
   <td>长按</td> 
   <td>longtap</td> 
   <td>长按屏幕</td> 
  </tr> 
  <tr> 
   <td>hold</td> 
   <td>按住屏幕</td> 
  </tr> 
  <tr> 
   <td>release</td> 
   <td>离开屏幕</td> 
  </tr> 
  <tr> 
   <td>滑动</td> 
   <td>swipeleft</td> 
   <td>向左滑动</td> 
  </tr> 
  <tr> 
   <td>swiperight</td> 
   <td>向右滑动</td> 
  </tr> 
  <tr> 
   <td>swipeup</td> 
   <td>向上滑动</td> 
  </tr> 
  <tr> 
   <td>swipedown</td> 
   <td>向下滑动</td> 
  </tr> 
  <tr> 
   <td>拖动</td> 
   <td>dragstart</td> 
   <td>开始拖动</td> 
  </tr> 
  <tr> 
   <td>drag</td> 
   <td>拖动中</td> 
  </tr> 
  <tr> 
   <td>dragend</td> 
   <td>拖动结束</td> 
  </tr> 
 </tbody> 
</table>

当然事件是可以用addListener：

elem.addEventListener("swipeleft",function(){
         console.log("你正在向左滑动");
    });

所以，还记不记得上一节的代码？

mui(".mui-bar-tab").on("tap","a",function(e)\{  
  var page = this.getAttribute("href");  
  plus.webview.show(page, "fade-in", 100);  
 \})

表示通过css选择器找到 (".mui-bar-tab"). 相关的dom对象，然后呢，对于里面的a标签，一旦点击，就执行下面的操作——获取相关的href，然后渐变的显示。

# 六、mui的内置函数 #

## 1，init ##

mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：[创建子页面][Link 2]、[关闭页面][Link 3]、[手势事件配置][Link 4]、[预加载][Link 5]、[下拉刷新][Link 6]、[上拉加载][Link 7]、[设置系统状态栏背景颜色][Link 8]。

## 2，mui ##

mui使用css选择器获取HTML元素，返回mui对象数组。  
`mui("p")`：选取所有`<p>`元素  
`mui("p.title")`：选取所有包含`.title`类的`<p>`元素

若要将mui对象转化成dom对象，可使用如下方法（类似jquery对象转成dom对象）：

//obj1是mui对象
    var obj1 = mui("#title");
    //obj2是dom对象
    var obj2 = obj1[0];

# 3，each #

each既是一个类方法，同时也是一个对象方法，两个方法适用场景不同；换言之，你可以使用`mui.each()`去遍历数组或json对象，也可以使用`mui(selector).each()`去遍历DOM结构。

输出当前数组中每个元素的平方

var array = [1,2,3]
    mui.each(array,function(index,item){
      console.log(item*item);
    })

## 4，extend ##

将两个对象合并成一个对象。

var target = {
      company:"dcloud",
      product:{
        mui:"小巧、高效"
      }
    } 
    var obj1 = {
      city:"beijing",
      product:{
        HBuilder:"飞一样的编码"
      }
    }
    mui.extend(target,obj1);
    //输出：{"company":"dcloud","product":{"HBuilder":"飞一样的编码"},"city":"beijing"}
    console.log(JSON.stringify(target));

## 5，later ##

setTimeOut封装

## 6，scrollTo ##

滚动窗口屏幕到指定位置，该方法是对`window.scrollTo()`方法在手机端的增强实现，可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小，该方法仅可实现屏幕纵向滚动。

示例：1秒钟之内滚动到页面顶部

mui.scrollTo(0,1000);

## 7，os ##

我们经常会有通过`navigator.userAgent`判断当前运行环境的需求,mui对此进行了封装,通过调用mui.os.XXX即可

检测是否为iOS或安卓系统版本是否小于4.4

if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){
       //...
     }

参考文献：

1，[https://www.cnblogs.com/yxrs/p/8093778.html][https_www.cnblogs.com_yxrs_p_8093778.html]

2，[https://blog.csdn.net/guddqs/article/details/76550216?locationNum=9&fps=1][https_blog.csdn.net_guddqs_article_details_76550216_locationNum_9_fps_1]

3，[http://dev.dcloud.net.cn/mui/event/][String]

4，

[http_dev.dcloud.net.cn_mui]: http://dev.dcloud.net.cn/mui/
[http_dev.dcloud.net.cn_mui_ui]: http://dev.dcloud.net.cn/mui/ui/
[http_www.html5plus.org_doc_h5p.html]: http://www.html5plus.org/doc/h5p.html
[http_dcloud.io]: http://dcloud.io/
[http_ask.dcloud.net.cn]: http://ask.dcloud.net.cn/
[http_ask.dcloud.net.cn_docs]: http://ask.dcloud.net.cn/docs/
[http_www.dcloud.io_hellomui...]: http://www.dcloud.io/hellomui/index.html
[App]: http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/89
[mui]: http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/91
[Link 1]: http://dev.dcloud.net.cn/mui/getting-started/
[http_dcloud.io_case]: http://dcloud.io/case/
[https_github.com_dcloudio]: https://github.com/dcloudio/
[https_github.com_dcloudio_c...]: https://github.com/dcloudio/casecode
[http_www.html5plus.org_doc]: http://www.html5plus.org/doc/
[http_ask.dcloud.net.cn_arti...]: http://ask.dcloud.net.cn/article/88
[http_ask.dcloud.net.cn_arti... 1]: http://ask.dcloud.net.cn/article/114
[http_ask.dcloud.net.cn_arti... 2]: http://ask.dcloud.net.cn/article/406
[70]: /images/20220508/355b4abf7b84455b8c73ba8ff446ee47.png
[70 1]: /images/20220508/ec04e51f15c14cf9b7411b27df185981.png
[70 2]: /images/20220508/63e1f15d5b6145939a8d5b0aae42f274.png
[70 3]: /images/20220508/c4ae8d5e5f4e4e6d8af2f20f3fff6a2f.png
[70 4]: /images/20220508/bf9ad3d2869e4f508fa00508308d83ac.png
[String]: http://dev.dcloud.net.cn/mui/event/
[Link 2]: http://dev.dcloud.net.cn/mui/window/#subpage
[Link 3]: http://dev.dcloud.net.cn/mui/window/#closewindow
[Link 4]: http://dev.dcloud.net.cn/mui/event/#gesture
[Link 5]: http://dev.dcloud.net.cn/mui/window/#preload
[Link 6]: http://dev.dcloud.net.cn/mui/pulldown/#pullrefresh-down
[Link 7]: http://dev.dcloud.net.cn/mui/pullup/#pullrefresh-up
[Link 8]: http://dev.dcloud.net.cn/mui/util/#statusbar
[https_www.cnblogs.com_yxrs_p_8093778.html]: https://www.cnblogs.com/yxrs/p/8093778.html
[https_blog.csdn.net_guddqs_article_details_76550216_locationNum_9_fps_1]: https://blog.csdn.net/guddqs/article/details/76550216?locationNum=9&fps=1