WeX5的前端是由若干个页面构成的，运行时，页面间有以下几种关系：Shell打开页面、页面与对话框的交互、页面与内嵌页面的交互。

Shell打开页面

WeX5中，Shell负责管理所有的页面；在同一时刻，允许多个页面同时运行，有且只有一个活动页面（即当前页面）。
配合 参考案例 ：/UI2/demo/page/index.w

1、打开页面
打开页面时，可以调用以下api：
justep.Shell.showPage(url, params)其中，url支持相对路径或绝对路径，也可以使用Shell的pageMapping中定义的页面标识。
通过justep.Shell.showPage打开页面时，可以通过以下三种方式传递参数：

传参方式 url参数 params params.data
实现方式 ？参数 #参数 不进url
支持分享 是 是 否
参数序列化 必须 必须 不需要，可以是复杂对象
触发被打开页面时间 onParamsReceive onParamsReceive onParamsReceive
被打开页面获取参数 this.getContext().getRequestParameter(name) this.params this.params.data

2、关闭页面
在WeX5中，关闭页面，可以通过以下几种方式来实现：
● 调用justep.Shell.closePage方法：默认关闭当前活动页面；
● 在页面内调用this.close方法：关闭所在页面；
● 在页面内调用window组件的close方法或操作：关闭所在页面；
发送端代码:

var url = require.toUrl('./page2.w?p1=p1Value&p2=p2Value');
		var params = {
			a1: 'a1Value',
			a2: 2,
			data: {
				d1: 'd1Value',
				d2: 'd2Value'
			}
		}
		justep.Shell.showPage(url, params)

接收端代码:

Model.prototype.modelParamsReceive = function(event){
		var context = this.getContext();
		
		//获取URL中的参数
		var p1 = context.getRequestParameter('p1');
		var p2 = context.getRequestParameter('p2');
		var buf = '来自url的参数: p1=' + p1 + ', p2=' + p2 + '\n';
		
		//获取简单参数
		buf += '简单参数：params.a1=' + event.params.a1 + ', params.a2=' + event.params.a2 + '\n';
		
		//获取复杂参数
		buf += '复杂参数：\n'
		if (event.params.data){
			buf += '    params.data.d1=' + event.params.data.d1 + '\n';
			buf += '    params.data.d2=' + event.params.data.d2 + '\n';
		}
		alert(buf);
	};
Model.prototype.button1Click = function(event){
		var context = this.getContext();
		
		//获取URL中的参数
		var p1 = context.getRequestParameter('p1');
		var p2 = context.getRequestParameter('p2');
		var buf = '来自url的参数: p1=' + p1 + ', p2=' + p2 + '\n';
		
		//获取简单参数
		buf += '简单参数：params.a1=' + this.params.a1 + ', params.a2=' + this.params.a2 + '\n';
		
		//获取复杂参数
		buf += '复杂参数：\n'
		if (this.params.data){
			buf += '    params.data.d1=' + this.params.data.d1 + '\n';
			buf += '    params.data.d2=' + this.params.data.d2 + '\n';
		}
		alert(buf);
	};

页面与对话框交互

在WeX5中，使用WindowDialog组件来实现页面与对话框间的交互。
1、打开对话框
可以调用WindowDialog组件的open({url: ”, params: {}})方法打开对话框。打开对话框时，可以通过以下方式传递参数：

传参方式 url参数 params params.data
实现方式 ？参数 #参数 不进url
支持分享 是 是 否
刺激对话框刷新 是 否 否
参数序列化 必须 必须 不需要，可以是复杂对象
触发被打开页面时间 onParamsReceive onParamsReceive onParamsReceive
被打开页面获取参数 this.getContext().getRequestParameter(name) this.params this.params.data

2、对话框向父页面返回数据
在对话框页面中，通过this.owner.send(data)方法，可以向父页面返回数据；此时会触发父页面中对应WindowDialog组件的onReceive和onReceived事件，我们可以在此事件中接收到对话框返回的数据。

3、关闭对话框
在对话框页面中，可以通过this.close或Window组件的close方法（或操作）来关闭对话框，此时会触发父页面中对应WindowDialog组件的onClose事件。
发送端代码:

	var dialog = this.comp('dialog');
		var url = require.toUrl('./dialog.w?p1=参数1&p2=参数2');
		dialog.open({
			src: url,
			params: {
				a1: '简单数据a1',
				a2: 2,
				//data是特殊的参数, 这部分内容不能被分享
				data: {
					//将一个函数传递给对话框
					fn: function(){        
						alert('将一个函数传到对话框中');
					}, 
					//将data中的一行数据传给对话框
					data1: this.comp('data1').getCurrentRow().toJson()
				} 
			}
			
		})

接收端代码:

Model.prototype.modelParamsReceive = function(event){
		var context = this.getContext();
		
		//获取URL中的参数
		var p1 = context.getRequestParameter('p1');
		var p2 = context.getRequestParameter('p2');
		var buf = '来自url的参数: p1=' + p1 + ', p2=' + p2 + '\n';
		
		//获取简单参数
		buf += '简单参数：params.a1=' + event.params.a1 + ', params.a2=' + event.params.a2 + '\n';
		
		//获取复杂参数
		buf += '复杂参数：\n'
		if (event.params.data){
			buf += '    params.data.fn=' + event.params.data.fn + '\n';
			this.comp('dlgData').loadData([event.params.data.data1]);
			this.comp('dlgData').first();
		}
		alert(buf);
	};


	Model.prototype.button1Click = function(event){
		var context = this.getContext();
		
		//获取URL中的参数
		var p1 = context.getRequestParameter('p1');
		var p2 = context.getRequestParameter('p2');
		var buf = '来自url的参数: p1=' + p1 + ', p2=' + p2 + '\n';
		
		//获取简单参数
		buf += '简单参数：params.a1=' + this.params.a1 + ', params.a2=' + this.params.a2 + '\n';
		
		//获取复杂参数
		buf += '复杂参数：\n'
		if (this.params.data){
			buf += '    params.data.fn=' + this.params.data.fn + '\n';
		}
		alert(buf);
	};

页面与内嵌页面交互

在WeX5中，如果期望在一个页面中嵌入另一个页面的内容（比如HTML中的iframe），可以使用WindowContainer组件来实现。
1、页面向内嵌页面传参数

传参方式 url参数 params params.data
实现方式 ？参数 #参数 不进url
刺激内嵌页面刷新 是 否 否
参数序列化 必须 必须 不需要，可以是复杂对象
触发被打开页面时间 onParamsReceive onParamsReceive onParamsReceive
被打开页面获取参数 this.getContext().getRequestParameter(name) this.params this.params.data

2、内嵌页面向父页面返回数据
在内嵌页面中，调用this.owner.send(data)方法，可以向父页面返回数据，此时会触发父页面中对应WindowContainer组件的onReceive事件，我们可以在此事件中获取内嵌页面返回的数据。

3、父页面与内嵌页面间的复杂交互
由于WeX5默认实现是单页应用模式，父页面和子页面只是一个逻辑划分，物理上还是运行在同一个HTML文档中，因此，父页面和内嵌页面间，除了上面所说的数据传递之外，还可以进行复杂的交互（比如相互调用方法等等）：

1)父页面获取内嵌页面的VM实例：调用WindowContainer组件的getInnerModel()方法；
2)内嵌页面获取父页面的VM实例：this.getParentModel()；

发送端代码:

	var url = require.toUrl('./page3.w?p1=p1ValueNew&p2=p2NewValueNew');
		var params = {
			a1: 'a1ValueNew',
			a2: 20,
			data: {
				d1: 'd1ValueNew',
				d2: 'd2ValueNew'
			}
		}
		this.comp('windowContainer1').load(url, params);

接收端代码:

	Model.prototype.modelParamsReceive = function(event){
		var context = this.getContext();
		
		//获取URL中的参数
		var p1 = context.getRequestParameter('p1');
		var p2 = context.getRequestParameter('p2');
		var buf = '来自url的参数: p1=' + p1 + ", p2=' + p2 + '; ';
		
		//获取简单参数
		buf += '简单参数：params.a1=' + event.params.a1 + ', params.a2=' + event.params.a2 + '; ';
		
		//获取复杂参数
		buf += '复杂参数：\n'
		if (event.params.data){
			buf += '    params.data.d1=' + event.params.data.d1 + '; ';
			buf += '    params.data.d2=' + event.params.data.d2 + '; ';
		}
		
		var id = this.getIDByXID("container");
		$('#' + id).text(buf);
	};

	Model.prototype.button1Click = function(event){
		var context = this.getContext();
		
		//获取URL中的参数
		var p1 = context.getRequestParameter('p1');
		var p2 = context.getRequestParameter('p2');
		var buf = '来自url的参数: p1=' + p1 + ", p2=' + p2 + '\n';
		
		//获取简单参数
		buf += '简单参数：params.a1=' + this.params.a1 + ', params.a2=' + this.params.a2 + '\n';
		
		//获取复杂参数
		buf += '复杂参数：\n'
		if (this.params.data){
			buf += '    params.data.d1=' + this.params.data.d1 + '\n';
			buf += '    params.data.d2=' + this.params.data.d2 + '\n';
		}
		alert(buf);
	};