wex5学习笔记总结

wex5学习笔记

1:wex5 执行顺序

wex5组件需要在modeLoad,初始化完成后才执行,modelParamsReecive也不能先于js执行

如果需要js代码在页面中执行,就将js的代码写在wex5组件方法中

2:对象的获取与取值方法

对象获取:1.this.comp(‘xid’)效能低 2.this.getElementByXid(‘xid’);

例如:$(this.getElementByXid(“row2”)).remove()

取值方法:1.this.comp().val(); 2.this.getElementByXid().val;不需要带();

3:wex5对象转化为js对象

this.comp.$domNode.innerHtml获取一个节点的text值;

4:wex5的生命周期

WeX5页面运行时,分成两个阶段:编译阶段和运行阶段**

编译阶段:把w和js文件编译成html和css,js;

main_{lang}_{skin}.html:完整的HTML页面,可以作用独立的HTML页面运行;

xx.w.view_{lang}_{skin}.html:HTML页面片段,不能独立运行,只能作用页面片段被其它页面加载,适用于单页应用模式;

xx.w.view_{lang}_{skin}.js:页面逻辑,包含页面初始化等相关逻辑,它继承.w同名的js文件中定义的js类;


运行阶段:可以分为页面创建,用户交互,页面关闭;

1-页面创建

1)页面准备:负责加载页面,创建组件,执行数据绑定初始化;

2)触发onModelConstrut事件:作用是触发Model开发构造事件;

3)Data加载:Model中的Data加载数据;

4)触发onModelConstructDone事件:作用触发Model构造完成事件;

5)触发onLoad事件:触发页面加载完成事件;

6)触发onParamsReceive事件:触发页面接收参数事件;

2-页面交互

1)打开页面时会再次向页面传参,会触发onParamsReceive事件;

2)当离开页面时,离开之前触发onInactive事件;

3)当离开页面,再次进入时(不是第一次进入),会触发onActive事件;

3-页面关闭

1)onlnactive事件:页面离开事件;

2)onunLoad事件:页面销毁事件;

注意:

1 每次重新进入某页面的时候,该页面会被重新加载!

2 如果使用了index页面做一个APP壳子,那么当退出应用的时候(应用其实还在手机后台运行着,只是当前焦点不在该应用上),当重新获得焦点(不是重新启动程序,是重新获得焦点)的时候,index页面会重新被加载!

这意味着,不可以在index加载的时候使用一些共享变量来存储运行时数据,因为index页面并非只加载一次!是加载多次了!共享变量使用localStorage存储;

3 页面的样式尽量使用bind,不要自己在js控制!因为,每次页面请求后多是经历了一个初始化流程,这个初始化流程每次都会重新执行;比如,控制是否显示,下次进入页面的时候又会触发页面初始化,如果使用js控制是否显示,那么就必须在页面加载完成事件中进行是否显示的控制;这样做的话,问题是不大,但是用户会看到页面在1秒内切换过了!

4 如果使用的是windowDialog组件打开的页面,是没有Action、Inactive事件的!

猜你喜欢

转载自blog.csdn.net/weixin_44037936/article/details/84935838