一、MUI资源索引及MUI介绍

1，资源索引

官网：http://dev.dcloud.net.cn/mui/

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

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

其他：

Dcloud官网：http://dcloud.io/

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

官方分类文档

html5+官网文档：http://www.html5plus.org/doc/
mui文档：http://dev.dcloud.net.cn/mui/ui/
5+ App开发Native.js入门指南：http://ask.dcloud.net.cn/arti...
Native.js示例汇总：http://ask.dcloud.net.cn/arti...
流应用开发指南：http://ask.dcloud.net.cn/arti...

2，相关概念介绍

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

（2）MUI：mui是Dcloud官方推出的一个基于html5+标准的框架，同时拥有h5组件和原生组件，原生组件依赖于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中新建移动项目选中

2，生成基本结构

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

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调试选项。然后嘛点击这个地方开启手机运行该程序：

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]); 这段代码能实现显现子页面，手机中就可以有如下页面！

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

（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( Event event )

事件触发时的回调函数，通过回调中的event参数可以获得事件详情

示例代码：

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

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){//获取idvar 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，相关手势事件说明

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

当然事件是可以用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方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。

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

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

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

4，

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

Microsoft Excel 教程：如何在 Excel 中创建公式并使用内置函数执行计算？
欢迎观看 Microsoft Excel 教程,小编带大家学习 Microsoft Excel 的使用技巧,了解如何在 Excel 中创建公式并使用内置函数执行计算. Excel 中的计算方式始终以等 ...
Python培训教程：Python有哪些比较重要的内置函数?
学习Python技术或者参加Python工作的小伙伴们应该都知道,在Python编程语言中会经常出现很多内置函数,很少有人清楚这些函数,但是它的功能是不可小觑的,下面小编就为大家详细介绍一下Pytho ...
大数据入门教程系列之Hive内置函数及自定义函数
本篇文章主要介绍Hive内置函数以及自定义UDF函数和UDFT函数,自定义UDF函数通过一个国际转换中文的例子说明. 操作步骤: ①.准备数据和环境 ②.演示Hive内置函数 ③.自定义UDF函数编写 ...
Python3.9的69个内置函数(内建函数)介绍,并附简单明了的示例代码
Python 解释器内置(内建)了很多函数,这篇博文对它们进行逐一介绍,博主觉得有必要给出示例代码的会给出示例代码. 声明:博主(昊虹图像算法)写这篇博文时,用的Python的版本号为3.9.10. ...
Freemarker 内置函数数字、字符串、日期格式化用法介绍
在用FreeMarker过程中,感觉FreeMarker的字符串,日期,集合等处理能力还是很强大的,上网搜了一些资料,整理如下,以便能帮助大家更熟练的应用Freemarker完成项目开发. 一.Seq ...
python 创建空的numpy数组_数据分析-NumPy内置函数创建数组
微信公众号:yale记关注可了解更多的教程问题或建议,请公众号留言. 背景介绍今天学习使用numpy的内置函数arange().ones().zeros().linspace() 等内置函数创建数 ...
Python中内置函数的介绍
内置函数的功能介绍常用内置函数如下: 1.abs() 绝对值格式:abs(x) 例如:print(abs(-18))>>> 18 返回值:number #该函数主要用于数值类的操 ...
python内置函数open_Python学习教程：Python内置函数大总结（下篇）
这里接着上次的 Python学习教程,给大家总结了Python 剩下的33个内置函数. 31 hash() 返回对象的哈希值 In [112]: hash(xiaoming)Out[112]: 613 ...
Hive函数（内置函数（字符串函数，数学函数，日期函数，集合函数，条件函数，聚合函数，表生成函数）和自定义函数（自定义函数创建流程，临时函数，永久函数）））（四）
Hive函数(内置函数和自定义函数) 一.内置函数 1.字符串函数 (1)ascii (2)base64 (3)concat (4)concat_ws (5)format_number (6)subs ...

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