jquery.messager 1.在UI2/portal/pc/main/main.js页面上引入jquery-messager插件 例： require("$UI/system/lib/jquery/jquery.messager"); 附件：jquery.messager插件下载 此位置仅为示范，实际情况依据自己所放插件位置 2.弹出对话框 在UI2/portal/pc/main/main.w页面的modelLoad事件中，放入如下代码： //提示栏大小设置 $.messager.lays(500, 300); //提示栏出现动画 $.messager.anim('show', 1000); //提示栏内容与关闭时间设置 $.messager.show(0,'一个Jquery Messager消息弹出插件！'); 示例图：  

使用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中直接修改当前样式，看看修改后的运行效果。

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

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