LayaAir基础（3） 之 场景的搭建

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/86601064

场景的搭建

这里所说的场景就是每一个页面的显示效果

1.进入编辑模式，进入UI视图的编辑界面；

2.在项目下的空白区域，右击-->新建-->页面/场景

3.拖动指定的UI到视图区域

关于这些资源的命名：

以下面的开头，加_xxx即可；

背景：bg

按钮：button 或者btn

选框：checkbox 

文本标签：label

文本输入框：textinput

小技巧：图片的缩放会压缩，可以使用shift 按住+缩放  不会压缩；

4.组件举例：

var 是给这个主键取一个引用名

sizeGrid 9宫格设置拉伸

还有其他的很多属性；

5.导出

当页面已经布局好了，记得导出 F12;

会在代码模式下的

6.js继承，获取相应的组件对象

在src-》ui-》layaUI.max.all.js 文件中就会有我们编辑的场景自动生成的代码，如下；

我们可以继承上面的代码，来实现我们的逻辑

定义于给LoginUIView类

let LoginUIView = (function(_super){
    function LoginUIView(){
        LoginUIView.super(this);
        this.btn_register.on(Laya.Event.CLICK,this,this.btnRegisterListener);
        this.btn_login.on(Laya.Event.CLICK,this,this.btnLoginListener);
    }
    Laya.class(LoginUIView,"LoginUIView",_super);//设置继承关系，继承LoginUI；
    LoginUIView.prototype.btnRegisterListener=function(){
            console.log("注册");
            let dialog=new AlterDialogView();
            dialog.popup();
        };
    LoginUIView.prototype.btnLoginListener = function(){
        console.log("登录");
        let dialog=new AlterDialogView();
        dialog.popup();
    }
    return LoginUIView;
})(LoginUI);