mui开发文档.docx
《mui开发文档.docx》由会员分享，可在线阅读，更多相关《mui开发文档.docx（44页珍藏版）》请在冰豆网上搜索。
mui开发文档
Mui组件部分请参照官网资料,以下资料也来自官网,主要就是便于在手机上查瞧
一、窗口事件详细内容
页面初始化
在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui、plusReady（）方法,涉及到HTML5+的api,建议都写在mui、plusReady方法中。
如下为打印当前页面URL的示例:
mui、plusReady（function（）{
console、log（"当前页面URL:
"+plus、webview、currentWebview（）、getURL（））;
}）;
扩展阅读
mui、init（） mui插件初始化
mui、ready（） 当DOM准备就绪时,指定一个函数来执行。
代码块激活字符:
minit
创建子页面
在mobileapp开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题;mui的解决思路就是:
将需要滚动的区域通过单独的webview实现,完全使用原生滚动。
具体做法则就是:
将目标页面分解为主页面与内容页面,主页面显示卡头卡尾区域,比如顶部导航、底部选项卡等;内容页面显示具体需要滚动的内容,然后在主页面中调用mui、init方法初始化内容页面。
mui、init（{
subpages:
[{
url:
your-subpage-url,//子页面HTML地址,支持本地地址与网络地址
id:
your-subpage-id,//子页面标志
styles:
{
top:
subpage-top-position,//子页面顶部位置
bottom:
subpage-bottom-position,//子页面底部位置
width:
subpage-width,//子页面宽度,默认为100%
height:
subpage-height,//子页面高度,默认为100%
、、、、、、
},
extras:
{}//额外扩展参数
}]
}）;
参数说明:
styles表示窗口属性,参考5+规范中的WebviewStyle;特别注意,height与width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
示例:
Hellomui的首页其实就就是index、html加list、html合并而成的,如下:
index、html的作用就就是显示固定导航,list、html显示具体列表内容,列表项的滚动就是在list、html所在webview中使用原生滚动,既保证了滚动条不会穿透顶部导航,符合app的体验,也保证了列表流畅滚动,解决了区域滚动卡顿的问题。
list、html就就是index、html的子页面,创建代码比较简单,如下:
mui、init（{
subpages:
[{
url:
'list、html',
id:
'list、html',
styles:
{
top:
'45px',//mui标题栏默认高度为45px;
bottom:
'0px'//默认为0px,可不定义;
}
}]
}）;
扩展阅读
代码块激活字符:
misubpage
打开新页面
做webapp,一个无法避开的问题就就是转场动画;web就是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点（常见的SPA解决方案）,会碰到很高的性能挑战:
DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃;mui的解决思路就是:
单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现、
mui、openWindow（{
url:
new-page-url,
id:
new-page-id,
styles:
{
top:
newpage-top-position,//新页面顶部位置
bottom:
newage-bottom-position,//新页面底部位置
width:
newpage-width,//新页面宽度,默认为100%
height:
newpage-height,//新页面高度,默认为100%
、、、、、、
},
extras:
{
、、、、、//自定义扩展参数,可以用来处理页面间传值
},
createNew:
false,//就是否重复创建同样id的webview,默认为false:
不重复创建,直接显示
show:
{
autoShow:
true,//页面loaded事件发生后自动显示,默认为true
aniShow:
animationType,//页面显示动画,默认为”slide-in-right“;
duration:
animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
},
waiting:
{
autoShow:
true,//自动显示等待框,默认为true
title:
'正在加载、、、',//等待对话框上显示的提示内容
options:
{
width:
waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
height:
waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
、、、、、、
}
}
}）
参数:
▪styles
窗口参数,参考5+规范中的WebviewStyle;特别注意,height与width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
▪extras
新窗口的额外扩展参数,可用来处理页面间传值;例如:
varwebview=mui、openWindow（{
url:
'info、html',
extras:
{
name:
'mui'//扩展参数
}
}）;
console、log（webview、name）;//输出mui字符串
注意:
扩展参数仅在打开新窗口时有效,若目标窗口为预加载页面,则通过mui、openWindow方法打开时传递的extras参数无效。
▪createNew
就是否重复创建相同id的webview;
为优化性能、避免app中重复创建webview,muiv1、7、0开始增加createNew参数,默认为false;判断逻辑如下:
∙createNew参数为为true,则不判断重复,每次都新建webview;
∙createNew参数为为fasle,则先查找当前App中就是否已存在同样id的webview,若存在则直接显示;否则新创建并根据show参数执行显示逻辑;
注意:
plusReady事件仅在webview首次创建时触发,使用mui、openWindow方法多次打开已存在的同样id的webview时,就是不会重复触发plusReady事件的;因此若业务写在plusReady事件中,可能会出现执行结果与预期不一致的情况;此时可通过自定义事件触发;案例参考:
mui、plusReady有时会失效;
▪show
窗口显示控制参数,具体参数如下:
∙autoShow:
目标窗口loaded事件发生后,就是否自动显示,默认为true;若为false,则仅创建但不显示webview;若目标页面为预加载页面,则该参数无效;
∙aniShow表示页面显示动画,比如从右侧划入、从下侧划入等,具体可参考5+规范中的AnimationTypeShow
∙duration:
显示Webview窗口动画的持续时间,单位为ms
▪waiting
系统等待框参数
mui框架在打开新页面时等待框的处理逻辑为:
显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框;
因此,只有当新页面为新创建页面（webview）时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。
waiting中的具体参数:
∙autoShow:
就是否自动显示等待框,默认为true;若为false,则不显示等待框;注意:
若waiting框的autoShow为true,但目标页面不自动显示,则需在目标页面中通过如下代码关闭等待框:
plus、nativeUI、closeWaiting（）;
∙title:
等待框上的提示文字
∙options表示等待框显示参数,比如宽高、背景色、提示文字颜色等,具体可参考5+规范中的WaitingOption
示例1:
Hellomui中,点击首页右上角的图标,会打开关于页面,实现代码如下:
//tap为mui封装的单击事件,可参考手势事件章节
document、getElementById（'info'）、addEventListener（'tap',function（）{
//打开关于页面
mui、openWindow（{
url:
'examples/info、html',
id:
'info'
}）;
}）;
因没有传入styles参数,故默认全屏显示;也没有传入show参数,故使用slide-in-right动画,新页面从右侧滑入。
示例2:
从A页面打开B页面,B页面为一个需要从服务端加载的列表页面,若在B页面loaded事件发生时就将其显示出来,因服务器数据尚未加载完毕,列表页面为空,用户体验不好;可通过如下方式改善用户体验（最好的用户体验应该就是通过预加载的方式）:
第一步,B页面loaded事件发生后,不自动显示;
//A页面中打开B页面,设置show的autoShow为false,则B页面在其loaded事件发生后,不会自动显示;
mui、openWindow（{
url:
'B、html',
show:
{
autoShow:
false
}
}）;
第二步,在B页面获取列表数据后,再关闭等待框、显示B页面
//B页面onload从服务器获取列表数据;
window、onload=function（）{
//从服务器获取数据
、、、、
//业务数据获取完毕,并已插入当前页面DOM;
//注意:
若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;
mui、plusReady（function（）{
//关闭等待框
plus、nativeUI、closeWaiting（）;
//显示当前页面
mui、currentWebview、show（）;
}）;
}
扩展阅读
代码块激活字符:
mopenwindow
关闭页面
mui框架将窗口关闭功能封装在mui、back方法中,具体执行逻辑就是:
▪若当前webview为预加载页面,则hide当前webview;
▪否则,close当前webview;
在mui框架中,有三种操作会触发页面关闭（执行mui、back方法）:
▪点击包含、mui-action-back类的控件
▪在屏幕内,向右快速滑动
▪Android手机按下back按键
iOS平台原生支持从屏幕边缘右滑关闭
iOS平台可通过popGesture参数实现从屏幕边缘右滑关闭webview,参考5+规范,若想禁用该功能,可通过setStyle方法设置popGesture为none。
hbuilder中敲mheader生成的代码块,会自动生成带有返回导航箭头的标题栏,点击返回箭头可关闭当前页面,原因就就是因为该返回箭头包含、mui-action-back类,代码如下:
标题
若希望在顶部导航栏之外的其它区域添加关闭页面的控件,只需要在对应控件上添加、mui-action-back类即可,如下为一个关闭按钮示例:
关闭
mui框架封装的页面右滑关闭功能,默认未启用,若要使用右滑关闭功能,需要在mui、init（）;方法中设置swipeBack参数,如下:
mui、init（{
swipeBack:
true//启用右滑关闭功能
}）;
mui框架默认会监听Android手机的back按键,然后执行页面关闭逻辑;若不希望mui自动处理back按键,可通过如下方式关闭mui的back按键监听;
mui、init（{
keyEventBind:
{
backbutton:
false//关闭back按键监听
}
}）;
除了如上三种操作外,也可以直接调用mui、back（）方法,执行窗口关闭逻辑;
mui、back（）仅处理窗口逻辑,若希望在窗口关闭之前再处理一些其它业务逻辑,则可将业务逻辑抽象成一个具体函数,然后注册为mui、init方法的beforeback参数;beforeback的执行逻辑为:
▪执行beforeback参数对应的函数若返回false,则不再执行mui、back（）方法;
▪否则（返回true或无返回值）,继续执行mui、back（）方法;
示例:
从列表打开详情页面,从详情页面再返回后希望刷新列表界面,此时可注册beforeback参数,然后通过自定义事件通知列表页面刷新数据,示例代码如下:
mui、init（{
beforeback:
function（）{
//获得列表界面的webview
varlist=plus、webview、getWebviewById（'list'）;
//触发列表界面的自定义事件（refresh）,从而进行数据刷新
mui、fire（list,'refresh'）;
//返回true,继续页面关闭逻辑
returntrue;
}
}）;
注意:
beforeback的执行返回必须就是同步的（阻塞模式）,若使用nativeUI这种异步js（非阻塞模式）,则可能会出现意想不到的结果;比如:
通过plus、nativeUI、confirm（）弹出确认框,可能用户尚未选择,页面已经返回了（beforeback同步执行完毕,无返回值,继续执行mui、back（）方法,nativeUI不会阻塞js进程）:
在这种情况下,若要自定义业务逻辑,就需要复写mui、back方法了;如下为一个自定义示例,每次都需要用户确认后,才会关闭当前页面
//备份mui、back,mui、back已将窗口关闭逻辑封装的比较完善（预加载及父子窗口）,因此最好复用mui、back
varold_back=mui、back;
mui、back=function（）{
varbtn=["确定","取消"];
mui、confirm（'确认关闭当前窗口？
','HelloMUI',btn,function（e）{
if（e、index==0）{
//执行mui封装好的窗口关闭逻辑;
old_back（）;
}
}）;
}
为何设置了swipeBack:
false,在iOS上依然可以右滑关闭？
iOS平台原生支持从屏幕边缘右滑关闭,这个就是通过popGesture参数控制的,参考5+规范,若需禁用,可通过setStyle方法设置popGesture为none。
能否通过addEventListener增加back按键监听实现自定义关闭逻辑？
addEventListener只会增加新的执行逻辑,老的监听逻辑（mui、back）依然会执行,因此,若需实现自定义关闭逻辑,一定要重写mui、back。
扩展阅读
代码块激活字符:
mback
预加载
所谓的预加载技术就就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验。
mui提供两种方式实现页面预加载。
方式一:
通过mui、init方法中的preloadPages参数进行配置、
mui、init（{
preloadPages:
[
{
url:
prelaod-page-url,
id:
preload-page-id,
styles:
{},//窗口参数
extras:
{},//自定义扩展参数
subpages:
[{},{}]//预加载页面的子页面
}
],
preloadLimit:
5//预加载窗口数量限制（一旦超出,先进先出）默认不限制
}）;
该种方案使用简单、可预加载多个页面,但不会返回预加载每个页面的引用,若要获得对应webview引用,还需要通过plus、webview、getWebviewById方式获得;另外,因为mui、init就是异步执行,执行完mui、init方法后立即获得对应webview引用,可能会失败,例如如下代码:
mui、init（{
preloadPages:
[
{
url:
'list、html',
id:
'list'
}
]
}）;
varlist=plus、webview、getWebviewByid（'list'）;//这里可能返回空;
方式二:
通过mui、preload方法预加载、
varpage=mui、preload（{
url:
new-page-url,
id:
new-page-id,//默认使用当前页面的url作为id
styles:
{},//窗口参数
extras:
{}//自定义扩展参数
}）;
通过mui、preload（）方法预加载,可立即返回对应webview的引用,但一次仅能预加载一个页面;若需加载多个webview,则需多次调用mui、preload（）方法;
如上两种方案,各有优劣,需根据具体业务场景灵活选择;
判断预加载就是否成功
方式一、通过直观现象分析
预加载页面会立即打开,不会显示等待框;非预加载页面默认会先显示等待框,再显示新页面;
方式二、增加log分析预加载页面就是否已创建
比如:
A页面中预加载B页面,则在A页面完全加载（可通过setTimeout模拟）后,打印当前应用所有webview,瞧就是否包含B页面的url,以此来分析。
例如:
在A页面增加如下代码:
mui、plusReady（function（）{
setTimeout（function（）{
vararray=plus、webview、all（）;
if（array）{
for（vari=0,len=array、length;iconsole、log（array[i]、getURL（））;
}
}
},5000）
}）;
扩展阅读
代码块激活字符:
minitpreload
mpreload（单个webview）
二、事件管理
事件绑定
除了可以使用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（）{
//获取id
varid=this、getAttribute（"id"）;
//传值给详情页面,通知加载新数据
mui、fire（detail,'getDetail',{id:
id}）;
//打开新闻详情
mui、openWindow（{
id:
'detail',
url:
'detail、html'
}）;
}）
扩展阅读
代码块激活字符:
mmon
事件取消
使用on（）方法绑定事件后,若希望取消绑定,则可以使用off（）方法。
off（）方法根据传入参数的不同,有不同的实现逻辑。
▪
▪event
Type:
String
需取消绑定的事件名称,例如:
'tap'
▪selector
Type:
String
选择器
▪handler
Type:
Function
之前绑定到该元素上的事件函数,不支持匿名函数
▪
▪event
Type:
String
需取消绑定的事件名称,例如:
'tap'
▪selector
Type:
String
选择器
▪
▪event
Type:
String
需取消绑定的事件名称,例如:
'tap'
▪
▪空参数,删除该元素上所有事件
示例
off（event,selector,handle）适用于取消对应选择器上特定事件所执行的特定回调,例如:
//点击li时,执行foo_1函数
mui（"#list"）、on（"tap","li",foo_1）;
//点击li时,执行foo_2函数
mui（"#list"）、on（"tap","li",foo_2）;
functionfoo_1（）{
console、log（"foo_1execute"）;
}
functionfoo_2（）{
console、log（"foo_2execute"）;
}
//点击li时,不再执行foo_1函数,但会继续执行foo_2函数
mui（"#list"）、off（"tap","li",foo_1）;
off（event,selector）适用于取消对应选择器上特定事件的所有回调,例如:
//点击li时,执行foo_1函数
mui（"#list"）、on（"tap","li",foo_1）;
//点击li时,执行foo_2函数
mui（"#list"）、on（"tap","li",foo_2）;
functionfoo_1（）{
console、log（"foo_1execute"）;
}
functionfoo_2（）{
console、log（"foo_2execute"）;
}
//点击li时,foo_2、foo_2两个函数均不再执行
mui（"#list"）、off（"
升级会员 