laya核心API五分钟速记

简介: laya核心API五分钟速记

本文以切入源码的方式讲解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

目录
相关文章
|
7月前
|
Ubuntu 安全 Linux
宝塔Linux面板安装教程
这是一篇关于宝塔Linux面板安装教程的文章,支持CentOS/Ubuntu/Deepin/Debian/Fedora系统。文章详细列出了各系统的安装脚本命令,并提供更新升级脚本、安装后操作指南及注意事项。重点包括开放必要端口、解决权限问题、查看安装日志以及推荐的安全设置,如启用登录限制和定期更新面板。若遇问题可参考宝塔官方论坛或寻求技术支持。
509 0
|
Python
Python办公自动化:删除任意页数pdf页面
Python办公自动化:删除任意页数pdf页面
319 2
Python办公自动化:删除任意页数pdf页面
|
11月前
|
安全 Android开发 iOS开发
Android vs iOS:深入剖析两大移动操作系统的优劣与未来趋势####
【10月更文挑战第21天】 本文旨在通过技术视角,全面对比分析Android与iOS两大主流移动操作系统的架构差异、用户体验、安全性及生态系统等方面,探讨其各自优势与不足,并预测未来发展趋势。 ####
1096 1
|
存储 弹性计算 固态存储
阿里云服务器可选云盘ESSD AutoPL、ESSD云盘、SSD云盘区别参考
目前阿里云服务器的云盘有ESSD AutoPL、高效云盘、ESSD云盘、SSD云盘等可供选择,有的新手用户并不清楚他们之间的区别,因此也就不知道应该如何选择,因为不同种类的云盘在最大IOPS、最大吞吐量等性能上是有区别的,下面我们一起来他们之间的区别,这样就有助于我们选择适合自己需求的系统盘与数据盘了。
阿里云服务器可选云盘ESSD AutoPL、ESSD云盘、SSD云盘区别参考
|
机器学习/深度学习 人工智能 安全
AI 绘画Stable Diffusion 研究(三)sd模型种类介绍及安装使用详解(1)
AI 绘画Stable Diffusion 研究(三)sd模型种类介绍及安装使用详解
2889 0
|
安全 C++ Windows
Windows下C++使用gRPC(Qt和VS,含文件包和使用方法)
Windows下C++使用gRPC(Qt和VS,含文件包和使用方法)
|
Web App开发 移动开发 IDE
laya入门,这一篇应该够了
laya入门,这一篇应该够了
6533 1
|
开发框架 编译器 定位技术
探索游戏开源世界:引擎与框架的宝库
本文介绍了多个开源游戏引擎和框架,如 Bevy(用 Rust 构建)、Mach、Axmol、Cocos、Open 3D Engine、KorGE、Tiled、OpenRA 和 Godot。这些工具降低了游戏开发的门槛,支持跨平台开发,并推动了游戏行业的发展。
|
前端开发 JavaScript Java
【十五】springboot整合WebSocket实现聊天室
【十五】springboot整合WebSocket实现聊天室
408 0