MUI背景介绍

MUI是一套前端框架，由DCLOUD公司研发而成，提供大量H5和js语言组成的组件，大大提高了开发效率，可以用于开发web端应用、web app等应用。

MUI API简介

官方文档

窗口方面api

关闭页面

• 点击包含.mui-action-back类的控件

• 在屏幕内，向右快速滑动

• Android手机按下back按键

//第一种方式<button type="button" class='mui-btn mui-btn-danger mui-action-back'>关闭</button>

除了如上三种操作外，也可以直接调用mui.back()方法，执行窗口关闭逻辑；

mui.back()仅处理窗口逻辑，若希望在窗口关闭之前再处理一些其它业务逻辑，则可将业务逻辑抽象成一个具体函数，然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为：

• 执行beforeback参数对应的函数若返回false，则不再执行mui.back()方法；

• 否则（返回true或无返回值），继续执行mui.back()方法；

示例：

mui.init({ beforeback: function(){ //获得列表界面的webview

预加载

所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。

方式一：通过mui.init方法中的preloadPages参数进行配置

mui.init({ preloadPages:[

该种方案使用简单、可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得；另外，因为mui.init是异步执行，执行完mui.init方法后立即获得对应webview引用，可能会失败，

方式二：通过mui.preload方法预加载

var page = mui.preload({ url:new-page-url, id:new-page-id,//默认使用当前页面的url作为id

通过mui.preload()方法预加载，可立即返回对应webview的引用，但一次仅能预加载一个页面；若需加载多个webview，则需多次调用mui.preload()方法；

事件管理

事件绑定

• document找寻id方式绑定 --- document.getElementById("id").onclick(function());

• 添加事件回调 --- elementObject.addEventListener(eventName,handle,useCapture);

• 使用mui框架进行事件绑定

使用.on()方法实现批量元素的事件绑定，方法介绍：

mui_on.png

示例

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){ //获取id

事件取消

取消绑定，则可以使用off()方法。 off()方法根据传入参数的不同，有不同的实现逻辑。

mui_off.png

事件触发

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

mui_trigger.png

触发自定义事件

可以进行一些网页的跳转，mui.fire()

mui_fire.png

手势事件

移动端开发时，会有一些手势事件，点击tap，双击doubletap等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：

监听上述动作

mui框架默认会监听部分手势动作，如果需要监听你想要的动作，需要在初始化配置动作，mui.init的gestureConfig参数，如下代码：

mui.init({ gestureConfig:{ tap: true, //默认为true

注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关

事件管理总结

• 单个元素上的事件监听，建议使用addEventListener()，如elem.addEventListener("swipeleft",function()}

• 多个元素上的事件监听，建议使用mui.on事件进行绑定

从上面的api都会或多或少的了解部分mui提供的js函数，如mui.init(),但是只是了解函数的部分参数，下面将具体介绍下面一些函数的配置参数及功能

mui.init()

直接上代码，浅显易懂

mui.init({//子页面

mui()

mui使用css选择器获取HTML元素，返回mui对象数组。

mui("p")：选取所有

元素

mui("p.title")：选取所有包含.title类的

元素

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

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

each()

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

mui_each.png

each遍历数组

var array = [1,2,3]

each遍历HTML输入标签

<div class="mui-input-group">

提交时校验三个字段均不能为空，若为空则提醒并终止业务逻辑运行，使用each()方法循环校验，如下：

var check = true;

extend()

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

extend示例

mui_extend.png

var target = { company:"dcloud", product:{ mui:"小巧、高效"

extend()深度合并

var target = { company:"dcloud", product:{ mui:"小巧、高效"

OS

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

mui_os.png

plus

mui提供的plus可以很方便的访问系统的原声东西，如手机devices,还有webview等

mui网络访问

mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型； 本着极简的设计原则，mui提供了mui.ajax方法，并在mui.ajax方法基础上，进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。

简单用法

> mui.ajax( url [,settings] )

url：请求发送的目标地址

settings：key/value格式的json对象，用来配置ajax请求参数，支持的参数如下：

data：发送到服务器的业务数据；

type：请求方式，目前仅支持'GET'和'POST'，默认为'GET'方式；

dataType：预期服务器返回的数据类型；如果不指定，mui将自动根据HTTP包的MIME头信息自动判断；

支持设置的dataType可选值：

"xml": 返回XML文档

"html": 返回纯文本HTML信息；

"script": 返回纯文本JavaScript代码

"json": 返回JSON数据

"text": 返回纯文本字符串

success：Type: Functon（Anything data,String textStatus,XMLHttpRequest xhr）

请求成功时触发的回调函数，该函数接收三个参数：

data：服务器返回的响应数据，类型可以是json对象、xml对象、字符串等；

textStatus：状态描述，默认值为'success'

xhr：xhr实例对象

error：Type: Functon（XMLHttpRequest xhr,String type,String errorThrown）请求失败时触发的回调函数；

该函数接收三个参数：

xhr：xhr实例对象

type：错误描述，可取值："timeout", "error", "abort", "parsererror"、"null"

errorThrown：可捕获的异常对象

timeout：Type: Number，请求超时时间（毫秒），默认值为0，表示永不超时；若超过设置的超时时间(非0的情况)，依然未收到服务器响应，则触发error回调；

headers：Type: Object,格式为：{'Content-Type'：'application/json'}，

mui.ajax(url,{ data:{ username:'username', password:'password'

mui.post( url [,data] [,success] [,dataType] )

mui.post()方法是对mui.ajax()的一个简化方法，直接使用POST请求方式向服务器发送数据、且不处理timeout和异常（若需处理异常及超时，请使用mui.ajax()方法）

mui.post('http://server-name/login.php',{ username:'username', password:'password'

> mui.get( url [,data] [,success] [,dataType] )

mui.get()方法和mui.post()方法类似，只不过是直接使用GET请求方式向服务器发送数据、且不处理timeout和异常（若需处理异常及超时，请使用mui.ajax()方法）。如下为获得某服务器新闻列表的代码片段，服务器以json格式返回数据列表：

mui.get('http://server-name/list.php',

> mui.getJSON( url [,data] [,success] )

mui.getJSON()方法是在mui.get()方法基础上的更进一步简化，限定返回json格式的数据，其它参数和mui.get()方法一致，如上获得新闻列表的代码换成mui.getJSON()方法后，更为简洁，如下：

mui.getJSON('http://server-name/list.php',

mui组件

除上面的api之外，mui还提供了很多封装好的html组件，使用非常简单，在Hbuilder ide里面只需要敲m就会显示出支持的组件，使用非常方便，这里就不具体介绍使用方法了，如需了解详情，请点击一下链接访问

mui组件链接

http://dev.dcloud.net.cn/mui/getting-started/