mui开发文档Word格式.docx
《mui开发文档Word格式.docx》由会员分享，可在线阅读，更多相关《mui开发文档Word格式.docx（44页珍藏版）》请在冰豆网上搜索。
extras:
.....//自定义扩展参数，可以用来处理页面间传值
createNew:
false,//是否重复创建同样id的webview，默认为false:
不重复创建，直接显示
show:
autoShow:
true,//页面loaded事件发生后自动显示，默认为true
aniShow:
animationType,//页面显示动画，默认为”slide-in-right“；
duration:
animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
waiting:
true,//自动显示等待框，默认为true
title:
正在加载...'
//等待对话框上显示的提示内容
options:
waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度
waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度
}）
参数：
▪styles
窗口参数，参考5+规范中的WebviewStyle；
特别注意，height和width两个属性,即使不设置，也默认按100%计算；
因此若设置了top值为非"
0px"
的情况，建议同时设置bottom值，否则5+runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；
left、right同理。
▪extras
新窗口的额外扩展参数，可用来处理页面间传值；
例如：
varwebview=mui.openWindow（{
info.html'
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中的具体参数：
是否自动显示等待框，默认为true；
若为false，则不显示等待框；
若waiting框的autoShow为true，但目标页面不自动显示，则需在目标页面中通过如下代码关闭等待框：
plus.nativeUI.closeWaiting（）;
∙title：
等待框上的提示文字
∙options表示等待框显示参数，比如宽高、背景色、提示文字颜色等，具体可参考5+规范中的WaitingOption
示例1：
Hellomui中，点击首页右上角的图标，会打开关于页面，实现代码如下：
//tap为mui封装的单击事件，可参考手势事件章节
document.getElementById（'
info'
）.addEventListener（'
tap'
function（）{
//打开关于页面
mui.openWindow（{
'
examples/info.html'
因没有传入styles参数，故默认全屏显示；
也没有传入show参数，故使用slide-in-right动画，新页面从右侧滑入。
示例2：
从A页面打开B页面，B页面为一个需要从服务端加载的列表页面，若在B页面loaded事件发生时就将其显示出来，因服务器数据尚未加载完毕，列表页面为空，用户体验不好；
可通过如下方式改善用户体验（最好的用户体验应该是通过预加载的方式）：
第一步，B页面loaded事件发生后，不自动显示；
//A页面中打开B页面，设置show的autoShow为false，则B页面在其loaded事件发生后，不会自动显示；
B.html'
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类，代码如下：
<
headerclass="
mui-barmui-bar-nav"
>
<
aclass="
mui-action-backmui-iconmui-icon-left-navmui-pull-left"
/a>
h1class="
mui-title"
标题<
/h1>
/header>
若希望在顶部导航栏之外的其它区域添加关闭页面的控件，只需要在对应控件上添加.mui-action-back类即可，如下为一个关闭按钮示例：
buttontype="
button"
class='
mui-btnmui-btn-dangermui-action-back'
关闭<
/button>
mui框架封装的页面右滑关闭功能，默认未启用，若要使用右滑关闭功能，需要在mui.init（）;
方法中设置swipeBack参数，如下：
mui.init（{
swipeBack:
true//启用右滑关闭功能
mui框架默认会监听Android手机的back按键，然后执行页面关闭逻辑；
若不希望mui自动处理back按键，可通过如下方式关闭mui的back按键监听；
keyEventBind:
{
backbutton:
false//关闭back按键监听
除了如上三种操作外，也可以直接调用mui.back（）方法，执行窗口关闭逻辑；
mui.back（）仅处理窗口逻辑，若希望在窗口关闭之前再处理一些其它业务逻辑，则可将业务逻辑抽象成一个具体函数，然后注册为mui.init方法的beforeback参数;
beforeback的执行逻辑为：
▪执行beforeback参数对应的函数若返回false，则不再执行mui.back（）方法；
▪否则（返回true或无返回值），继续执行mui.back（）方法；
示例：
从列表打开详情页面，从详情页面再返回后希望刷新列表界面，此时可注册beforeback参数，然后通过自定义事件通知列表页面刷新数据，示例代码如下：
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参数进行配置.
preloadPages:
[
prelaod-page-url,
preload-page-id,
{},//窗口参数
{},//自定义扩展参数
subpages:
[{},{}]//预加载页面的子页面
],
preloadLimit:
5//预加载窗口数量限制（一旦超出,先进先出）默认不限制
该种方案使用简单、可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得；
另外，因为mui.init是异步执行，执行完mui.init方法后立即获得对应webview引用，可能会失败，例如如下代码：
list.html'
]
varlist=plus.webview.getWebviewByid（'
//这里可能返回空；
方式二：
通过mui.preload方法预加载.
varpage=mui.preload（{
new-page-id,//默认使用当前页面的url作为id
{}//自定义扩展参数
通过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;
i<
len;
i++）{
console.log（array[i].getURL（））;
}
},5000）
minitpreload
mpreload（单个webview）
一、事件管理
事件绑定
除了可以使用addEventListener（）方法监听某个特定元素上的事件外，也可以使用.on（）方法实现批量元素的事件绑定。
▪
.on（event,selector,handler）
▪event
Type:
String
需监听的事件名称，例如：
▪selector
选择器
▪handler
Function（
Event
event）
事件触发时的回调函数，通过回调中的event参数可以获得事件详情
示例
点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面
mui（"
.mui-table-view"
）.on（'
.mui-table-view-cell'
function（）{
//获取id
varid=this.getAttribute（"
id"
//传值给详情页面，通知加载新数据
mui.fire（detail,'
getDetail'
{id:
id}）;
//打开新闻详情
detail'
detail.html'
}）
mmon
事件取消
使用on（）方法绑定事件后，若希望取消绑定，则可以使用off（）方法。
off（）方法根据传入参数的不同，有不同的实现逻辑。
versionadded:
2.0.0.off（event,selector,handler）
需取消绑定的事件名称，例如：
Function
之前绑定到该元素上的事件函数，不支持匿名函数
2.0.0.off（event,selector）
2.2.0.off（event）
2.2.0.off（）
▪空参数，删除该元素上所有事件
off（event,selector,handle）适用于取消对应选择器上特定事件所执行的特定回调，例如：
//点击li时，执行foo_1函数
#list"
）.on（"
tap"
li"
foo_1）;
//点击li时，执行foo_2函数
foo_2）;
functionfoo_1（）{
console.log（"
foo_1execute"
functionfoo_2（）{
foo_2execute"
//点击li时，不再执行foo_1函数，但会继续执行foo_2函数
）.off（"
off（event,selector）适用于取消对应选择器上特定事件的所有回调，例如：
//点击li时，foo_2、foo_2两个函数均不再执行
off（event）适用于取消当前元素上绑定的特定事件的所有回调，例如：
//点击p时，执行foo_3函数
p"
foo_3）;
functionfoo_3（）{
foo_3execute"
//点击li时，不再执行foo_1函数；
点击p时，也不再执行foo_3函数
off（）适用于取消当前元素上绑定的所有事件回调，例如：
//双击li时，执行foo_4函数
doubletap"
foo_4）;
functionfoo_4（）{
foo_4execute"
点击p时，也不再执行foo_3函数；
双击li时，也不再执行foo_4函数；
）.off（）;
mmoff
事件触发
使用mui.trigger（）方法可以动态触发特定DOM元素上的事件。
.trigger（element,event,data）
▪element
Element
触发事件的DOM元素
事件名字，例如：
、'
swipeleft'
▪data
Object
需要传递给事件的业务参数
自动触发按钮的点击事件：
varbtn=document.getElementById（"
submit"
//监听点击事件
btn.addEventListener（"
function（）{
tapeventtrigger"
//触发submit按钮的点击事件
mui.trigger（btn,'
部
升级会员 