wex5是跨端移动开放框架,它与传统的前端页面开发最大的差异在于,采用了单页模式,实现了资源的不重复加载,那么如何做一个简单的门户页呢?

1.UI部分如图所示:

shouye3

页面主要由contents以及其中一个content构成,content中放windowContainer组件,并在src属性中直接写入主页地址,这样有助于优化主页的打开速度。

2.创建shellImpl实例

index.w作为门户页面,负责创建shellImpl实例,配置所有的子页面,其他的功能页面都运行在门户页面中。

var ShellImpl = require('$UI/system/lib/portal/shellImpl');
	
	var Model = function(){
		this.callParent();
		
		var shellImpl = new ShellImpl(this, {
			"contentsXid" : "pages",
			"pageMappings" : {
				"main" : {
					url : require.toUrl('./main.w')
				},
				"productRecomment" : {
					url : require.toUrl('./productRecomment.w')
				},
				"introduce" : {
					url : require.toUrl('./introduce.w')
				},
				"contactUS" : {
					url : require.toUrl('./contactUS.w')
				}
			}
		})
	};
	
	Model.prototype.modelLoad = function(event) {
		justep.Shell.showPage("main");
	};

1.引入shellImpl:require(‘$UI/system/lib/portal/shellImpl’)
2.创建shellImpl实例。其中contentsXid与.w页面的contents的xid对应,pageMappings中配置所有的子页面。
3.在modelload方法中,首先用justep.Shell.showPage(“main”)打开主页面

3.子页面的打开与关闭

打开:justep.Shell.showPage(“main”);
关闭:this.close();
返回上一页:justep.Shell.closePage();

同时,平台也提供了相应的新建页面向导。如下:

首先,右键新建W页面,选择移动标准下的首页
shouye
点击下一步后,会有几种不同模式的门户选择,包括包含左侧边栏的,包含主页的,不包含左侧边栏和主页的等。其中,当选择了不生成主页时,我们需要在输入框中输入自己的主页地址。例如:$UI/system/templates/normal/homePage1/template/main.w

shouye2
最后,点击完成生成页面
附件下载:门户demo示例