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.
5 拖动脚本

6.png

将helloWorld.ts拖到场景的下方。按F9出现如下界面
点击场景配设置，发布模式选择分离模式
按F12编译项目
src\ui目录的layaMaxUI.ts增加如下内容

export module ui {
export class helloWorldUI extends Laya.Scene {
public btnShow:Laya.Button;
constructor(){ super()}
createChildren():void {
super.createChildren();
this.loadScene("helloWorld");
}
}
REG("ui.helloWorldUI",helloWorldUI);
}

在helloworld.ts中添加如下代码
import { ui } from "../ui/layaMaxUI"

export default class HelloWorld extends Laya.Script {

constructor() { 
    super();
}
private helloUi:ui.helloWorldUI;
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.helloUi = this.owner as ui.helloWorldUI;
    this.helloUi.btnShow.on(Laya.Event.CLICK,this,this.onBtnShowClick);
}

onDisable() {
    
}

}

F5启动项目

QQ截图20190524145129.png

QQ截图20190524145138.png