创建页面

最近更新时间:2020-06-29 16:39:30

操作场景

一般帧同步游戏都包含至少三个页面:主页、房间、游戏页。
Hello World 项目中,将对应实现 MainView、RoomView 和 GameView 三个页面。本文档指导您分别创建 MainView、RoomView 和 GameView 三个页面。

前提条件

已在 view 文件夹下创建 BaseView.js 文件。

操作步骤

  1. 在 BaseView.js 文件中,实现页面 onInit、onUpdate、onDestory 三个生命周期方法。并调用 requestAnimationFrame,用于驱动画面更新。
    示例代码如下所示:

// 页面基类
import * as Util from "../Util.js";
const Global = Util.Global;

export default class BaseView {

    // 页面内组件数组,如 Button、MsgBox
    components = [];

    constructor() {
        // 使用每个页面自己的 onUpdate 函数进行渲染
        AnimateUtil.callback = this.onUpdate.bind(this);

        // 初始化页面背景
        Util.ctx.fillStyle = 'white';
        Util.ctx.fillRect(0, 0, Util.width, Util.height);

        wx.hideLoading();
        this.onInit();
    }

    // 页面的生命周期
    // onInit: 进入页面前调用
    // onUpdate: 渲染层页面更新时调用
    // onDestroy: 离开页面后调用
    // 子类可以实现这三个方法
    onInit() { }
    onUpdate() { }
    onDestroy() { }

    // 跳转到其他页面
    open(ViewClass) {
        this.onDestroy();

        // 清除页面组件
        this.components.forEach(component => component.onDestroy());
        this.components = [];

        // 跳转
        setTimeout(() => new ViewClass());
    }

    // 添加组件
    addComponent(component) {
        this.components.push(component);
        component.render();
    }

    // 显示 toast
    toast(title) {
        wx.showToast({
            title,
            icon: 'none',
        });
    }

    // 显示 loading
    loading(title) {
        wx.showLoading({
            title,
        });
    }

    // 显示 Dialog
    dialog(content, confirm) {
        wx.showModal({
            title: '提示',
            content,
            success(res) {
                if (res.confirm) {
                    confirm && confirm();
                }
            }
        })
    }
}

// 页面定时渲染
const AnimateUtil = {
    callback: () => { },
    run: () => {
        AnimateUtil.callback && AnimateUtil.callback();
        requestAnimationFrame(AnimateUtil.run);
    }
}

AnimateUtil.run();

MainView 主页

  1. 参考如下示例代码,在 view 文件夹下,创建 MainView.js 文件,继承 BaseView 实现一个包含有一个按钮和文本框的页面。

// 游戏主页
import * as Util from "../Util.js";
import BaseView from "./BaseView.js";
import Component from "../component/index.js";
const Global = Util.Global;

export default class MainView extends BaseView {
    constructor() {
        super();
    }

    onInit() {
        const button = new Component.Button(20, 20, "快速加房");
        const msgBox = new Component.MsgBox(20, 100, "");

        this.addComponent(button);
        this.addComponent(msgBox);
    }

    onUpdate() { }

    onDestroy() { }
}

Global.MainView = MainView;
  1. 在根目录的 game.js 中导入 Util.js 和 MainView.js,并实例化 MainView。示例代码如下所示:

// 导入 MGOBE.js
import "./MGOBE.js";
// 获取 Room、Listener 对象
const { Room, Listener, ErrCode, ENUM } = MGOBE;

import * as Util from "./Util.js";
const Global = Util.Global;

// 导入页面
import "./view/MainView.js";

// 启动页为 MainView
new Global.MainView();
  1. 编译后即可在左侧模拟器中看到效果。如下图所示:
    主页

RoomView 房间页

  1. 在 view 文件夹下,创建 RoomView.js 文件,用于实现一个包含有两个按钮和一个文本框的页面。示例代码如下所示:

// 房间页
import * as Util from "../Util.js";
import BaseView from "./BaseView.js";
import Component from "../component/index.js";
const Global = Util.Global;

export default class RoomView extends BaseView {

    button;
    msgBox;

    constructor() {
        super();
    }

    timer;

    onInit() {

        const button1 = new Component.Button(20, 20, "准备");
        this.button = button1;

        const button2 = new Component.Button(150, 20, "退出房间");

        const msgBox = new Component.MsgBox(20, 100, "");
        this.msgBox = msgBox;

        this.addComponent(button1);
        this.addComponent(button2);
        this.addComponent(msgBox);
    }

    onUpdate() { }

    onDestroy() { }
}

Global.RoomView = RoomView;
  1. 将 game.js 替换为以下代码,导入 RoomView.js,并将启动页换成 RoomView(也就是实例化 RoomView)。

// 导入 MGOBE.js
import "./MGOBE.js";
// 获取 Room、Listener 对象
const { Room, Listener, ErrCode, ENUM } = MGOBE;

import * as Util from "./Util.js";
const Global = Util.Global;

// 导入页面
import "./view/MainView.js";
import "./view/RoomView.js";

// 启动页为 RoomView
new Global.RoomView();
  1. 编译后就能看到效果。如下图所示:
    房间页

GameView 游戏页

  1. 在 view 文件夹下,创建 GameView.js 文件,用于实现一个包含有一个按钮和一个文本框的页面。示例代码如下所示:

// 帧同步游戏页面
import * as Util from "../Util.js";
import BaseView from "./BaseView.js";
import Component from "../component/index.js";
const Global = Util.Global;

export default class GameView extends BaseView {

    msgBox;

    constructor() {
        super();
    }

    onInit() {
        const button = new Component.Button(20, 20, "结束帧同步");

        const msgBox = new Component.MsgBox(20, 100, "");
        this.msgBox = msgBox;

        this.addComponent(button);
        this.addComponent(msgBox);
    }

    onUpdate() { }

    onDestroy() { }
}

Global.GameView = GameView;
  1. 将 game.js 替换为以下代码,导入 GameView.js,并将启动页换成 GameView。

// 导入 MGOBE.js
import "./MGOBE.js";
// 获取 Room、Listener 对象
const { Room, Listener, ErrCode, ENUM } = MGOBE;

import * as Util from "./Util.js";
const Global = Util.Global;

// 导入页面
import "./view/MainView.js";
import "./view/RoomView.js";
import "./view/GameView.js";

// 启动页为 GameView
new Global.GameView();
  1. 编译后就能看到效果。如下图所示:
    房间页
目录