webapp mui & HTML5+ (四) 之 窗口（页面初始化、跳转、传参）

在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中

页面初始化

mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，

目前支持在mui.init方法中配置的功能包括：

创建子页面、

关闭页面、

手势事件配置、

预加载、

下拉刷新、

上拉加载、

设置系统状态栏背景颜色。

打开新的页面

1.mui.openWindow()

在app中打开一个新的页面，可以用mui.openWindow()直接打开，以下是openWindow的一些参数

mui.openWindow({
url:new-page-url,   // 新页面的url
id:new-page-id,     // 新页面的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,//等待框背景区域高度，默认根据内容自动计算合适高度
......
}
}
})

2.初始化时，mui.init()创建子页面

也可能会遇到这样一种场景，顶部有titleBar,下面是动态列表，列表是需要滚动的，就是需要局部滚动，在android上会出现滚动不流畅的问题，

借用官网的一张图片



mui是这样解决的，将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用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:{}//额外扩展参数
}]
});

3.页面预加载

页面预加载技术就是在用户还没有触发页面跳转的时候，提前将目标页面创建出来，当用户跳转至目标页面时就可以立即进行页面跳转，没有创建页面的时间，使app更流畅

mui有两种页面预加载的方法

第一种就是在初始话页面的时候在init里面直接用参数preloadPages进行配置

mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

该种方案使用简单、可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得

第二种方式就是通过mui.preload方法预加载

var page = mui.preload({
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数
});

页面传值

1.传递参数

无论是preload、init，还是openWindow方法想在页面之间的传值都需要通过extras自定义扩展参数进行数据的传递，比如说这样一个场景，新闻列表页面

点击进入新闻详情页面，需要新闻的newsId传入到新打开的页面，根据newsId进行页面渲染

在这里有一个坑需要注意一下，扩展参数只在打开新的窗口的时候有效，如果页面先经过预加载，然后通过openWindow方法打开的话，这个参数是无法传递的

2.自定义事件

有这么一个场景，列表页有一条数据，点击展开进入详情页，在详情页编辑之后回到列表页，列表页刷新展示新编辑的数据。back之后只会返回到列表页面，

但是返回之后只会返回到列表页，并不会刷新，这样就需要用到mui.fire()方法来自定义一个事件。具体如下

这是详情页面

// 获取列表页面
var list = plus.webview.getWebviewById('list');
//触发列表页面的自定义事件 reload
mui.fire(list, 'reload');

列表页面

//添加reload自定义事件监听
window.addEventListener('newsId',function(event){
// 执行页面刷新逻辑
});

关闭页面

1.mui.back

mui封装了窗口后退及关闭的方法，可以直接用mui.back()返回之前的窗口，而且back方法监听手机的back返回按键，自动执行返回逻辑，若是不想监听返回按键

可以使用一下方法禁止监听

mui.init({
keyEventBind: {
backbutton: false  //关闭back按键监听
}
});

mui.back支持页面的右滑关闭。默认是未启用的。可以使用以下方法开启

mui.init({
swipeBack:true //启用右滑关闭功能
});

而且mui.back有一个beforeback参数，结合上面的fire方法可以封装一个返回刷新的逻辑，代码如下

mui.init({
beforeback: function() {
// 获取列表页面
var list = plus.webview.getWebviewById('list');
//触发列表页面的自定义事件 reload
mui.fire(list, 'reload');// true 继续页面逻辑
return true;
}
});

2.mui.currentWebview.close()

mui.currentWebview.close方法可以直接关闭当前webview

本文纯手打，有不当之处请留言！希望能帮到小伙伴们，谢谢！