欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

LayaAir学习笔记01(TS)

程序员文章站 2022-07-14 20:53:03
...

1,IDE上添加组件相关步骤:

学习文章:laya air 2.0 ts项目入门教程
① 拖曳添加组件到位置上,对var变量赋值
LayaAir学习笔记01(TS)
② 在代码编辑器中/src/script文件下添加对应名称的.ts文件
LayaAir学习笔记01(TS)
③ IDE中将.ts文件拖到Scene(场景)下
LayaAir学习笔记01(TS)
④ F9–>场景设置–>发布模式设置为分离模式
LayaAir学习笔记01(TS)
⑤ F12 编译项目,代码编辑器中rc\ui目录的layaMaxUI.ts增加
LayaAir学习笔记01(TS)
⑥ 在.ts文件中导入import {ui} from "../ui/layaMaxUI"
⑦ 编辑类(对该按钮添加属性方法等)

import {ui} from "../ui/layaMaxUI"
//对HelloWorld按钮添加属性时间等
export default class HelloWorld extends Laya.Script{
    constructor(){
        super();
    }
    private helloUi:ui.helloWordUI;

    //点击按钮事件
    onBtnShowClick(){
        var dialog=new Laya.Dialog();//弹出对话框,设定对话框大小
        dialog.width=300;
        dialog.height=600;

        var button=new Laya.Button('comp/button.png');//新建一个按钮,给它skin皮肤图片,
        button.label='Hello World!'
        button.name=Laya.Dialog.CLOSE;
        button.width=260;
        button.height=500;
        button.pos(35,35);//设置按钮坐标
        dialog.addChild(button);//添加节点

        dialog.dragArea='0,0,300,600';//对话框区域
        dialog.show();
    }

    //组件被启用后执行
    onEnable(){
        this.helloUi=this.owner as ui.helloWordUI;//ts中as表示断言,限制类型
        this.helloUi.btn_Show.on(Laya.Event.CLICK,this,this.onBtnShowClick);//监听点击事件
    }

    //组件被禁用后执行
    onDisable(){

    }

}

⑧ 保存,IDE运行查看效果
LayaAir学习笔记01(TS)
LayaAir学习笔记01(TS)

2,代码编写组件

在Main.js中先删除/注释原有的部分,再编写代码
LayaAir学习笔记01(TS)
IDE运行结果:
LayaAir学习笔记01(TS)
△这里注意的就是代码编写的组件不会出现在IDE视图上,只有编译才看的出效果。废材的我纠结了好久这个。。。