窗口方面api
关闭页面
点击包含.mui-action-back类的控件
在屏幕内,向右快速滑动
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内置了常用的手势事宜,目前支持的手势事宜见如下列表:
监听上述动作
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/