WeX5的UI部分和传统Web页面开发的差异
联系客服
发布时间 : 星期三 文章WeX5的UI部分和传统Web页面开发的差异更新完毕开始阅读2bb1e0354a35eefdc8d376eeaeaad1f346931121
WeX5是跨端移动开发框架，BeX5是基于WeX5的企业快速开发平台，它们都采用前后端分离的开发模式，和Web传统的前端页面开发（例如extjs）比较类似，和jsp存在差异。WeX5、BeX5和Web传统的前端页面开发最大的差异在于，WeX5、BeX5采用了单页模式，实现资源不重复加载：
? ? ?
由于采用单页模式，X5引入了RequireJS，实现资源异步按需加载，且只加载一次 作为快速开发工具，X5提供了可视化界面设计器
作为快速开发工具，对界面常用功能进行封装，实现界面全面组件化
这样的UI开发与传统UI开发有哪些不同呢？下面就从页面部分、页面中的数据、js部分、发布等几个方面具体说明。
?
1、页面部分
o 1.1、页面加载事件 o 1.2、页面关闭事件 o 1.3、获取url的参数 o 1.4、引用js o 1.5、引用css o 1.6、使用xid而非id
o 1.7、获取到input输入框的输入内容 o 1.8、页面跳转
o 1.9、图片路径 o 1.10、信息提示 o 1.11、上传文件 o 1.12、详细页面的制作 o 1.13、界面控制 o 1.14、路由 o 1.15、背景图片 o 1.16、事件 o 1.17、调用action
o 1.18、在前端获得session的值 o 1.19、在前端访问全局变量
? ?
?
2、页面中的数据 3、js部分
o 3.1、全局变量
o 3.2、自定义js方法 o 3.3、自定义公共js文件 o 3.4、获取element o 3.5、获取jQuery对象 o 3.6、创建节点，删除节点 o 3.7、增加事件，删除事件 4、发布
www.wex5.com
o 4.1、设置首页标题 o 4.2、更换图标
o 4.3、部署到Web应用服务器
1、页面部分 1.1、页面加载事件
? ?
传统——window.onload事件 X5——model组件的onload事件
1.2、页面关闭事件
? ?
传统——window.onunload事件 X5——model组件的onunload事件
1.3、获取url的参数
? ? ?
传统JS——只有一种参数，就是url中?后面的参数，从location.href中截取 JSP——使用<% String 参数值 = request.getParameter(“参数名”);%>获取 X5—— 有三种参数，url中可以显示出来的有两种参数，一种是?后面的参数，另一种是#!后面的JSON格式的参数，还有一种是url中不显示的复杂参数。前两种显示在url上，为了实现页面分享，后一种实现传递复杂参数。
?后面的参数——使用 this.getContext().getRequestParameter(“参数名”);方法获取#!后面的JSON格式的参数——使用this.params.参数名 的方式获取url中不显示的——使用this.params.data.参数名 的方式获取
1.4、引用js
? ?
传统——在html中加入 X5——使用RequireJS，实现异步按需加载
1 //按需加载，没有加载过，则加载，否则不加载 2 varjustep = require(\3 //异步加载（加中括号），执行到这句代码时才加载 参考4 /UI2/portal/sample/appVersionChecker.js 5 require(['./appVersion_in_server'],function(version_info){ 6 //成功回调 7 },function(){ 8 //失败回调
www.wex5.com
});
在w文件中，在