创建页面

最近更新时间:2019-05-15 19:31:12

操作场景

一般帧同步游戏都包含至少三个页面:主页、房间、游戏页。
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;
  2. 在根目录的 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();
  3. 编译后即可在左侧模拟器中看到效果。如下图所示:
    主页

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;
  2. 将 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();
  3. 编译后就能看到效果。如下图所示:
    房间页

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;
  2. 将 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();
  3. 编译后就能看到效果。如下图所示:
    房间页