首页 > 代码库 > WeX5学习笔记
WeX5学习笔记
目录
WeX5学习笔记... 1
1.轻松看透WeX5产品能力和技术... 1
2.WeX5可以怎么玩？... 3
一、纯本地App. 3
二、关联一个网站，希望默认就打开某页... 4
三、UI设计器... 4
四、打包神器... 4
五、标准玩法... 4
3.WeX5 App与服务端交互原理... 4
4.Account示例程序... 5
5.Takeout示例程序... 7
5.1Index.w.. 7
5.2mapActivity.w.. 13
问题... 13
6.页面间交互视频... 15
6.1 页面打开和传参概述... 15
6.2 Shell打开页面... 18
6.3 对话框与数据传递... 19
6.4 内嵌页面与参数传递... 21
7.页面结构及生命周期视频... 23
课程记录... 24
1.最简单的应用... 24
2.firstSPA.. 24
3.todoMVC.. 24
4.通过list显示服务端json文件中的数据... 24
表单与data组件的绑定... 25
5.实现单表的CRUD.. 25
6.自己框架实现后台服务... 25
7. 自己框架集成BaaS代码... 26
8. WebSocket通信应用... 26
9.播放音频视频... 26
10.调试... 26
WeX5学习笔记
1.轻松看透WeX5产品能力和技术
首先，必须理解一件事：移动和云时代的企业应用技术，说白了，也就三块：前端UI、后端服务、前端设备api。这后面，是一个事实和趋势：就是前后端已经分化，并各自独立发展：
1．前端UI
互联网和浏览器已经普及和扎根，企业应用的前端UI和样式组件，都会沿着w3c的html+css+js路线发展，资源也越来越多，比如bootstrap等。已经没有任何企业，能离开w3c的html+css+js标准，另起炉灶搞自己的了。微软试了不行，adobe试了不行，没人能行。
2 后服务端
后端和前端正好相反，技术正走向多元化。node，Python，java并存，以及PAAS、BAAS(后端即服务:Backendas a Service 公司为移动应用开发者提供整合云后端的边界服务)云服务的成熟，数据绑定也要支持多种技术和方向。
3 前端设备api
移动和设备在急剧发展，各种硬件能力会更多的加入，想想可穿戴设备吧，想想智能客厅吧，想想未来的手机吧。。。
总结起来，就是一条原则：“让UI界面归UI界面，让设备api归设备api，让后端服务归后端服务”。仅此而已！
这个原则，正是WeX5技术设计坚定遵循的原则。正是对这一原则的坚决遵循，才使得WeX5的技术如此开放强大。
而WeX5另一个强大的原因，是源于开源的力量。免费诚可贵，自由价更高。开源给你的，就是自由。开源是王道啊。
下面逐条说说WeX5强大之处，以及原因：
1．开源模式
WeX5采用的是Apache许可证开源模式，商业友好，完全免费。开发出来的应用，每一行代码都在你手里，发布部署无任何限制，自由，免费。
2．跨平台多前端应用开发，支持app、web和微信应用快速开发
WeX5对跨平台多前端应用开发的支持极好，一次开发，多平台运行。
目前，WeX5能开发的跨平台多前端应用有：
移动app（苹果ios app、安卓Androidapp）
微信应用（包括公众号、服务号和企业号应用）
企业web app（PC、平板和手机）
其他轻应用（百度直达号等）
（在企业应用市场，多平台、跨前端已成必须，而非可选！微信应用，已经势不可挡，必将颠覆移动应用的版图。在微信应用和百度直达号等轻应用的推动下，在企业移动应用领域，hybrid app也将固化其主流地位，毫无悬念）
3．高效精致的UI组件体系，完全基于主流标准和技术
WeX5的UI组件体系是完全基于html5+css3+js，非常干净标准。
WeX5的UI组件技术完全是开放主流，基于jquery和bootstrap（Bootstrap是Twitter推出的一个用于前端开发的开源工具包）技术，经WeX5高度优化，在移动上的表现很好，接近原生，真的很赞。
WeX5 的UI基于模块化开发，采用增强的RequireJS模块化技术
可视化拖拽设计的组件技术，WeX5已经提供了大量丰富的UI组件，并且支持引入和扩展第三方组件，大大提升了界面开发的效率和降低了难度
风格样式库基于bootstrap技术，在bootstrap基础上大大增强了适合移动的样式和组件，可轻松引入bootstrap大量丰富的样式资源并随意换肤
高效灵活的双向数据绑定技术和数据组件，使用简单能力强大
高度优化，性能接近原生。操作爽滑，拖拽、转场及动画效果很好
（我个人很认同WeX5的做法，第一，凡是业界主流的好轮子，比如jquery和bootstrap，就应该直接用，而且，WeX5做了深度优化，使app运行效果媲美原生。第二，我有技术洁癖，UI组件库，必须基于html5+css3+js这样的标准，这也是w3c统治互联网的三大基石，没的其它选择啊）
4． 本机API框架（Native APIFramework）
WeX5采用混合应用（hybrid app）开发模式。能轻松调用手机设备的系统和硬件能力，如相机、地图、LBS定位、指南针、通讯录、文件、语音、电池。。。等。
这方面，phonegap/cordova几乎是事实的标准了，很多大公司都采用。在本机框架上，WeX5有：
基于phonegap(cordova)框架
默认内嵌高性能浏览器，大大提升性能，特别是android低端机
提供微信等轻应用框架
提供了丰富的原生插件
支持引入和扩展第三方插件，任何原生app能实现的能力都可通过扩展插件实现
5． 可视化拖拽式集成开发环境IDE
WeX5的IDE基于eclipse，WeX5的主要工作是强化了可视化快速开发。提供了一个完全可视化、组件化、拖拽式开发环境。
基于eclipse开源IDE
可视化、组件化拖拽设计，完全所见即所得
向导化、模版化等工具，快速生成常见应用场景界面
全方位代码智能提示，这方面WeX5做了很多功夫，WeX5所有的UI组件，乃至手机本机插件API，在WeX5的IDE里，都能实现代码智能提示，给开发者提供极大方便
6． 全能力的调试支持和智能代码提示
开发手机app，模拟调试是关键能力，对开发者极端重要，而这也是业界现有hybrid app开发工具的软肋。WeX5对hybrid app开发提供了业界最强大的调试支持，表现真正完美。
提供全能力、一站集成的模拟调试支持。开发手机app，日常的调试几乎都是模拟调试，使用频繁度远超真机调试，WeX5提供全面、完备的模拟调试支持，表现真正完美
WeX5的模拟调试效果和真机运行效果几乎完全相同。由于WeX5的UI组件体系彻底基于html+css+js，并采用高仿真本机设备app模拟，模拟调试运行效果和真机运行效果几乎完全相同，杜绝模拟运行和真机运行不一致的问题
WeX5开放了所有的UI框架和组件源码，使得开发者能在浏览器里跟踪进入每一个组件的每一行代码，找到和排查到真正的底层原因，系统调试彻底透明，无黑盒，无死角！
支持真机调试，提供全真机和快捷真机调试模式，为开发者提供最大方便。
WeX5开放了全部原生app框架源码和本机api插件源码，开发者可以在原生开发环境(Android ADT和XCode)内，跟踪调试进入app的每一行代码里
7． 无限制、多方式、可加密的App应用打包发布
WeX5采用Apache 许可证开源协议，商业友好。而且，在开放性上，也走的极端彻底，这一点在app应用打包上得到充分体现：
打包发布无任何限制，无需任何费用。WeX5彻底开源，应用的每一行代码都在你手里，自由打包，无拘无束！
轻松打包发布成高性能的原生app，包括安卓Android的apk，苹果ios的ipa
一键发布微信应用（微信公众号、服务号、企业号均可）
一键发布成百度轻应用、web应用等
WeX5打包发布的app和应用，支持全部web资源（html+css+js）的加密，WeX5采用高强度动态密钥，每个app每次编译都会采用不同的动态密钥，真正做到一包一秘！
支持本地快捷打包、远程服务打包、原生环境编译打包等模式，给你所有想要的打包方式和方便性
彻底开源，支持原生代码调整、插件自定义和插件选择打包，真正自由
8．彻底开放的App应用后端技术和部署方式
WeX5坚决走开源、开放的道路，WeX5在支持后端技术、后端部署上，体现出极端彻底的开放性。
开放的后端技术支持，WeX5的后端完全开放，可通过http、Websocket等协议连接各种后端中间件或云服务（java、node、php、.net等）
无限制的后端部署，可以部署在任何自己选择的公有云、私有云服务器上，WeX5的部署完全开放自由，无任何限制
总而言之，WeX5是多平台、跨前端应用开发的优秀工具，业界收费的同类工具，和WeX5相比，技术要落后和老化不少。最难得的是：WeX5采用商业友好的Apache许可证开源模式，用的放心啊。
企业移动应用大潮滚滚，微信应用扑面而来，祝各位朋友用好开源的WeX5，多多发财！
2.WeX5可以怎么玩？
一、纯本地App
没任何服务请求，已经有开发好的一堆html+js，希望本地App中可以方便的使用，那可以参考默认的Native/X5工程，把自己开发好的资源放到www目录下就可以，注意工程的几个重要选项：
服务地址：http://localhost
首页: 假设你www中有一个入口的index.html，那写 /index.html
生成App包的向导中，“重新编译使用到的UI资源”一定不要选
二、关联一个网站，希望默认就打开某页
例如想把本论坛做成一个app，那可以新建一个本地App，把
服务地址：http://bbs.justep.com
首页: /forum.php
这样生成的app，一启动就打开论坛的首页
三、UI设计器
UI2下建自己应用（例如demo），形成自己的一组页面，然后Native新建一个本地App，选择新建的资源demo，点右键“编译使用到的UI资源”，则在ww下生成标准的html+js，该资源可以放到标准 web 服务器（apache, iis, tomcat等）直接进行网络访问
四、打包神器
什么UI2，什么X5不要，我就只要一个可以生成App的环境，点这里下载
xcode，adt, 哈哈，都有
五、标准玩法
外卖为例，“WeX5 App与服务端交互原理” 有交互原理介绍。
资源打进app，bass 部署到tomcat上作为服务， 这个是推荐用法。
什么，资源咋升级？没问题，按“App资源和版本更新”将最新的资源按更新到服务器即可。
刚下载的一个WeX5，解压后运行目录的“启动WeX5开发工具.bat”和“启动WeX5运行平台.bat”，这样就可以用浏览器连接和访问，如果App不选择打包资源，那修改的资源，App 也会自动更新。
3.WeX5 App与服务端交互原理
拿WeX5自带的外卖来说举例，它由三部分组成
1. UI2/takeout 这个是页面，由页面文件.w和js以及css等构成，js中有$.ajax的请求
2. Native/外卖这个是本地app的工程，用来打包app
3. tomcat的webapps/baas 这个是服务端，提供步骤1中的$.ajax访问
启动服务
开发工具Studio中启动Tomat，这个将启动两个服务，一个是tomcat的webapps下的baas服务，另外一个是用于解析运行UI2资源的UIServer（在runtime\UIServer）。为描述方便，这里假设本机ip地址是192.168.1.1, tomcat的端口是8080
浏览器访问
浏览器输入
1
http://192.168.1.1:8080/x5/UI2/takeout/index.w
这样就可以访问外卖功能，这个在电脑浏览器或者手机浏览器都可以（电脑推荐使用chrome浏览器）。
解释一下这个URL：8080后面的x5是UIServer的名字，在tomcat的server.xml中定义，具体请参考tomat的相关说明，表示访问UIServer，UI2/takeout/index.w 这个会请求到UIServer后，由UIServer做编译，生成html和js供前端使用。
本地App
首先要生成App，先看看默认的App定义，在 Native/外卖 上点右键选择“编辑本地App”，向导中有三个重要的参数：
1. 服务地址：这里应该写 http://192.168.1.1:8080, 因为baas在这个服务上
2. 首页： 就是默认打开的页面写 /x5/UI2/takeout/index.w，这里 x5那个可以写成任意的，和前面介绍的UIServer的那个x5名字没任何关系
3. 需要打包的资源：默认选择了takeout，这里如果选择了，那UI2/takeout下的资源会被打包到App里面，也就是说tomat中没有UISever那个服务运行也是正常的，如果不选择，则首页那个就必须写成/x5/UI2/takeout/index.w，因为默认的UIServer的名字叫x5，App启动时是通过UIServer来获取页面，和浏览器访问完全相同
补脑
如果takeout资源打包了，服务地址写 http://localhost 可否？
还真不行，因为资源中有$.ajax的请求会发到 192.168.1.1:8080/baas 上，如果写localhost，那页面打开没问题，但ajax请求会遇到传说中的跨域问题，导致失败，所以这里服务地址要写baas服务的地址。换句话说，对于资源打到App的情况，服务地址更多是告诉ajax请求当前域是谁，从而避免跨域问题(所有请求都是http://192.168.1.1:8080/xxx，但app内部做了处理，会优先找打入app的资源，没有找到的资源在去请求服务端，对于app来说，是读取本地资源还是服务端请求没任何区别，从而解决跨域问题)。当然，如果没有任何ajax请求或者用插件方式发http来访问，实际上可以写 http://localhost。而如果要访问多个地址，那就只能写成 http://localhost，在配合http的插件发请求（自带的plugin.http.request插件），就不能使用jquery的了（其实纯html可以用jsonp方案，不过比较麻烦，具体baidu，推荐插件方案）。
4.Account示例程序
UI2/demo/account
记账本演示程序。
演示了 list 、windowReceiver， windowDialog等的用法。
在主页面中，windowDialog通过src属性指定页面w文件，将窗口指定为对话框。这样可打开对话框，并传递数据到对话框中。在对话框页面中，通过windowReceiver接收主页传递的数据、关闭对话框，并传递返回数据到主页。
另外，data.save()方法，触发 data 组件的 onCustomSave 事件，事件处理函数完成具体保存操作。这里实际上通过事件触发和处理机制，实现了save保存操作的重写。允许程序员实现自定义操作。
justep.Shell.showLeft();实现侧边栏切换显示状态。
Swing组件，实现左右侧边栏。
contents组件：在.w文件中使用contents组件可以实现不同页面的展现，特别是可以通过手势滑动来切换页面。contents组件使用content来展现页面，contents组件中可以包括多个content，content可以动态生成，删除，增强了页面显示的灵活性，contents组件和buttonGroup组件配合使用，使用button组件的target属性关联content，可以实现按钮和页面的绑定
组件路径：/UI2/system/components/justep/contents
组件标识：$UI/system/components/justep/contents/contents
配合其它组件使用，可实现以下功能：
滑动切换页面
实现图片轮换效果
模拟门户打开w页面
新增空白content，并动态创建组件
contents嵌套contents，分类切换页面
通过ShellImpl的contentsXid属性指定。 可在多个页面中实现切换显示。
this.shellImpl = new ShellImpl(this, {
contentsXid : "pages",
wingXid : "wing",
pageMappings : {
"list" : {
url :"$UI/demo/account/list.w"
},
"detail" :{
url :"$UI/demo/account/detail.w"
},
"classSetting": {
url :"$UI/demo/account/classSetting.w"
}
}
});
代码触发事件，通过事件传递数据，触发操作：
Model.prototype.classDataAfterSave =function(event) {
// 通过Shell发出一个消息，通知其他页面分类数据已改变，并且在消息中携带了改变后的分类数据
var classData =http://www.mamicode.com/this.comp("classData");
justep.Shell.fireEvent("onClassChanged", {
"classData" :classData.toJson()
});
};
Detail.w对应的脚本detail.js中：
Model.prototype.onClassChanged = function(event) {
this.comp("classData").clear();
this.comp("classData").loadData(event.classData, true, null, null, true);
};
5.Takeout示例程序
5.1Index.w
5.1.1模型
Data和baasData的图标不同，baasData的图标 ，data的图标 。
foodData（baasData）
计算规则：
CalcPriceText: js:‘￥ ‘ + val(‘fPrice‘) + ‘元‘
calcImageURL: js:$model.transURL(‘./img/‘+val(‘fImage‘))
userData（baasData）
过滤条件userFilter：
fID = :user
orderData（baasData）
过滤条件userFilter：
fID = :user
cartData（data）
计算规则： calcMoney ---- js:val(‘fPrice‘) *val(‘fCount‘)
statusData（data）
计算规则：
calcCartSumMoneyText ---- js:‘￥ ‘ +$model.comp(‘cartData‘).sum(‘calcMoney‘) + ‘元‘
calcCartCountText----js:($model.comp(‘cartData‘).count()> 0) ? ‘购物车(‘ + $model.comp(‘cartData‘).count() +‘)‘ : ‘购物车‘
calcCanSaveOrder ----js:$model.comp(‘cartData‘).sum("calcMoney") > 0
calcCanClearCart ----js:$model.comp(‘cartData‘).count() > 0
payData（data）
5.1.2 UI界面
1.对话框
Src: $UI/takeout/mapActivity.w
2.主要内容
四个content显示食品、购物车、订单和我的四个页面。
四个按钮实现页面切换：foodBtn、cartBtn、orderBtn、ownBtn
切换实现：按钮的target属性设置。
布局组件contents上可通过右键菜单添加多个content：
这样做估计有一个好处，那就是主要内容都在一个.w文件里，可以共用模型的定义。
1）foodContent
使用list组件显示食品列表foodList，在list模板中使用了 media(bootstrap) 组件。media-left中显示食品图片，类型image(html)，通过bind-attr-src 将image组件的src属性和foodData的列calcImageURL绑定， val(‘calcImageURL‘)。
media-body 中显示 “来一份”按钮 addCartBtn，三个output输出食品名称、描述和计算价格文本。
“来一份”按钮处理代码中，下面代码
if(cartData.find([ ‘fFoodID‘ ], [ row.val(‘fID‘) ]).length === 0) {
的作用是使同一食品在购物车中不能重复添加，具体份数可在购物车页面修改。也就是一种食品在购物车中只能作为一条记录出现。
按钮的span使用bind-text属性 statusData.ref(‘calcCartCountText‘)显示购物车中的食品数量。
2）cartContent
两个panel，一个用于显示购物车内容；一个用于显示联系人信息。
显示购物车内容用list组件；
显示联系人信息用了form(html)，css类是 form-horizontal。formGroup（bootstrap）
付款类型用了radioGroup，单选按钮组。单选按钮组通过itemset属性和payData模型数据关联在一起。
两个按钮：清空购物车，调用cartData.clear()方法。
下单
3）orderContent
List组件显示订单内容：
4）ownContent
显示用户姓名、电话、地址。
保存用户信息。
通过定位功能获取用户位置，作为地址。
5.2mapActivity.w
通过 iframe 引入map.html
在 map.html 中，通过js调用了百度地图。
问题
transURL
calcImageURL: js:$model.transURL(‘./img/‘+val(‘fImage‘))中 transURL的用法？
//转换动态图片URL
Model.prototype.transURL= function(url) {
returnrequire.toUrl(url);
};
过滤条件 过滤条件userFilter中 fID= :user，:user的用法？
:user用法估计类似于SQL语句中的绑定变量。占个位置，便于外部传入数据。
Model.prototype.modelLoad 函数中，直接设置:
this.comp(‘userData‘).filters.setVar("user",this._userID);
this.comp(‘orderData‘).filters.setVar("user",this._userID);
media(bootstrap) 组件
http://www.uedsc.com/bootstrap-media-object.html
Bootstrap 中的多媒体对象（MediaObject）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：
.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
formGroup（bootstrap）
课程中提到的form-group样式和form-control有什么实质的区别呢？form-group一般用于div,form-control一般用于置于div中的标签元素。
justep.Util.hint
显示提示信息框：
justep.Util.hint("请填写完整的用户信息", {
"type": "danger"
});
当前日期格式化
justep.Date.toString(new Date(),justep.Date.STANDART_FORMAT)
jQuery的deferred对象
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。
通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。它的主要功能，可以归结为四点。下面我们通过示例代码，一步步来学习。
deferred对象有三种执行状态----未完成，已完成和已失败。如果执行状态是"已完成"（resolved）,deferred对象立刻调用done()方法指定的回调函数；如果执行状态是"已失败"，调用fail()方法指定的回调函数；如果执行状态是"未完成"，则继续等待，或者调用progress()方法指定的回调函数（jQuery1.7版本添加）。前面部分的ajax操作时，deferred对象会根据返回结果，自动改变自身的执行状态；但是，在wait()函数中，这个执行状态必须由程序员手动指定。dtd.resolve()的意思是，将dtd对象的执行状态从"未完成"改为"已完成"，从而触发done()方法。类似的，还存在一个deferred.reject()方法，作用是将dtd对象的执行状态从"未完成"改为"已失败"，从而触发fail()方法。
jQuery提供了deferred.promise()方法。它的作用是，在原来的deferred对象上返回另一个deferred对象，后者只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve()方法和reject()方法），从而使得执行状态不能被改变。
6.页面间交互视频
6.1 页面打开和传参概述
打开页面的三种方式：
使用Shell，例如 UI2/portal/sample/index.w，这种方式不返回参数；
打开对话框；
使用内嵌页面（WindowContainer）；
传参数的三种方式：
？参数，进入URL，
Params，#！参数，通过序列化也能进入URL；
Params.data，不支持序列化，不进入URL，所以不能随链接一起分享。
传参数的例子：
UI2/demo/page/index.w ，这个首页中，
点击按钮
打开页面
演示打开页面的方式和打开页面传参数。
上面页面文件是 interactive/page.w
6.2 Shell打开页面
第一种代码：
//"p2"是index.w中 pageMappings定义的页面标识
justep.Shell.showPage("p2");
第二种代码：
var url = require.toUrl("./page2.w");
justep.Shell.showPage(url);
三种参数传递：
var url = require.toUrl("./page2.w?p1=p1Value&p2=p2Value");
var params = {
a1: "a1Value",
a2: 2,
data: {
d1: "d1Value",
d2: "d2Value"
}
}
justep.Shell.showPage(url,params)
require.toUrl 相对路径转换为绝对路径。
参数接收，都在model组件的onParamsReceive事件中。此处是在page2.w中。可在该事件处理中通过event.params访问后两种参数，也可通过this.params随时访问后两种参数。
6.3 对话框与数据传递
打开对话框并传递参数到对话框:有两种方法。不传参数可以使用按钮关联open操作。传参数可以向下面一样写代码。通过写代码可实现每次打开不同的页面。
Model.prototype.button1Click = function(event){
var dialog = this.comp("dialog");
var url = require.toUrl("./dialog.w?p1=参数1&p2=参数2");
dialog.open({
src: url,
params: {
a1: "简单数据a1",
a2: 2,
//data是特殊的参数, 这部分内容不能被分享
data: {
//将一个函数传递给对话框
fn: function(){
alert("将一个函数传到对话框中");
},
//将data中的一行数据传给对话框
data1: this.comp("data1").getCurrentRow().toJson()
}
}
})
};
对话框dialog.w中接收参数：
Model.prototype.modelParamsReceive= function(event){
var context = this.getContext();
//获取URL中的参数
var p1 = context.getRequestParameter("p1");
var p2 = context.getRequestParameter("p2");
var buf = "来自url的参数: p1=" + p1 + ", p2=" + p2 + "\n";
//获取简单参数
buf += "简单参数：params.a1=" + event.params.a1 + ",params.a2=" + event.params.a2 + "\n";
//获取复杂参数
buf += "复杂参数：\n"
if (event.params.data){
buf += " params.data.fn=" + event.params.data.fn + "\n";
this.comp("dlgData").loadData([event.params.data.data1]);
this.comp("dlgData").first();
}
alert(buf);
};
对话框关闭并返回参数给主窗口 page.w
Model.prototype.button3Click = function(event){
this.owner.send(this.comp("dlgData").getCurrentRow());
this.close();
};
this.owner是谁？是page.w中的dialog组件。
主窗口page.w接收对话框dialog.w返回的数据：
Model.prototype.dialogReceive = function(event){
alert("页面接收对话框架返回的数据：" +JSON.stringify(event.data.toJson()));
};
对话框的属性
onClose指向 dialogClose函数。
onReceive指向dialogReceive函数。
src指向./dialog.w。
什么时候将返回数据写入主页的data1组件的呢？用的是对话框的mapping机制。对话框mapping属性点击打开对话框
注意对话框事件onReceive和onReceived的区别。
onReceive在mapping之前进行，onReceived在mapping之后进行。
6.4 内嵌页面与参数传递
page.w页面的containerContent中有两个windowContainer组件，windowContainer1指向./page3.w，windowContainer2指向./page4.w。这样就把page3和page4作为内嵌页面放到了page中。
windowContainer1
src属性./page3.w?p1=p1&p2=p2同时指定了url参数。
Params指定{a1: "a1", a2: "a2"}了第二种参数。
Page3.js中接收了参数：
Model.prototype.modelParamsReceive= function(event){
var context = this.getContext();
//获取URL中的参数
var p1 = context.getRequestParameter("p1");
var p2 = context.getRequestParameter("p2");
var buf = "来自url的参数: p1=" + p1 + ", p2=" + p2 + "; ";
//获取简单参数
buf += "简单参数：params.a1=" + event.params.a1 + ",params.a2=" + event.params.a2 + "; ";
//获取复杂参数
buf += "复杂参数：\n"
if (event.params.data){
buf += " params.data.d1=" + event.params.data.d1 + "; ";
buf += " params.data.d2=" + event.params.data.d2 + "; ";
}
var id = this.getIDByXID("container");
$("#" + id).text(buf);
};
显示所有参数按钮演示了如何在页面中获取使用参数：
Model.prototype.button1Click = function(event){
var context = this.getContext();
//获取URL中的参数
var p1 = context.getRequestParameter("p1");
var p2 = context.getRequestParameter("p2");
var buf = "来自url的参数: p1=" + p1 + ", p2=" + p2 + "\n";
//获取简单参数
buf += "简单参数：params.a1=" + this.params.a1 + ", params.a2=" + this.params.a2 + "\n";
//获取复杂参数
buf += "复杂参数：\n"
if (this.params.data){
buf += " params.data.d1=" + this.params.data.d1 + "\n";
buf += " params.data.d2=" + this.params.data.d2 + "\n";
}
alert(buf);
};
返回参数按钮代码：
Model.prototype.button2Click = function(event){
this.owner.send({r1: "r1Value"});
};
向主页page.w发送了名为r1的参数，值为r1Value。
主页page.w中下面代码接收并显示了参数r1的值。
Model.prototype.windowContainer1Receive = function(event){
alert("接收到内嵌页面的返回数据：r1=" + event.data.r1);
};
主页page.w中“刷新内嵌页面”按钮执行代码：
Model.prototype.button8Click = function(event){
var url = require.toUrl("./page3.w?p1=p1ValueNew&p2=p2NewValueNew");
var params = {
a1: "a1ValueNew",
a2: 20,
data: {
d1: "d1ValueNew",
d2: "d2ValueNew"
}
}
this.comp("windowContainer1").load(url, params);
};
代码重新装入内嵌页面page3，并传递了新的参数。
Load方法智能判断，src没变只传参数；src变了刷新页面。Refresh页面会强制刷新页面。
windowContainer2
src属性./page4.w指定了内嵌页面。
Params属性{data: $model.data1}将主页模型中数据组件data1的值传递给内嵌页面。
页面./page4.w中分别使用input和list显示了参数数据：$model.params.data。
让人比较意外的是，这种数据关联居然是双向的：即主页数据改变可实时传递到内嵌页面，内嵌页面数据改变也可实时传递到主页。原因是主页和内嵌页面UI绑定的是同一个对象，就是data1。
主页和内嵌页面可互相访问对方的model组件
7.页面结构及生命周期视频
课程记录
1.最简单的应用
Hello
介绍应用创建，app打包
2.firstSPA
自己利用页面向导创建程序。不用WeX5网站提供的视频中的方法。
3.todoMVC
介绍模型、窗口组件、事件、js代码等
4.通过list显示服务端json文件中的数据
练习list组件和data组件的用法
goosData.json
参考 demo/taobao /list.w
1） 新建listJsonData应用
2） 复制demo/taobao/cart文件夹。里面有图片和json格式的数据文件。
3） 创建标准页面 index.w
4） 页面model中添加data组件goodsData，根据json数据文件格式，建立数据模型列定义
Index.js 中添加代码 （代码参考demo/taobao/list.w中同名函数）
Model.prototype.loadDataFromFile= function(url, objData, operation) {
if (operation) {
objData.clear();
}
$.ajaxSettings.async = false;
$.getJSON(url, function(data) {
objData.loadData(data);
});
};
// 获取商品列表
Model.prototype.goodsDataCustomRefresh = function(event) {
var url = require.toUrl("./cart/json/goodsData.json");
this.loadDataFromFile(url, event.source, true);
};
5） goodsData的onCustomRefresh事件绑定函数goodsDataCustomRefresh
6） index.w 的panel面板的content中添加scrollview组件。Scrollview实现下拉刷新，上划加载更多数据。
7） scrollview的中间content中添加list组件，设置data属性值为goodsData。list组件会自动根据关联data数据循环显示。
8） 在li中添加row组件，row中添加output，引用data中当前行的列。
9） 启动tomcat，运行index.w。
10） 知识点讲解：参考教材的scrollview，list，data组件。
表单与data组件的绑定
5.实现单表的CRUD
通过baas服务。
包括通过Java实现自定义的Action
Baas打包部署
参考：WeX5后端服务教程.zip
6.自己框架实现后台服务
自己有j2ee的后台服务可以提供数据，wex5应该怎么访问呢，可以不用baas吗？
可以使用ajax直接访问，不过返回的json数据格式要保证能加载到data组件中http://doc.wex5.com/?p=4932
或者是像这样的：/UI2/demo/tuniu/json/cityData.json建议集成3.2.1的baas,这样数据交互会简单些可以看看baas服务视频：http://wex5.com/cn/1-wex5#06
打包下载的那个视频（3.2.1以前版本的baas）
7. 自己框架集成BaaS代码
8. WebSocket通信应用
9.播放音频视频
10.调试
一种需求是界面基本不变，调试后端服务。这时可在native文件夹创建app，然后，右键菜单选择编译UI资源，成功后将www文件夹内的文件复制到myeclipse调试用的tomcat服务器应用程序部署文件夹内，作为一个应用程序即可。
在这种情况下，通过浏览器调试UI中的脚本程序是可以的。
另外一种需求是后台服务基本不变，主要是开发调试UI。这时，应该把后端服务部署到WeX5开发环境所用的tomcat服务下。但是这个还没有尝试。
WeX5学习笔记