根据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