根据exml文件Id自动生成定义及接口

今天要改一个exml界面,发现代码有很多定义的变量,也有exml定义的,有些是代码中需要的变量和需要动态添加至界面的组件。 在对exml文件删除和添加组件的时候,要区分删除和添加的变量时很麻烦。 写了一个自定义插件(原理直接看egret 解析exm 位置:5.2.33\tools\tasks\exml.ts) 在获取到数据流时 根据是否存在id属性,来动态生成class 根据id中是否存在btn或其他关键字 来生成接口。 在scripts放入代码,在config.ts中build buildConfig中加入new MyExmlUIPlugin()

const { target, command, projectName, version } = params;
        const allCommands = global['egret'].args.commands;
        if (command == 'build') {
            const com = allCommands[1];
            const outputDir = '.';
            if(com == 'ui'){
                return {
                    outputDir,
                    commands: [
                        new MyExmlUIPlugin(),
                    ]
                }
            }
            return {
                outputDir,
                commands: [
                    new ExmlPlugin('debug'), // 非 EUI 项目关闭此设置
                    new IncrementCompilePlugin(),
                    new MyExmlUIPlugin()
                ]
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用 egret build 或 egret build ui 例:startGame.exml文件 生成startGameUI类,生成IstartGameUI接口

namespace UI {
    export interface IstartGameUI {
        onBtnStartClick?(): void;
    }
    export class startGameUI extends BaseUI {
        public startTxt: eui.Label;
        public btnStart: eui.Button;

        constructor() {
            super();
            this.skinName = "startGame";
        }
    };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

后续再写代码时,直接继承生成的class 来避免exml的变量和代码中的变量耦合。

class startGame extends UI.startGameUI implements UI.IstartGameUI{
    constructor(){
        super();
        this.skinName="startGame";
    }
    onBtnStartClick?() : void{
        
    };
}
1
2
3
4
5
6
7
8
9

也可将BaseUI中点击方法的添加,改为根据接口中的方法动态添加(后续补上)

上次更新: 2021/10/07, 11:11:51
最近更新
01
搜索Excel表里sheet名称
11-03
02
1447题-最简分数
10-28
03
搜狗微信文章的抓取
10-26
更多文章>