白鹭引擎egret页面跳转

定义场景管理类

首先在src下定义一个场景切换管理类与抽象类

class SceneManager {
	private static _instance: SceneManager;

	private root:eui.Component;
	private constructor() {
	}

	public static get instance() {
		if (this._instance == null) {
			this._instance = new SceneManager();
		}
		return this._instance;
	}

	public setRoot(root:eui.Component){
		this.root=root;
	}

//跳转到下一页面
	public addScene(scene:Scene){
		this.root.addChild(scene);
	}

//跳转到上一页面
	public removeScene(scene:Scene){
		this.root.removeChild(scene);
		scene=null;
	}
}

abstract class Scene extends eui.Component{
	public constructor() {
		super();
		this.addEventListener(egret.Event.COMPLETE,this.onSkinLoaded,this);
	}

	//皮肤加载完成的回调
	public abstract onSkinLoaded():void;

}

新建场景exml文件

• 利用wing的可视化操作，将图片等拖放好之后，将需要点击效果的Image等设置id。

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="MainSceneSkin" xmlns:e="http://ns.egret.com/eui">
	<e:Image id="main_bg" source="main_bg_png" x="0" y="0" />
	<e:Image id="cet6_planet" source="cet6_planet_png" x="-5" y="55" />
	<e:Image id="surprise" source="surprise_png" x="532" y="842" />
	<e:Image id="base" source="base_png" x="-17" y="974" />
	<e:Image id="cet4_planet" source="cet4_planet_png" x="30" y="382" />
	<e:Image id="small_person" source="small_person_png" x="389" y="863" />
	<e:Image id="big_person" source="big_person_png" x="278" y="978" />
	<e:Image id="strange_world" source="strange_world_png" x="459" y="1010" />
</e:Skin>

定义相应exml文件的场景类

• 在类中定义在exml中设置的id与其属性。
• 且写好此类之后，在default.thm.json中写好此类对应的exml文件路径，进行“绑定”。
  例：MainScence与MainScene.exml

	 private new_planet: eui.Image;
    

{
	"skins": {
		"MainScene": "resource/skins/scene/MainScene.exml",
		"CET4Scene": "resource/skins/scene/NewScene.exml"
	},
	"autoGenerateExmlsList": true,
	"exmls": [
		"resource/skins/scene/MainScene.exml",
		"resource/skins/scene/NewScene.exml",
	],
	"path": "resource/default.thm.json"
}

Main.ts

class Main extends eui.Component {
    public constructor() {
        super();
        SceneManager.instance.setRoot(this);
        this.addEventListener(eui.UIEvent.ADDED_TO_STAGE, this.onAddedToStage, this);
		this.addEventListener(egret.Event.COMPLETE,this.onSkinLoaded,this);
    }


    //下面的代码必须在已经加入场景后才能运行，否则会报错
    protected onAddedToStage() {
        //注入自定义的素材解析器
        let assetAdapter = new AssetAdapter();
        egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
        this.loadResource().then(() => {
            this.skinName = "resource/skins/scene/MainScene.exml";
        });
    }

    private async loadResource() {
        const loadingView = new LoadingUI();
        this.stage.addChild(loadingView);
        await RES.loadConfig("resource/default.res.json", "resource/");
        await this.loadTheme();
        await RES.loadGroup("preload", 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async loadTheme() {
        return new Promise((resolve, reject) => {
            //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
            let theme = new eui.Theme("resource/default.thm.json", this.stage);
            theme.addEventListener(eui.UIEvent.COMPLETE, () => {
                resolve();
            }, this);

        })
    }

    private new_planet: eui.Image;
  


    public onSkinLoaded() {
    //给new_planet设置监听，点击后可跳转至NewScene
        this.new_planet.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            SceneManager.instance.addScene(new NewScene());
        }, this)

    }
}

实现页面跳转大概就这样写了，由于这段代码许久之前写的。可能有些改动忘记写进来，有问题的话，尽管在下面提问~。

第一次写博客，见谅哈~