【手把手】Egret如何在微信小游戏创建ComboBox控件

Egret引擎的官方控件没有ComboBox控件。想创建的话，除了自己重写，还可以调用Egret lab在GitHub上的扩展控件。

在GitHub上搜索egret-game-library，将整个项目以Zip压缩包下载到本地，解压打开。

打开euiextension\ComboBox\libsrc文件夹。如下图：

在Egret整个项目的文件夹外，创建一个名为EgretLibs的文件夹。如果你的项目叫EgretDemo1，路径为D:\Project\EgretProjects\EgretDemo1，那么EgretLibs的路径应为：

D:\Project\EgretProjects\EgretLibs

在EgretLibs文件夹内再创建一个combobox文件夹，然后将上图的所有文件文件夹都复制到这里。

然后修改Egret项目的egretProperties.json文件，在modules节点最后添加如下内容：

{
			"name": "combobox",
			"path": "../EgretLibs/combobox"
}

编译之后，应该在项目的libs/modules文件夹看到生成的combobox文件夹，代表引用成功。

假设游戏的设置页面如下：

那么对应的页面逻辑代码：

    private operationRangeData: any[] = [];
    private operationRangeMaxCB: ComboBox;
		private operationRangeLabel: eui.Label;

    protected childrenCreated(): void {
        super.childrenCreated();

        this.operationRangeData.push({ bg: "itemBg1_png", content: "0" });
        this.operationRangeData.push({ bg: "itemBg2_png", content: "5" });
        this.operationRangeData.push({ bg: "itemBg1_png", content: "10" });
        this.operationRangeData.push({ bg: "itemBg2_png", content: "15" });
        this.operationRangeData.push({ bg: "itemBg1_png", content: "20" });
        this.operationRangeData.push({ bg: "itemBg2_png", content: "30" });
        this.operationRangeData.push({ bg: "itemBg1_png", content: "50" });
        this.operationRangeData.push({ bg: "itemBg2_png", content: "100" });
        
        this.operationRangeMaxCB = this.CreateComboBox(this.operationRangeLabel, this.operationRangeData, 830, 150);
        this.operationRangeMaxCB.name = "operationRangeMaxCB";
        this.operationRangeMaxCB.getTitleLabe().text = this.operationRangeData[0].content;
       
    }

    private CreateComboBox(descLabel: eui.Label, data: any[], positionX: number = 580, boxWidth: number = 400): ComboBox {
        let y = descLabel.y;
        let height = descLabel.height;

        let comboBoxWidth = boxWidth <= 0 ? 400 : boxWidth;
        let comboBoxX = positionX <= 0 ? 580 : positionX;

        let cb: ComboBox = new ComboBox(data);
        this.addChild(cb);
        //1.点击事件
        cb.addEventListener(ComboBox.onClick, this.onClickComboBoxItem, this);
        //2.设置title
        cb.setTitleHeight(height);
        cb.setTitleBackground("titleBackground_png");
        cb.setTitleFontSize(40);
        //3.设置Item
        cb.setItemWidth(comboBoxWidth);
        cb.setItemHeight(height);
        cb.setItemFontSize(descLabel.size - 1);
        //4.设置Item内容文字的对齐方式
        cb.setItemTextAlign("right");

        cb.hide();

        cb.y = y;
        cb.x = comboBoxX;

        return cb;
    }

    private onClickComboBoxItem(event) {
        //getTitleLabe()方法可以获取titleLabel控件。
        var titleLabel = event.currentTarget.getTitleLabe();
        titleLabel.text = event.target._data.content;

        event.currentTarget.hide();
    }

上述这样写，的确可以在Egret Wing debug的时候成功调用ComboBox，但是，如果发布成为微信小程序，则会报ReferenceError或者gameThirdScriptError。

找到Egret项目的scripts/wxgame/wxgame.ts文件，在对应的位置增加以下代码：

    if (filename == "libs/modules/combobox/combobox.js" || filename == 'libs/modules/combobox/combobox.min.js') {
                    content += ";window.ComboBox = ComboBox;"//增加微信小游戏对第三方类库ComboBox的支持
                }

大功告成~~~~~~~~~