mui开发文档.docx
《mui开发文档.docx》由会员分享，可在线阅读，更多相关《mui开发文档.docx（22页珍藏版）》请在冰豆网上搜索。
mui开发文档
Mui组件部分请参照官网资料，以下资料也来自官网，主要是便于在手机上查看
一、窗口事件详细内容
在app开发中，若要使用，必须等plusready事件发生后才能正常使用，mui将该事件封装成了（）方法，涉及到HTML5+的api，建议都写在方法中。
如下为打印当前页面URL的示例：
（function（）{
（"当前页面URL：
"+
}）;
扩展阅读
mui插件初始化
当DOM准备就绪时，指定一个函数来执行。
代码块激活字符:
minit
在mobileapp开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题；mui的解决思路是：
将需要滚动的区域通过单独的webview实现，完全使用原生滚动。
具体做法则是：
将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用方法初始化内容页面。
（{
subpages:
[{
url:
your-subpage-url,....
},
extras:
{}（{
url:
new-page-url,
id:
new-page-id,
styles:
{
top:
newpage-top-position,....
},
extras:
{
......',....
}
}
}）
参数：
styles
窗口参数，参考；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。
extras
新窗口的额外扩展参数，可用来处理页面间传值；例如：
varwebview=（{
url:
'',
extras:
{
name:
'mui'ddEventListener（'tap',function（）{
..
ui-action-back类的控件
在屏幕内，向右快速滑动
Android手机按下back按键
iOS平台原生支持从屏幕边缘右滑关闭
iOS平台可通过popGesture参数实现从屏幕边缘右滑关闭webview，参考，若想禁用该功能，可通过setStyle方法设置popGesture为none。
hbuilder中敲mheader生成的代码块，会自动生成带有返回导航箭头的标题栏，点击返回箭头可关闭当前页面，原因就是因为该返回箭头包含.mui-action-back类，代码如下：
标题
若希望在顶部导航栏之外的其它区域添加关闭页面的控件，只需要在对应控件上添加.mui-action-back类即可，如下为一个关闭按钮示例：
关闭
mui框架封装的页面右滑关闭功能，默认未启用，若要使用右滑关闭功能，需要在（）;方法中设置swipeBack参数，如下：
（{
swipeBack:
true（{
preloadPages:
[
{
url:
prelaod-page-url,
id:
preload-page-id,
styles:
{},varpage=（{
url:
new-page-url,
id:
new-page-id,etURL（））;
}
}
},5000）
}）;
扩展阅读
代码块激活字符:
minitpreload
mpreload（单个webview）
二、事件管理
除了可以使用addEventListener（）方法监听某个特定元素上的事件外，也可以使用.on（）方法实现批量元素的事件绑定。
event
Type:
需监听的事件名称，例如：
'tap'
selector
Type:
选择器
handler
Type:
（event）
事件触发时的回调函数，通过回调中的event参数可以获得事件详情
示例
点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面
mui（".mui-table-view"）.on（'tap','.mui-table-view-cell',function（）{
n（"tap","li",foo_1）;
n（"tap","li",foo_2）;
functionfoo_1（）{
（"foo_1execute"）;
}
functionfoo_2（）{
（"foo_2execute"）;
}
ff（"tap","li",foo_1）;
off（event,selector）适用于取消对应选择器上特定事件的所有回调，例如：
n（"tap","li",foo_1）;
n（"tap","li",foo_2）;
functionfoo_1（）{
（"foo_1execute"）;
}
functionfoo_2（）{
（"foo_2execute"）;
}
ff（"tap","li"）;
off（event）适用于取消当前元素上绑定的特定事件的所有回调，例如：
n（"tap","li",foo_1）;
n（"tap","p",foo_3）;
functionfoo_1（）{
（"foo_1execute"）;
}
functionfoo_3（）{
（"foo_3execute"）;
}
ff（"tap"）;
off（）适用于取消当前元素上绑定的所有事件回调，例如：
n（"tap","li",foo_1）;
n（"doubletap","li",foo_4）;
n（"tap","p",foo_3）;
functionfoo_1（）{
（"foo_1execute"）;
}
functionfoo_3（）{
（"foo_3execute"）;
}
functionfoo_4（）{
（"foo_4execute"）;
}
ff（）;
扩展阅读
代码块激活字符:
mmoff
使用（）方法可以动态触发特定DOM元素上的事件。
element
Type:
触发事件的DOM元素
event
Type:
事件名字，例如：
'tap'、'swipeleft'
data
Type:
需要传递给事件的业务参数
示例
自动触发按钮的点击事件：
varbtn=（"submit"）;
..
}）;
触发自定义事件
通过（）方法可触发目标窗口的自定义事件：
target
Type:
需传值的目标webview
event
Type:
自定义事件名称
data
Type:
json格式的数据
目标webview必须触发loaded事件后才能使用自定义事件
若新创建一个webview，不等该webview的loaded事件发生，就立即使用（）或（webview,'eventName',{}），则可能无效；案例参考：
示例
假设如下场景：
从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据，mui要实现类似需求可通过如下步骤实现：
在列表页面中预加载详情页面（假设为）
列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页面；
详情页面监听newsId自定义事件
列表页面代码如下：
ui-content'）.on（'tap','a',function（e）{
varid=（'id'）;
...
}）;
扩展阅读
代码块激活字符:
mfire
三、mui工具类
mui框架将很多功能配置都集中在方法中，要使用某项功能，只需要在方法中完成对应参数配置即可，目前支持在方法中配置的功能包括：
、、、、、、。
mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用
以下各配置模块在其对应文档中有详细阐述,请点击链接查看,这里只列出所有可配置项
（{
.
}],
.
],
.
},
.
},
.itle类的
元素
若要将mui对象转化成dom对象，可使用如下方法（类似jquery对象转成dom对象）：
ui-slider'）.slider（）.gotoItem
（1）;
示例2：
重新开启上拉加载
mui（'#pullup-container'）.pullRefresh（）.refresh（true）;
扩展阅读
代码块激活字符:
mmui
each既是一个类方法，同时也是一个对象方法，两个方法适用场景不同；换言之，你可以使用（）去遍历数组或json对象，也可以使用mui（selector）.each（）去遍历DOM结构。
obj
Type:
||
需遍历的对象或数组；若为对象，仅遍历对象根节点下的key
handler
Type:
（||index,element）
为每个元素执行的回调函数；其中，index表示当前元素的下标或key，element表示当前匹配元素
handler
Type:
（index,element）
为每个匹配元素执行的回调函数；其中，index表示当前元素在匹配元素中的位置（下标，从0开始），element表示当前匹配元素，可用this关键字代替
示例1
输出当前数组中每个元素的平方
vararray=[1,2,3]
（array,function（index,item）{
（item*item）;
}）
示例2
当前页面中有三个字段，如下：
升级会员 