小游戏快速开始

通过本指南，您将学会如何在小游戏中使用云开发，包括云数据库、云存储和云函数等核心功能，快速构建具备后端能力的小游戏。

🎮 微信小游戏

📋 准备工作

在开始之前，请确保您已完成以下准备：

开发工具：下载并安装微信开发者工具
小游戏账号：注册微信小游戏，获取小游戏的 AppID
基础库版本：确保小游戏基础库版本 ≥ 2.2.3
游戏引擎：支持 Cocos Creator、Laya、白鹭等主流游戏引擎

🚀 第 1 步：创建小游戏项目

打开微信开发者工具，使用微信扫码登录
新建小游戏项目：
- 填入您的小游戏 AppID
- 选择项目存放目录

☁️ 第 2 步：开通云开发环境

按照开通云开发环境步骤进行开通

💻 第 3 步：初始化云开发

在 game.js 中初始化云开发：

// game.js
// 初始化云开发
if (!wx.cloud) {
    console.error('请使用 2.2.3 或以上的基础库以使用云能力');
} else {
    wx.cloud.init({
        env: 'your-env-id', // 替换为您的环境 ID
        traceUser: true,
    });
}

// 游戏主逻辑
class Game {
    constructor() {
        this.init();
    }

    init() {
        // 游戏初始化逻辑
        console.log('游戏初始化完成');
        this.loadGameData();
    }

    // 加载游戏数据
    async loadGameData() {
        try {
            const db = wx.cloud.database();
            const result = await db.collection('gameData').get();
            console.log('游戏数据加载成功', result.data);
        } catch (error) {
            console.error('游戏数据加载失败', error);
        }
    }
}

// 启动游戏
new Game();

🎯 第 4 步：集成游戏引擎

Cocos Creator 集成

安装云开发插件：
- 在 Cocos Creator 中打开「扩展」>「扩展商店」
- 搜索并安装「微信小游戏云开发」插件
配置云开发：

// 在 Cocos Creator 脚本中
cc.Class({
    extends: cc.Component,

    onLoad() {
        // 初始化云开发
        if (typeof wx !== 'undefined' && wx.cloud) {
            wx.cloud.init({
                env: 'your-env-id'
            });
        }
    },

    // 保存游戏分数
    async saveScore(score) {
        try {
            const db = wx.cloud.database();
            await db.collection('scores').add({
                data: {
                    score: score,
                    timestamp: new Date(),
                    openid: '{openid}' // 自动填充
                }
            });
            console.log('分数保存成功');
        } catch (error) {
            console.error('分数保存失败', error);
        }
    }
});

🎮 第 5 步：实现核心游戏功能

用户系统

// 用户登录和数据管理
class UserManager {
    constructor() {
        this.userInfo = null;
        this.db = wx.cloud.database();
    }

    // 用户登录
    async login() {
        try {
            // 获取用户信息
            const loginResult = await wx.cloud.callFunction({
                name: 'login'
            });

            this.userInfo = loginResult.result;
            await this.initUserData();

        } catch (error) {
            console.error('登录失败', error);
        }
    }

    // 初始化用户数据
    async initUserData() {
        try {
            const userCollection = this.db.collection('users');
            const userDoc = await userCollection.doc(this.userInfo.openid).get();

            if (userDoc.data.length === 0) {
                // 新用户，创建初始数据
                await userCollection.add({
                    data: {
                        _id: this.userInfo.openid,
                        nickname: '新玩家',
                        level: 1,
                        score: 0,
                        coins: 100,
                        createTime: new Date()
                    }
                });
            }
        } catch (error) {
            console.error('用户数据初始化失败', error);
        }
    }
}

排行榜系统

// 排行榜管理
class LeaderboardManager {
    constructor() {
        this.db = wx.cloud.database();
    }

    // 提交分数
    async submitScore(score) {
        try {
            await this.db.collection('leaderboard').add({
                data: {
                    score: score,
                    timestamp: new Date(),
                    openid: '{openid}' // 自动填充
                }
            });

            console.log('分数提交成功');
        } catch (error) {
            console.error('分数提交失败', error);
        }
    }

    // 获取排行榜
    async getLeaderboard(limit = 10) {
        try {
            const result = await this.db.collection('leaderboard')
                .orderBy('score', 'desc')
                .limit(limit)
                .get();

            return result.data;
        } catch (error) {
            console.error('获取排行榜失败', error);
            return [];
        }
    }
}

🎯 第 6 步：体验云开发功能

创建完项目后，您可以体验以下功能：

云数据库：存储游戏数据、用户信息、排行榜等
云存储：上传游戏截图、音频资源等
云函数：实现游戏逻辑、数据处理、第三方API调用

📚 深入学习

🎮 QQ 小游戏

📋 准备工作

开发工具：下载并安装 QQ 小游戏开发者工具
QQ 小游戏账号：注册 QQ 小游戏开发者账号
腾讯云账号：需要与腾讯云账号进行绑定

🚀 快速开始

创建项目：
- 打开 QQ 小游戏开发者工具
- 创建新的小游戏项目
- 选择云开发模板
开通云开发：
- 通过 QQ 小游戏 IDE 访问云开发控制台
- 按照提示开通云开发环境
账号绑定：
- 系统会自动引导您完成 QQ 小游戏账户与腾讯云账户的绑定
- 绑定后即可使用完整的云开发能力

📚 学习资源

QQ 小游戏官方文档

账号绑定说明

为方便开发者在 QQ 小游戏中使用云开发，系统会自动建立以下绑定关系：

在「身份提供商」中建立身份提供商「TcbSamlProvider_qq」
在「角色」中建立角色「TcbSamlRole_qq」

重要：上述信息是您在 QQ 小游戏中使用云开发的必要信息，请不要删除。

🎮 完整游戏示例：云端飞机大战

让我们通过一个完整的飞机大战游戏示例，展示如何在小游戏中使用云开发的各项功能。

当前案例以微信小游戏模版为基础进行开发

游戏功能特性

实时排行榜：使用云数据库存储和展示玩家分数

核心代码实现

1. 排行榜主逻辑（这里只展示和数据的交互逻辑）

// js/runtime/leaderboard.js
import Emitter from '../libs/tinyemitter';
import {
    SCREEN_WIDTH,
    SCREEN_HEIGHT
} from '../render';
import leaderboardService from '../../services/leaderboard';

/**
 * 排行榜UI组件
 * 负责排行榜的显示和交互
 */
export default class Leaderboard extends Emitter {
    constructor() {
        super();

        this.leaderboardData = []; // 排行榜数据
        this.loading = false; // 是否正在加载
        this.playerRank = 0; // 玩家当前排名
    }

    /**
     * 加载排行榜数据
     */
    async loadLeaderboard() {
        try {
            const result = await leaderboardService.getLeaderboard(10);
            if (result.success) {
                this.leaderboardData = result.data;
            } else {
                console.error('加载排行榜失败:', result.error);
                this.leaderboardData = [];
            }
        } catch (error) {
            console.error('加载排行榜异常:', error);
            this.leaderboardData = [];
        }
    }

    /**
     * 加载玩家排名
     */
    async loadPlayerRank(score) {
        try {
            const result = await leaderboardService.getPlayerRank(score);
            if (result.success) {
                this.playerRank = result.rank;
            }
        } catch (error) {
            console.error('获取排名失败:', error);
            this.playerRank = 0;
        }
    }

    /**
     * 渲染排行榜
     */
    render(ctx) {
        if (!this.visible) return;

        // 绘制UI
        this.render(ctx);
    }
}

2. 排行榜Service层

// services/leaderboard.js - 排行榜数据管理

class LeaderboardService {
    constructor() {
        this.db = wx.cloud.database();
        this.collection = this.db.collection('leaderboard');
    }

    /**
     * 提交玩家分数
     * @param {Object} scoreData - 分数数据
     * @param {string} scoreData.nickname - 玩家昵称
     * @param {number} scoreData.score - 玩家分数
     * @param {string} scoreData.avatar - 玩家头像URL（可选）
     * @returns {Promise} 提交结果
     */
    async submitScore(scoreData) {
        try {
            const {
                nickname,
                score,
                avatar = ''
            } = scoreData;

            // 验证数据
            if (!nickname || typeof score !== 'number') {
                throw new Error('昵称和分数不能为空');
            }

            // 准备插入的数据
            const data = {
                nickname,
                score,
                avatar,
                timestamp: new Date().toISOString(),
                createTime: new Date(),
            };

            const result = await this.collection.add({
                data,
            });

            return {
                success: true,
                data: result,
                message: '分数提交成功',
            };
        } catch (error) {
            console.error('提交分数失败:', error);
            return {
                success: false,
                error: error.message,
            };
        }
    }

    /**
     * 获取排行榜数据
     * @param {number} limit - 获取的记录数量，默认10条
     * @returns {Promise} 排行榜数据
     */
    async getLeaderboard(limit = 10) {
        try {
            const result = await this.collection
                .orderBy('score', 'desc') // 按分数降序排列
                .limit(limit)
                .get();

            return {
                success: true,
                data: result.data,
                total: result.data.length,
            };
        } catch (error) {
            console.error('获取排行榜失败:', error);
            return {
                success: false,
                error: error.message,
                data: [],
            };
        }
    }

    /**
     * 获取玩家排名
     * @param {number} score - 玩家分数
     * @returns {Promise} 排名信息
     */
    async getPlayerRank(score) {
        try {
            // 获取比当前分数高的记录数量
            const result = await this.collection
                .where({
                    score: this.db.command.gt(score),
                })
                .count();

            const rank = result.total + 1; // 排名从1开始

            return {
                success: true,
                rank,
                message: `当前排名第${rank}位`,
            };
        } catch (error) {
            console.error('获取排名失败:', error);
            return {
                success: false,
                error: error.message,
                rank: 0,
            };
        }
    }
}

部署和测试

创建数据库集合：
- leaderboard ：存储排行榜信息
- users ：存储用户信息
设置数据库权限：

{
  "read": "auth != null",
  "write": "auth != null && doc._openid == auth.openid"
}

🔗 相关资源

示例项目

小游戏云开发示例

开发工具

学习文档

常见问题解答

🎉 开始您的小游戏云开发之旅！ 选择适合您的平台和游戏引擎，快速构建功能强大的云端小游戏。

小游戏快速开始

🎮 微信小游戏​

📋 准备工作​

🚀 第 1 步：创建小游戏项目​

☁️ 第 2 步：开通云开发环境​

💻 第 3 步：初始化云开发​

🎯 第 4 步：集成游戏引擎​

Cocos Creator 集成​

🎮 第 5 步：实现核心游戏功能​

用户系统​

排行榜系统​

🎯 第 6 步：体验云开发功能​

📚 深入学习​

🎮 QQ 小游戏​

📋 准备工作​

🚀 快速开始​

📚 学习资源​

🎮 完整游戏示例：云端飞机大战​

游戏功能特性​

核心代码实现​

1. 排行榜主逻辑（这里只展示和数据的交互逻辑）​

2. 排行榜Service层​

部署和测试​

🔗 相关资源​

示例项目​

开发工具​

学习文档​

🎮 微信小游戏

📋 准备工作

🚀 第 1 步：创建小游戏项目

☁️ 第 2 步：开通云开发环境

💻 第 3 步：初始化云开发

🎯 第 4 步：集成游戏引擎

Cocos Creator 集成

🎮 第 5 步：实现核心游戏功能

用户系统

排行榜系统

🎯 第 6 步：体验云开发功能

📚 深入学习

🎮 QQ 小游戏

📋 准备工作

🚀 快速开始

📚 学习资源

🎮 完整游戏示例：云端飞机大战

游戏功能特性

核心代码实现

1. 排行榜主逻辑（这里只展示和数据的交互逻辑）

2. 排行榜Service层

部署和测试

🔗 相关资源

示例项目

开发工具

学习文档