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

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