WeX5简介

wex5框架 开源免费  WeX5采用Apache许可证开源模式,商业友好,完全免费。基于WeX5开发出来的应用,每一行代码都在你手里,发布部署无任何限制,完全自由免费。 基于主流技术和标准 WeX5前端采用HTML5 + CSS + JS标准,使用AMD规范的requirejs、bootstrap、jquery等技术;WeX5手机APP基于phonegap(cordova)采用混合应用(hybrid app)开发模式;WeX5支持多种类型的后端,包括Java、PHP和.NET等,同时也支持云API。 前端跨“端” WeX5对跨平台多前端支持极好,一次开发,多平台运行。目前,WeX5支持的前端有: 1、移动APP(苹果APP和安卓APP); 2、微信应用(包括公众号、服务号和企业应用号); 3、PC浏览器; 4、其它轻应用(如百度直达号); 后端跨“端” WeX5坚决走开源和开放的道路,WeX5在支持后端技术和后端部署上,体现出极端彻底的开放性: 1、开放的后端技术支持:WeX5的后端完全开放,可通过http和websocket等协议连接各种后端中间件或云服务(Java、PHP、.NET等); 2、WeX5的部署完全开放自由,无任何限制,可以部署在任何公有云或私有云服务器上。 可视化设计 WeX5的IDE基于eclipse,提供了一个完全可视化、组件化、拖曳式开发环境,完全所见即所得;向导化和模板化等工具,快速生成常见应用场景界面,下图是WeX5可视化设计器图像展示。 丰富的组件体系和向导 WeX5的UI组件体系完全基于HTML5 + CSS + JS,使用requirejs、jquery和bootstrap技术,内置支持大量丰富的UI组件;针对一些常用的场景,WeX5提供了丰富的向导,便于快速构建应用。 1)WeX5丰富的组件体系 2)WeX5丰富的向导 设备访问 WeX5基于phonegap(cordova)采用混合应用(hybrid app)开发模式,可以轻松调用手机设备和硬件能力,如相机、地图、LBS定位、指南针、通话录、文件、语音、电池等等,针对设备的本地能力,WeX5提供了丰富的cordova插件。 扩展能力 WeX5一直坚持开放的态度,在WeX5上,不仅可以使用内置的组件、向导和cordova插件,你也可以根据自己的需要,扩展定义自己的组件、向导和cordova插件;如果你觉得bootstrap样式不是你想要的,你也可以在WeX5上做出一套基于别的样式库(例如Semantic UI)的组件和向导。 全能力调试和智能代码提示 开发手机APP,模拟调试是关键能力,对开发者极端重要,而这也是业务现有hybrid app开发工具的软肋。WeX5对hybrid app开发提供了业务最强大的调试支持: 1、提供全能力、一站集成的模拟调试支持 开发手机APP,日常的高度几乎都是模拟调试,使用频繁程度远超真机调试,WeX5提供全面、完备的模拟调试支持,表现真正完美。 2、WeX5的模拟调试效果和真机运行效果几乎相同 由于WeX5的界面技术基于HTML5 + CSS + JS,并采用高仿真本机设备APP模拟,模拟调试运行效果和真机运行效果几乎完全相同,杜绝模拟运行和真机运行不一致的问题。 3、WeX5开放所有的UI框架和组件源码 开发者能在调试时跟踪进入每个组件的每一行代码,找到和排查到真正的底层原因,系统调试彻底透明、无墨盒、无死角! 4、支持真机调试 提供全真机和快捷真机调试模式,为开发者提供最大方便。 [...]

CSS调试

使用chrome浏览器,不仅可以方便的调试js代码,也可以很方便的调试css。例如,平台自带的“仿淘宝”案例中,调试最底下的按钮的颜色,步骤如下: 第一步:在chrome浏览器中,打开“仿淘宝”功能 在chrome浏览器中url中输入http://localhost:8080/x5/UI2/demo/taobao/index.w; 第二步:在chrome浏览器中,打开“开发者工具”; 在chrome浏览器中,可以通过F12或菜单,打开“开发者工具”。 第三步:在Elements中调试css样式; 1、激活选中元素按钮; 2、选中期望调试的元素,例如“首页”按钮; 3、在Elements->Styles中查看元素的样式定义; 如上图所示,“首页”按钮的color在index.w、comp.min.css的2007行和comp.min.css的1987行都有定义,但index.w的优先级最高,所以它生效。其中index.w中的样式就是index.css中定义的样式,WeX5运行时,将index.css的内容编译到index.w中了。 此时,我们可以直接在Elements->Styles页中直接修改index.w中color的颜色,比如改成blue,这时,浏览器会即时生效(但重新刷新页面后,修改过的内容不起作用)。 通过以上方法,我们可以知道页面中任何元素的样式的定义来自哪里;同时也可以在chrome中直接修改当前样式,看看修改后的运行效果。

模块框架

随着互联网的飞速发展,前端开发越来越复杂,导致开发经常出现两个问题: 恼人的命名冲突 烦琐的文件依赖 针对这两个问题,可以使用js模块化技术来解决。当前主流的js模块化有两大规范CMD(Seajs)和AMD规范(RequireJS)。WeX5采用RequireJS(AMD规范)来实现,关于RequireJS的详细说明参考:http://www.requirejs.org/ 接下来我们介绍在WeX5中,如何使用模块化? 2.3.1  定义模块 在WeX5中,定义模块时需要符合以下规则: 一个文件定义一个模块; 所有模块都定义为匿名模块,按模块路径的方式引用,例如“$UI/system/lib/justep”表示“/UI2/system/lib/justep.js”文件; 在WeX5中,最常用的是一个模块定义一个js类,例如: define(function(require){ var $ = require("jquery"); var justep = require("$UI/system/lib/justep"); var Model = function(){ this.callParent(); }; return Model; }); 如上所示,这个模块定义了一个js类Model。 关于定义模块的详细说明请参考:http://www.requirejs.org/docs/api.html#define 2.3.2  引用模块 [...]

页面优化

1.页面优化基础 页面性能优化包括两个方面:打开页面性能优化和页面操作性能优化,页面性能优化按以下步骤进行: 第一步:定位慢的原因; 无论是打开页面还是执行页面操作,总体可以分成两个阶段:前端运算和后端运算,分析页面性能时,我们需要先定位性能是由于前端运算的问题还是后端的问题,这个可以使用chrome浏览器的网络监控来观察。 例如,以打开“外卖”页面为例,看看前端运算和后端运算时间。 1、打开chrome浏览器,按F12打开“开发者工具”,在“开发者工具”中切换到Network页,关闭浏览器缓存(勾上Disable cache选项),如下图: 2、在chrome浏览器中访问“外卖”页面,通过秒表可以手工记录打开页面的时间,在chrome浏览器的Network页中可以看到“外卖”页面一共有多少个请求,以及每个请求服务端耗时,如下图: 观察网络请求时,可以从以下几方面入手: ● 网络请求的数量是否可以减少? 比如,如果许多小的js或css请求,可以考虑合并js和合并css;如果有非首屏需要的请求,可以延迟这样些请求等等。 ● 所有的网络请求中,是否有特别耗时的请求? 如果有,需要具体分析这个请求的服务端逻辑。 第二步:针对慢的原因确定相应的解决方案。 2.常用优化方法 减少网络请求 1、合并js 对于多个经常一起使用的小js文件,可以考虑将这些小js文件合并成一个js文件,从而减少网络请求,提升运行性能。 合并js文件需要经过以下步骤: 第一步:定义合并配置文件 首先,合并配置文件放在哪?合并配置文件必须在所有被合并文件的父级目录中,只要遵守这条规则即可。用户可以在遵守这条规则的前堤下,根据自己的需求将合并配置文件放到合适的位置。 其次,新建合并配置文件。我们推荐一个合并配置文件只生成一个合并文件;合并生成的文件一般以“.min.js”为扩展名;合并配置文件的名称的命名遵守以下规则: 合并配置文件=“合并生成的文件名”+ “.xml” 例如,假设合并生成的文件名为“hello.min.js”,那么相应的合并配置文件为“hello.min.js.xml”。 最后,定义合并配置文件的内容。例如以下是/UI2/system/common.min.js.xml文件的内容: <root> <config> <depend config="core.min.js.xml">core.min.js</depend> <file>lib/base/viewComponent.js</file> <file>lib/base/modelComponent.js</file> [...]

页面交互

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 [...]

页面模式

页面模式定义 页面模式有两种:多页应用(Multi-page Appliction简称为MPA)与单页应用(Single-page Application简称为SPA)。 多页应用(MPA)是传统的Web应用,每次应用程序需要显示数据或将数据提交给服务器时,浏览器必须离开当前页面,从服务器请求一个新的页面进行加载显示。在多页应用中,浏览器会不停的重新加载页面,浏览器就会一直发出卡卡卡的声音,整个操作也常感知卡卡的。如果使用这样的页面模式,使用者体验比较差,整体流畅度比较低。 单页应用(SPA)是一种特殊的Web应用,它将所有的活动局限于一个Web页面中,一旦页面加载完成后,SPA不会因为用户的操作而进行页面的重新加载或跳转,取而代之的是利用JavaScript动态变换HTML的的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA可以提供较为流畅的用户体验。 页面模式对比 WeX5对页面模式的支持 页面(.w)是WeX5前端基本单元,对于每一个页面(.w),WeX5即可以作为页面片段运行在单页应用的外壳页面里,也可以作为独立的页面加载运行。所以,WeX5即支持多页应用模式的开发,也支持单页应用模式的开发。为了获得更好的运行性能和用户体验,WeX5推荐采用单页应用模式,同时,WeX5对大规模单页应用模式也提供了非常好的支持。 单页应用模式的三大问题 在单页应用模式下,由于运行时只有一个页面,很容易产生以下三大问题: id 冲突、css冲突和js冲突。针对这三大问题,WeX5采用了以下技术来解决: 1、针对id冲突,采用xid技术来解决; 2、针对css冲突,采用css局部化技术来解决; 3、针对js冲突,采用js模块化技术来解决; ● id冲突 首先,我们来看看什么是id? id是HTML元素的唯一标识,id在一个HTML文档中必须是唯一的。 在单页面应用模式中,开发阶段,为了多人协作和代码组织的需要,每个页面片段是独立开发的,但在运行时刻,所有的页面片段都被加载到一个页面中运行,这种情况下,很容易产生id冲突的问题。 如上图所示,由于在page1片段和page2片段中都定义的id=“a”,导致运行时,在一个HTML文档中有两个HTML元素的id属性为“a”,产生了id冲突。 针对单页应用模式的id冲突,WeX5使用xid技术来解决(即上述方案三)。那我们来看看,什么是xid? xid是WeX5页面(.w)中界面元素的唯一标识,替代传统HTML中的id; xid在一个页面片段(.w)中必须唯一。 WeX5页面在浏览器运行时,每加载一个页面片段时,会针对每个界面元素的xid属性,生成一个HTML文档唯一的id,生成规则是: xid + “页面实例标识” = id。 其中,“页面实例标识”是页面片段加载后的唯一标识,它是一个guid,具体唯一性(即使同一个页面片段被加载两次,这两次生成的“页面实例标识”也是不一样的),因此,在整个HTML文档中,id不会产生冲突。 为了开发方便,WeX5针对xid提供了以下js api: 1、根据xid获取id:this.getIDByXID(xid); [...]

grid中显示attachmentImage上传的图片

通过这个示例我们实现通过attachmentImage上传的图片在grid表格中显示,分成两个步骤: 1.引入DocUtils: DocUtils = require('$UI/system/components/justep/docCommon/docUtil'); 2.通过grid的cellRender方法来显示图片 例: Model.prototype.imageGridCellRender = function(event){ if(event.colName == "image"){ if (event.colVal != null && event.colVal != "" && event.colVal != "[]") { //解析数据库中存储的json数据 var imageJson = eval("(" + event.colVal + [...]

grid中显示blobImage上传的图片

通过本案例,我们实现blobImage上传的图片在grid表格中的显示。 grid的cellRender方法渲染单元格显示图片,例: Model.prototype.personGridCellRender = function(event){ if(event.colName == "sPhoto"){ var url = biz.Request.setBizParams(require.toUrl("$UI/system/components/justep/blob/server/download.j") + "?process=/demo/components/process/org/orgProcess" //流程名称 + "&activity=mainActivity" //环节名称 + "&action=blobDownloadAction" //调用的Action + "&blobDataModel=/system/data" //数据模块目录 + "&blobConcept=SA_OPPerson" //概念名 + "&blobRelation=sPhoto" //关系名 + "&blobConceptValue=" + event.rowID [...]

日期时间的赋值及计算

1.日期时间的转换及赋值 1.1.date类型转换为字符串 justep.Date.toString(new Date(), justep.Date.STANDART_FORMAT_SHOT) 4种时间格式常量: justep.Date.DEFAULT_FORMAT 时间格式常量 = "yyyy/MM/dd hh:mm:ss" justep.Date.DEFAULT_FORMAT_SHOT 时间格式常量 = "yyyy/MM/dd" justep.Date.STANDART_FORMAT 时间格式常量 = "yyyy-MM-ddThh:mm:ss.000Z" justep.Date.STANDART_FORMAT_SHOT 时间格式常量 = "yyyy-MM-dd" 自定义时间格式: justep.Date.toString(new Date(),'yyyy-MM-dd hh:mm:ss') 1.2.字符串转换为date类型 [...]

做一个简单的门户(shellImpl)

wex5是跨端移动开放框架,它与传统的前端页面开发最大的差异在于,采用了单页模式,实现了资源的不重复加载,那么如何做一个简单的门户页呢? 1.UI部分如图所示: 页面主要由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" [...]