laya air 2.0 ts项目入门教程

1 点击文件->新建项目
选择layaair空项目，填写项目名称和选择相应语言，这里选择type script。

1558679650.png

2 新建场景

微信图片编辑_20190524143750.jpg

点击ide左侧的编辑模式按钮，进入编辑模式，右键点击scene，新建场景

1558679981(1).png

这里命名为helloWorld

3 场景添加按钮

QQ截图20190524144355.png

按上图提示，将button拖到场景中，并选中button，右侧的var变量赋值为btnShow，label属性修改为HelloWold
4 添加脚本
切换到代码模式，在src目录下，添加scripts文件夹，在该文件夹下新加helloWorld.ts.
export default class HelloWorld extends Laya.Scene {
static instance: HelloWorld;
constructor() {
super();
HelloWorld.instance=this
this.btnShow=this.getComponent("btnShow")

}
private btnShow:Laya.Button
onBtnShowClick(){
var dialog = new Laya.Dialog();
dialog.width=300;
dialog.height=600;

    //var bg = new Laya.Image('comp/img_bg.png');
    //dialog.addChild(bg);

    var button = new Laya.Button('comp/button.png');
    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.btnShow.on(Laya.Event.CLICK,this,this.onBtnShowClick);
}

onDisable() {
    
}

}

5 挂载脚本

QQ截图20190524144916.png

再次进入编辑模式，将helloWorld.ts脚本拖到右侧的runtime中，按F5编译运行
效果如下图

QQ截图20190524145129.png

点击按钮，效果如图

QQ截图20190524145138.png

本文参考https://www.cnblogs.com/wyang/p/10277128.html