本文以切入源码的方式讲解laya核心API的使用以及需要注意的点。
Node(节点)操作
大部分的laya UI组件都可以看做节点,可以看做web开发中,使用JavaScript对html节点进行操作。
添加节点核心方法:
/** * 添加子节点。 * @param node 节点对象 * @return 返回添加的节点 */ addChild(node: Node): Node; /** * 批量增加子节点 * @param ...args 无数子节点。 */ addChildren(...args: any[]): void; /** * 添加子节点到指定的索引位置。 * @param node 节点对象。 * @param index 索引位置。 * @return 返回添加的节点。 */ addChildAt(node: Node, index: number): Node; /** * 根据子节点对象,获取子节点的索引位置。 * @param node 子节点。 * @return 子节点所在的索引位置。 */
注意:添加节点时候,越后添加的层级越高,可以设置zOrder属性调整对象层级。
销毁、删除节点核心方法:
/** * 删除子节点。 * @param node 子节点 * @return 被删除的节点 */ removeChild(node: Node): Node; /** * 从父容器删除自己,如已经被删除不会抛出异常。 * @return 当前节点( Node )对象。 */ removeSelf(): Node; /** * 根据子节点名字删除对应的子节点对象,如果找不到不会抛出异常。 * @param name 对象名字。 * @return 查找到的节点( Node )对象。 */ removeChildByName(name: string): Node; /** * 根据子节点索引位置,删除对应的子节点对象。 * @param index 节点索引位置。 * @return 被删除的节点。 */ removeChildAt(index: number): Node; /** * 删除指定索引区间的所有子对象。 * @param beginIndex 开始索引。 * @param endIndex 结束索引。 * @return 当前节点对象。 */ removeChildren(beginIndex?: number, endIndex?: number): Node;
/** * <p>销毁此对象。destroy对象默认会把自己从父节点移除,并且清理自身引用关系,等待js自动垃圾回收机制回收。destroy后不能再使用。</p> * <p>destroy时会移除自身的事情监听,自身的timer监听,移除子对象及从父节点移除自己。</p> * @param destroyChild (可选)是否同时销毁子节点,若值为true,则销毁子节点,否则不销毁子节点。 */ destroy(destroyChild?: boolean): void; /** * 销毁所有子对象,不销毁自己本身。 */ destroyChildren(): void;
注意:如果将节点销毁,则不能再使用,但删除之后的节点依旧可以使用。
获取节点核心方法:
/** * 根据子节点对象,获取子节点的索引位置。 * @param node 子节点。 * @return 子节点所在的索引位置。 */ getChildIndex(node: Node): number; /** * 根据子节点的名字,获取子节点对象。 * @param name 子节点的名字。 * @return 节点对象。 */ getChildByName(name: string): Node;
注意:getChildByName方法传入的name,是在创建的时候为节点设置的name,并且只能获取下一级的孩子节点,而不是所有属于当前节点的所有子节点。
事件
事件类型非常多,常用的有:
/** 定义 mousedown 事件对象的 type 属性值。*/ static MOUSE_DOWN: string; /** 定义 mouseup 事件对象的 type 属性值。*/ static MOUSE_UP: string; /** 定义 click 事件对象的 type 属性值。*/ static CLICK: string; /** 定义 rightmousedown 事件对象的 type 属性值。*/ static RIGHT_MOUSE_DOWN: string; /** 定义 rightmouseup 事件对象的 type 属性值。*/ static RIGHT_MOUSE_UP: string; /** 定义 rightclick 事件对象的 type 属性值。*/ static RIGHT_CLICK: string; /** 定义 mousemove 事件对象的 type 属性值。*/ static MOUSE_MOVE: string; /** 定义 mouseover 事件对象的 type 属性值。*/ static MOUSE_OVER: string;
具体可以查看layaAir.d.ts laya.events模块,大概在17316行.......
事件绑定:
/** * <p>增加事件侦听器,以使侦听器能够接收事件通知。</p> * <p>如果侦听鼠标事件,则会自动设置自己和父亲节点的属性 mouseEnabled 的值为 true(如果父节点mouseEnabled=false,则停止设置父节点mouseEnabled属性)。</p> * @param type 事件的类型。 * @param caller 事件侦听函数的执行域。 * @param listener 事件侦听函数。 * @param args (可选)事件侦听函数的回调参数。 * @return 此 EventDispatcher 对象。 */ on(type: string, caller: any, listener: Function, args?: Array<any>): EventDispatcher; /** * <p>增加事件侦听器,以使侦听器能够接收事件通知,此侦听事件响应一次后则自动移除侦听。</p> * <p>如果侦听鼠标事件,则会自动设置自己和父亲节点的属性 mouseEnabled 的值为 true(如果父节点mouseEnabled=false,则停止设置父节点mouseEnabled属性)。</p> * @param type 事件的类型。 * @param caller 事件侦听函数的执行域。 * @param listener 事件侦听函数。 * @param args (可选)事件侦听函数的回调参数。 * @return 此 EventDispatcher 对象。 */ once(type: string, caller: any, listener: Function, args?: Array<any>): EventDispatcher;
注意:多次为同一个节点使用on方法会多次绑定事件,需要了解的是,如果对节点的操作不会有变化,则使用on方法绑定一次即可,如果根据状态条件等因素的不同,则使用once绑定。
网络
网络请求也是封装的HttpRequest,比较简单。
/** * 发送 HTTP 请求。 * @param url 请求的地址。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。 * @param data (default = null)发送的数据。 * @param method (default = "get")用于请求的 HTTP 方法。值包括 "get"、"post"、"head"。 * @param responseType (default = "text")Web 服务器的响应类型,可设置为 "text"、"json"、"xml"、"arraybuffer"。 * @param headers (default = null) HTTP 请求的头部信息。参数形如key-value数组:key是头部的名称,不应该包括空白、冒号或换行;value是头部的值,不应该包括换行。比如["Content-Type", "application/json"]。 */ send(url: string, data?: any, method?: string, responseType?: string, headers?: Array<any>): void;
一个简单的请求网络数据示例:
getList(page,size,url){ let http = new Laya.HttpRequest(); http.send(`${this.gd.host}${url}?userId=${this.gd.user.id}&page=${page}&size=${size}`, 'GET'); http.timeout = 1000; return new Promise((resolve, reject) => { http.once(Laya.Event.COMPLETE, this, (resp) => { resp = JSON.parse(resp); if (resp.meta.code === 200) { if (resp.data !== null) { resolve(resp.data) } else { resolve(resp.data); } } else { console.log('服务器错误'); } }); http.once(Laya.Event.ERROR, this, (resp) => { resolve(resp.data); }); }) }
let data = await EventUtils.getInstance().getList(this.currentPage, this.size,'/norain/pre/rank/time');//请求加载数据
动画
缓动动画
缓动类型解释传送门:https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Ease
缓动动画演示传送门:https://layaair.ldc.layabox.com/demo/?category=2d&group=Tween&name=EaseFunctionsDemo