窗口方面api

关闭页面

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

php和mui框架MUI框架进修 Java

在屏幕内,向右快速滑动

Android手机按下back按键

//第一种办法<button type=\公众button\"大众 class='7b4233b371eb1d12 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内置了常用的手势事宜,目前支持的手势事宜见如下列表:

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

监听上述动作

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/