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
