添加工具类方法

最近更新时间:2019-06-21 20:09:30

操作场景

本文档主要介绍如何添加工具类方法。

前提条件

已在根目录创建一个 Util.js 文件。

操作步骤

  1. 在 Util.js 文件中,添加如下代码,设置一个对象,用于保存一些常用属性和方法。

    // 模拟全局对象
    export const Global = {
     MainView: null,
     RoomView: null,
     GameView: null,
     room: null,
     ErrCode: null,
     ENUM: null,
     gameInfo: null,
     name: "",
    };
  2. 在 Util.js 文件中,添加如下代码,用于生成 openId,在实际项目中,需要使用微信平台的接口获取 openId。

    // 生成测试 openId
    export const mockOpenId = () => "openId_" + Math.ceil(Math.random() * 100) + (new Date()).getMilliseconds();
  3. 在 Util.js 文件中,添加如下代码,用于生成 userName,在实际项目中,需要使用微信平台的接口获取玩家昵称。

    // 生成测试 userName
    export const mockName = () => "user_" + Math.ceil(Math.random() * 100);
  4. 在 Util.js 文件中,添加如下代码,获得 canvas 对象上下文,以及画布宽度、高度信息。

    // 获得 canvas 上下文
    export const canvas = wx.createCanvas();
    export const ctx = canvas.getContext('2d');
    export const width = canvas.width;
    export const height = canvas.height;
  5. 在 Util.js 文件中,添加如下代码,准备基本的点击事件管理方法,例如,使用一个数组 clickHandlers 保存全部点击区域和点击回调,当监听到点击事件发生时,遍历该数组并执行点击回调。

     // 点击事件回调函数数组
     // Handler 结构: [id, [x1, y1, x2, y2], callback]
     let clickHandlers = [];
    
     // 开启点击事件监听
     wx.onTouchStart(function (e) {
         const {
             clientX,
             clientY
         } = e.touches[0];
    
         clickHandlers.forEach((handler) => {
    
             const x1 = handler[1][0];
             const y1 = handler[1][1];
             const x2 = handler[1][2];
             const y2 = handler[1][3];
    
             if (clientX > x1 && clientX < x2 && clientY > y1 && clientY < y2) {
                 handler[2] && handler[2]();
             }
         });
     });
    
     // 添加监听
     export const onClick = (id, area, callback) => clickHandlers.push([id, area, callback]);
    
     // 移除监听
     export const offClick = (id) => clickHandlers = clickHandlers.filter(handler => handler[0] !== id);