LayaBox開發實戰之實現一個簡單的模板類

1.首先UI設計：記得導出

 

2.然后查看layaUI.max.all.js中是否生成對應UI的JS代碼：

var FeedBackUI=(function(_super){
        function FeedBackUI(){
            
            this.btn_close=null;
            this.FeedBackText=null;
            this.button_submit=null;
            this.button_cancel=null;

            FeedBackUI.__super.call(this);
        }

        CLASS$(FeedBackUI,'ui.Main.FeedBackUI',_super);
        var __proto__=FeedBackUI.prototype;
        __proto__.createChildren=function(){
            
            laya.ui.Component.prototype.createChildren.call(this);
            this.createView(FeedBackUI.uiView);

        }

        FeedBackUI.uiView={"type":"View","props":{"width":720,"height":1280},"child":[{"type":"Image","props":{"y":10,"x":10,"top":0,"skin":"ui/nineGridGrey/image_heidi2.jpg","right":0,"left":0,"bottom":0,"alpha":0.5}},{"type":"Box","props":{"y":10,"x":10,"width":720,"mouseThrough":true,"height":1280,"centerY":0,"centerX":0},"child":[{"type":"Box","props":{"y":179,"width":626,"height":784,"centerX":0},"child":[{"type":"Image","props":{"y":-9,"x":-1,"width":627,"skin":"ui/nineGrid/image_2.png","sizeGrid":"68,77,84,69","height":793}},{"type":"Image","props":{"y":-58,"x":148,"width":328,"skin":"ui/nineGrid/image_title_01.png","sizeGrid":"0,57,0,55","height":126},"child":[{"type":"Label","props":{"y":62,"x":168,"width":141,"text":"反饋","pivotY":33,"pivotX":67,"height":59,"fontSize":55,"color":"#ef9307","bold":true}}]},{"type":"Button","props":{"y":50,"x":576,"var":"btn_close","stateNum":1,"skin":"ui/common/button_close.png","anchorY":0.5,"anchorX":0.5}},{"type":"Panel","props":{"y":145,"x":43,"width":537,"vScrollBarSkin":"ui/common/vscroll.png","height":535},"child":[{"type":"TextArea","props":{"y":0,"x":0,"width":509,"var":"FeedBackText","text":"請為我們提出合理化的建議....","height":446,"fontSize":20,"font":"SimHei","color":"#605b5b"}}]}]},{"type":"Button","props":{"y":857,"x":213,"width":234,"var":"button_submit","stateNum":1,"skin":"ui/login/button_login.png","labelSize":40,"labelFont":"SimHei","labelColors":"#ffffff","label":"提 交","height":71,"anchorY":0.5,"anchorX":0.5}},{"type":"Button","props":{"y":859,"x":474,"width":234,"var":"button_cancel","stateNum":1,"skin":"ui/login/button_logout.png","labelSize":40,"labelFont":"SimHei","labelColors":"#ffffff","label":"取 消","height":71,"centerX":114,"anchorY":0.5,"anchorX":0.5}}]}]};
        return FeedBackUI;
    })(View);

 

3.創建操作UI的邏輯類JS文件:目錄地址如下：

 

 4.index.html文件中添加JS文件的路徑：

 

5.編寫最重要的邏輯類代碼：

/*
* 反饋界面
* 作者：**** 日期：2018/12/16
*/
var FeedBackWindow = (function(){
    ss.FeedBackWindow = function(argObj){
         this.__super.call(this,argObj);      //在 Javascript 中實現調用父類同名方法的語法糖(this.__super()),call是回調方法執行,因為 super 為關鍵字,所以使用了_super 代替
    };
    Laya.class(ss.FeedBackWindow,"ss.FeedBackWindow",ss.DialogBehavior);

    var _proto = ss.FeedBackWindow.prototype;  //定義一個變量實現原型的接收

    _proto.rawResArray = [                                                      //這部分是調用UI基類DialogBehavior.js中的loadRes方法以及onRawResLoadCompeleted方法
        { url: "res/atlas/ui/nineGridGrey.atlas", type: Laya.Loader.ATLAS },   
        { url: "res/atlas/ui/main.atlas", type: Laya.Loader.ATLAS },    //加載資源的路徑，加載的資源類型是圖集資源
    ];

    _proto.path = "Main.FeedBackUI";   //這個路徑設置為layaUI.max.all.js文件中：CLASS$(FeedBackUI,'ui.Main.FeedBackUI',_super);

    _proto.uiConfig = {layer: G.LAYER_NORMAL, alpha: G.UI_WITHOUT_ALPHA }; //設置層級，這部分是調用到UI管理類UIManager.js以及src/data/目錄下的Constants.js文件（設置常量）

    _proto.start = function () {
        this.monitorBtns(); };

     _proto.monitorBtns = function () {   //監聽鼠標事件，執行回調函數
 utils.onButtonScaleEvent(this.mainUI.btn_close, this, "onClickCloseBtn");         //按鈕事件函數以及其他的事件相關的函數，可以調用src/utils/Utils.js文件下查找，第一個參數：觸發事件的對象，第二個參數：執行域，第三個參數：回調函數的名字
        utils.onButtonScaleEvent(this.mainUI.button_submit, this, "onClickSubmit");
        utils.onButtonScaleEvent(this.mainUI.button_cancel, this, "onClickCloseBtn");
    };

    _proto.onClickSubmit = function (){
          var arr=[];
          //定位到UI組件TextArea，調用該組件
          arr.push(this.mainUI.FeedBackText.text);
          //console.log(arr);
          //獲取FeedBackText的內容

          //獲取到的內容存儲到數組arr
          
          //提交內容保存到本地
          Laya.LocalStorage.setItem("feedbackText",arr);
          this.destroy();

    }
    
    _proto.onClickCloseBtn = function () {
        this.destroy();
    };

    return FeedBackWindow;
})();