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、支持真机调试 提供全真机和快捷真机调试模式，为开发者提供最大方便。 [...]

使用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)； [...]

通过这个示例我们实现通过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 + [...]

通过本案例，我们实现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类型 [...]

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