Skip to main content

Mini Games Quick Start

Through this guide, you will learn how to use cloud development in mini games, including core features such as databases, cloud storage, and cloud functions, to quickly build mini games with backend capabilities.

Preparation​

Before you begin, ensure that you have completed the following preparations:

  1. Enable Cloud Development Environment: [Enable Cloud Development Environment](/quick-start/create-env#Method 1: WeChat Developer Tools (Recommended for Mini Program Developers))
  2. Development Tools: Download and install the WeChat Developer Tools
  3. Mini Games Account: Register for WeChat Mini Games, obtain the AppID for the Mini Games
  4. Game Engines: Supports mainstream game engines such as Cocos Creator, Laya, and Egret.

Step 1: Create a Mini Games Project​

  1. Open the WeChat Developer Tools and log in using WeChat scan.

  2. Create a new Mini Games project:

    • Enter your Mini Game AppID
    • Select the project storage directory
    • Select "WeChat CloudBase" for the backend service
    • Check "Agree to the CloudBase Service Terms"

⚠️ Note: The backend service must select "WeChat CloudBase" to use the cloud development feature.

Step 3: Initialize the CloudBase Environment​

Initialize CloudBase in game.js:

// game.js
// Initialize CloudBase
if (!wx.cloud) {
    console.error('Please use base library version 2.2.3 or later to utilize cloud capabilities');
} else {
    wx.cloud.init({
        env: env: 'your-env-id', // Replace with your environment ID
        traceUser: true,
    });
}

// Game's main logic
class Game {
    constructor() {
        this.init();
    }

    init() {
        // Game initialization logic
        console.log('Game initialization completed');
        this.loadGameData();
    }

    // Load game data
    async loadGameData() {
        try {
            const db = wx.cloud.database();
            const result = await db.collection('gameData').get();
            console.log('Game data loaded successfully', result.data);
        } catch (error) {
            console.error('Game data failed to load', error);
        }
    }
}

// Start the game
new Game();

Step 3: Integrate the game engine​

Cocos Creator Integration​

  1. Install the CloudBase plugin:

    • Open "Extensions" > "Extension Store" in Cocos Creator
    • Search for and install the "WeChat Mini Game Cloud Development" plugin

  2. Configure CloudBase:

// In Cocos Creator scripts
cc.Class({
    extends: cc.Component,

    onLoad() {
        // Initialize CloudBase
        if (typeof wx !== 'undefined' && wx.cloud) {
            wx.cloud.init({
                env: 'your-env-id'
            });
        }
    },

    // Save game score
    async saveScore(score) {
        try {
            const db = wx.cloud.database();
            await db.collection('scores').add({
                data: {
                    score: score,
                    timestamp: new Date(),
                    openid: openid: '{openid}' // Auto-filled
                }
            });
            console.log('Score saved successfully');
        } catch (error) {
            console.error('Score save failed', error);
        }
    }
});

Step 4: Implement core game features​

User System​

// User Login and Data Management
class UserManager {
    constructor() {
        this.userInfo = null;
        this.db = wx.cloud.database();
    }

    // Log in
    async login() {
        try {
            // Obtain user information
            const loginResult = await wx.cloud.callFunction({
                name: 'login'
            });

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

        } catch (error) {
            console.error('Login failed', error);
        }
    }

    // Initialize user data
    async initUserData() {
        try {
            const userCollection = this.db.collection('users');
            const userDoc = await userCollection.doc(this.userInfo.openid).get();

            if (userDoc.data.length === 0) {
                // New user, create initial data
                await userCollection.add({
                    data: {
                        _id: this.userInfo.openid,
                        nickname: nickname: 'New player',
                        level: 1,
                        score: 0,
                        coins: 100,
                        createTime: new Date()
                    }
                });
            }
        } catch (error) {
            console.error('User data initialization failed', error);
        }
    }
}

Leaderboard System​

// Leaderboard Management
class LeaderboardManager {
    constructor() {
        this.db = wx.cloud.database();
    }

    // Submit score
    async submitScore(score) {
        try {
            await this.db.collection('leaderboard').add({
                data: {
                    score: score,
                    timestamp: new Date(),
                    openid: openid: '{openid}' // Auto-filled
                }
            });

            console.log('Score submitted successfully');
        } catch (error) {
            console.error('Score submission failed', error);
        }
    }

    // Get leaderboard
    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('Failed to obtain leaderboard', error);
            return [];
        }
    }
}

Step 5: Experience CloudBase Features​

After creating the project, you can experience the following features:

  • Database: Stores game data, user information, leaderboard, etc.
  • Cloud Storage: Upload game screenshots, audio resources, etc.
  • Cloud Function: Implements game logic, data processing, and third-party API calls

Advanced Guides​