创建新页面、关闭页面、页面传值、预加载页面、关闭页面时回传值

当我们理解什么是HTML5+ 和 MUI 移动框架之后，我们就可以开始撸了。

一、创建一个新页面

当我们使MUI框架时，可以使用 mui.js 插件的封锁方法：mui.openWindow() 打开一个新页面，例如：

这是最简单的打开一个新页面，没有任何配置

mui.openWindow({url: 'examples/info.html', id:'info' });

下面是 mui.openWindow() 方法的全部参数配置，url和id 是必选的参数，详细的可以参考：http://dev.dcloud.net.cn/mui/window/#openwindow

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,//等待框背景区域高度，默认根据内容自动计算合适高度
        ......
      }
    }
})

我们在这里不讲mui.js 插件封装的 mui.openWindow() 的使用了，大家可以参考相关文档，在这里我们讲下，最原始的5+ 创建打开新页面的方法， 当我们不使用MUI框架时，也可以使用。

1.创建一个新的Webview窗口​

该方法包含4个参数，url和id 是必填, styles参数是对打开的页面，配置些相关参数，例如它是高宽，是否是沉浸式显示，是否开启硬件加速等等，extras, 是页面传页，当你打开一个新的页面时，你想把值传给它，就可以这样写 {id:"123"}

plus.webview.create( url, id, styles, extras );

怎么使用？ 

列举些常用的参数配置，如需了解更多可以浏览5+的文档: http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create

//页面参数配置,根据页面需求配置
var styles=
{
statusbar:{background:'#FFFFFF'} //仅在应用设置为沉浸式状态栏样式下有效,设置状态栏背景颜色
,
popGesture:"none" // 对IOS 应用有效，是否开启右滑关闭页面
,scrollIndicator:"none" // 隐藏页面的滚动条
,hardwareAccelerated=true //// 创建新窗口并设置开启硬件加速
,bottom:"50px" //窗口垂直向上的偏移量,支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。 当同时设置了top和height值时，忽略此属性值； 当未设置height值时，可通过top和bottom属性值来确定窗口的高度。
,bounce:"none"  //窗口遇到边框是否有反弹效果 可取值： "none" - 表示没有反弹效果； "vertical" - 表示垂直方向有反弹效果； "horizontal" - 表示水平方向有反弹效果； "all" - 表示垂直和水平方向都有反弹效果。 默认值为"none"。
};

var extras={newsid:"123"}; //页面传值
var page=plus.webview.create('xxx.html','id',styles,extras);

当我们参数写好时，创建了它，但是它不没有显示出来，此时它是隐藏的，我们通过show() 方法显示它出来

var page=plus.webview.create('xxx.html', 'id', styles, extras );
    
    //调用show() 方法，显示页面
    
    page.show("auto");

show() ,方法显示页面的一些动态效果参数​

"auto": (String 类型 )自动选择动画效果
自动选择显示窗口相对于的动画效果。
"none": (String 类型 )无动画
立即关闭页面，无任何动画效果。 此效果忽略动画时间参数，立即关闭。
"slide-out-right": (String 类型 )横向向右侧滑出屏幕动画
页面从屏幕中横向向右侧滑动到屏幕外关闭。平台支持
Android - 2.2+ (支持): 默认动画时间为200ms。
iOS - 5.1.1+ (支持): 默认动画时间为300ms。


"slide-out-left": (String 类型 )横向向左侧滑出屏幕动画
页面从屏幕中横向向左侧滑动到屏幕外关闭。平台支持
Android - 2.2+ (支持): 默认动画时间为200ms。
iOS - 5.1.1+ (支持): 默认动画时间为300ms。


"slide-out-top": (String 类型 )竖向向上侧滑出屏幕动画
页面从屏幕中竖向向上侧滑动到屏幕外关闭。平台支持
Android - 2.2+ (支持): 默认动画时间为200ms。
iOS - 5.1.1+ (支持): 默认动画时间为300ms。


"slide-out-bottom": (String 类型 )竖向向下侧滑出屏幕动画
页面从屏幕中竖向向下侧滑动到屏幕外关闭。平台支持
Android - 2.2+ (支持): 默认动画时间为200ms。
iOS - 5.1.1+ (支持): 默认动画时间为300ms。


"fade-out": (String 类型 )从不透明到透明逐渐隐藏动画
页面从不透明到透明逐渐隐藏关闭。平台支持
Android - 2.2+ (支持): 默认动画时间为200ms。
iOS - 5.1.1+ (支持): 默认动画时间为300ms。


"zoom-in": (String 类型 )从大逐渐缩小关闭动画
页面逐渐向页面中心缩小关闭。平台支持
Android - 2.2+ (支持): 默认动画时间为100ms。
iOS - 5.1.1+ (支持): 默认动画时间为100ms。


"zoom-fade-in": (String 类型 )从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画
页面逐渐向页面中心缩小并且从不透明到透明逐渐隐藏关闭。平台支持
Android - 2.2+ (支持): 默认动画时间为100ms。
iOS - 5.1.1+ (支持): 默认动画时间为100ms。


"pop-out": (String 类型 )从右侧平移出栈动画效果
页面从屏幕右侧滑出消失，同时上一个页面带阴影效果从屏幕左侧滑入显示。平台支持
Android - 2.2+ (支持): 默认动画时间为200ms。
iOS - 5.1.1+ (支持): 默认动画时间为300ms。

 如果需要调整，显示页面时的时间，可以这样做 200 毫秒

page.show("auto",200);

 这里，大家应用知道怎么用5+的方法打开一个新页面了。

然再讲下，它的一些监听的方法 addEventListener() 的事件

"close" //Webview窗口关闭事件

"dragBounce" //Webview窗口回弹事件

"slideBounce": //Webview窗口回弹事件

"error": //Webview窗口加载错误事件

"hide": //Webview窗口隐藏事件

"loading": //Webview窗口页面开始加载事件

"loaded": //Webview窗口页面加载完成事件

"maskClick": //Webview窗口显示遮罩层时点击事件

"rendering": //Webview窗口开始渲染事件

"rendered": //Webview窗口渲染完成事件

"show": //Webview窗口显示事件

titleUpdate": //Webview加载页面标题更新事件

"touchstart": //Webview窗口接收到触屏事件

"popGesture": //Webview窗口侧滑返回事件

"progressChanged": //Webview窗口加载进度变化事件

例如以下使用，如果你想让内容加载完成后，再把它显示出来，可以这样写

 var  webview= plus.webview.create('index.html', 'id');
     //当页面内容加载完成时，触发
webview.addEventListener("loaded",function()
 {
            
        webview.show(); //再打开页面显示出来  	
                
 },false);

 二、关闭页面

当我们打开一个页面时，怎么关掉它。

1. mui.js 插件封装了两个方法：一个是JS , 调用：mui.back() 或者使用类  

官方把mui-action-back 类已经写入mui.js插件里，直接填写就可以使用.

2. 使用5+的方法关闭页面

 var page=plus.webview.currentWebview();  //获得当前窗体对象     
   	 page.close(); //关闭当前页面

 3. 使用 安卓 手机的物理返回按键，返回关闭页面 

 三、页面传值

 1. 传值给已经创建的页面，包括隐藏的页面。 例如，子页面给父页面传值

  首先你要先获得你要传值的对象窗体，5+提供了方法：plus.webview.getWebviewById();

plus.webview.getWebviewById('你要传值的页面ID'); //获得对象

如果要获得父页面也可以这样写

plus.webview.currentWebview().opener(); //获得父页面对象

例如：
var page=plus.webview.getWebviewById('home.html'); //获得对象

mui.js 封装了一个页面传值方法 mui.fire() , 具体使用，请看下面代码

vae webview=plus.webview.getWebviewById("xxxid"); //获得要给它传值的页面

mui.fire() //有那些参数：1.窗体对象, 2.给传值的方法起个别名,3.传值参数JSON格式
mui.fire(webview,'name',{uid:"1",title:"今天好帅"});

然后, 被传值的页面，怎么接收值呢？
监听别名：name, 的变化
document.addEventListener("name",function(e)
{
              var uid=e.detail.uid; //获得uid
              var title=e.detail.title; //获得title
});

使用5+ 的原始方法传值, 它提供了一个 evalJS() 的方法传值，这个方法是写 js 语法，然后通过evalJS() 把JS 注入到对象窗口去执行或者执行该对象的JS方法，它的使用

    var data={uid:"1",title:"要传值了哦"}; 
    
    var webview=plus.webview.getWebviewById("xxxid");
   	    webview.evalJS('getText('+data+')');
   	    

然后被传值的页面，怎么接收值？

function getText(data)
 {
   	    	var uid=data.uid;
   	    	var title=data.title;
 }

 2. 传值给，正在打开的页面，例如：新闻列表，点击打开一篇新闻，我们要给详情页传 一个ID ,让它获得相对的新闻资讯.

A页面打开B页面并传值给它

var page=plus.webview.create('xxx.html', 'xxxid',{},{newsid:"1",title:"今天是星期一"});
//调用show() 方法，显示页面
   page.show("auto");

 B页面 接收值

var webview=plus.webview.currentWebview();

var newsid=webview.newsid;
var title=webview.title;

四、预加载页面

预加载页面，就是创建它，但不显示它出来，它隐藏在APP里，什么时间才用预加载，一般你的页面，打开的频率很高，你不想一直创建它等等。

创建预加载页面的方法， 预加载页面不宜创建过多，导致APP占据资源，最好是需时创建它，不需时销毁它

1.mui.js 插件，提供了mui.init() 方法的 preloadPages 参数配置，进行预加载页面

mui.init({
	preloadPages:[
				    {
   						 id:'address',
   						 url:'address.html',
   						 styles:{"scrollIndicator":"none"}
  					},
  					{
   						 id:'address-needtem',
   						 url:'address-needtem.html',
   						 styles:{"scrollIndicator":"none"}
  					}]
});

 2. 预加载页面创建后，怎么显示它出来，例如：

var webview=plus.webview.getWebviewById("address");
    webview.show();    

5+的原始创建预加载页面，很简直，创建它但不显示它出来，需要时再show()

var page=plus.webview.create('xxx.html', 'id', styles, extras );

五、回传值

当我们打开子页面时，填写内容后，返回时，把值带回来，怎么做？我们需要重写返回事件

mui.js 插件，提供了一个重写返回键的方法, 在返回时，先传值，再执行关闭页面方法

mui.back=function()
{
var webview=plus.webview.getWebviewById("xxxid");          
//webview.evalJS('getText('+data+')');  
mui.fire(webview,"text",{txt:"你好"});
plus.webview.currentWebview().close(); //关闭当前页面
}

5+的写法，监听安卓 手机的返回事件

plus.key.addEventListener('backbutton',function()
{ 
var webview=plus.webview.getWebviewById("xxxid");          
//webview.evalJS('getText('+data+')');  
mui.fire(webview,"text",{txt:"你好"});
plus.webview.currentWebview().close(); //关闭当前页面

},false);

 常用的一些5+获得窗体对象的方法

 plus.webview.getWebviewById("xxxid"); //根据ID获得某个窗体对象
 plus.webview.currentWebview(); //获得当前窗体对象
 plus.webview.currentWebview().opener(); //获得当前窗体的父页面对象
 plus.webview.all(); //获得全部已经创建的页面对象

 附件可以下载简单的示例项目