JM_KA/assets/Script/Manager.ts

const { ccclass, property } = cc._decorator;

@ccclass
export default class Manager extends cc.Component {
    //#region 外調參數

    @property({ type: cc.WebView })
    public webview: cc.WebView = null;

    @property({ type: cc.Node })
    public BG: cc.Node = null;

    //#endregion

    //#region Lifecycle

    protected onLoad(): void {
        let self: this = this;
        window.addEventListener("message", function (e: MessageEvent<any>): void {
            let data: any = e.data;
            let method: string = data.method;
            let value: any = data.value;
            if (method && self[method]) {
                if (value) {
                    self[method](...value);
                    return;
                } else if (self[method]) {
                    self[method]();
                    return;
                }
            }
            console.log(`not function: ${method}, value: ${value}`);
        }, false);
        let href: string = window.location.href;

        this.webview.url = `https://karolchang.github.io/jm-expense-vue-ts/?host=${href}&ignore=${Date.now()}`;
        // this.webview.url = `http://localhost:8080/jm-expense-vue-ts/?host=${href}&ignore=${Date.now()}`;
        this.webview.node.active = true;

        cc.view.setResizeCallback(this._resize.bind(this));
        this._resize();
    }

    private _closeBG(): void {
        if (this.webview.node.opacity === 0) {
            this.BG.destroy();
            this.webview.node.opacity = 255;
            this.webview.node.active = false;
            this.webview.node.active = true;
        }
    }

    private _log(msg: string): void {
        console.log(msg);
    }

    private _alert(msg: string): void {
        alert(msg);
    }

    private _resize(): void {
        let Canvas: cc.Canvas = cc.Canvas.instance;
        let rect: DOMRect = cc.game.canvas.getBoundingClientRect();
        /** 判断是否是横屏 */
        let landscape: boolean = false;
        if (rect.width > rect.height) {
            landscape = true;
        }
        // 根据横竖屏调整节点的位置适配等
        let frameSize: cc.Size = cc.view.getFrameSize();
        if (landscape) {
            // 横屏
            cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
            if (frameSize.height > frameSize.width) {
                cc.view.setFrameSize(frameSize.height, frameSize.width);
            }
            Canvas.designResolution = cc.size(1920, 1080);
        } else {
            // 竖屏
            cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
            if (frameSize.width > frameSize.height) {
                cc.view.setFrameSize(frameSize.height, frameSize.width);
            }
            Canvas.designResolution = cc.size(1080, 1920);
        }
    }

    //#endregion
}