DOCSEARCHbyAlgolia
Submit Docs

WeChat Minigame Demo

repository·master·Indexed 41 days ago

https://github.com/wechat-miniprogram/minigame-demo

A comprehensive set of source code examples for WeChat Minigames. It demonstrates various APIs including rendering, networking, media, and Cloud Development integration, featuring examples for VoIP signatures, UnionID retrieval, and OpenAPI interactions such as template and subscription messages.

Tokens
76.5K
Snippets
282
Records
313
Agent score
52%

What's inside WeChat Minigame Demo

  1. Understand the project directory structure

    master

    The project is organized into the following main directories:

    • cloudfunction/: Contains Cloud Functions.
    • jsserver/: Handles data security validation (specifically for relationship chain interaction).
    • miniprogram/: The core directory for running the minigame.
      • js/api/: Contains API examples categorized by capability:
        • abilityOpen/: Open capabilities
        • interface/: Interface
        • rendering/: Rendering
        • facility/: Device
        • network/: Network
        • media/: Media
        • storage-fileSystem/: Data and File System
        • worker/: Multi-threading
        • AD/: Ad components
        • recommend/: Recommendation components
      • js/libs/: Contains PIXI.js
      • js/errMsg/: Error message directory
      • workers/: Multi-threading files
      • game.js: Main entry point
      • game.json: Configuration file

  2. Publish the code snippet

    master

    To publish or share the current project as a code snippet in the WeChat environment, follow these steps:

    1. Create a new snippet: In the menu bar at the top left, navigate to Project (项目) -> New Code Snippet (新建代码片段). This will copy the current project.
    2. Generate a share link: Use the Share (分享) function to generate a shareable link.

  5. Setup and configure the WeChat Minigame demo

    master

    To run this demo, follow these steps:

    1. Clone the repository: Use git to clone the source code.
    2. Import to WeChat DevTools: Open the project using WeChat DevTools.
    3. Configure AppID: When importing, you must provide your own WeChat Minigame AppID. Note: You cannot use a test AppID because the demo relies on Cloud Development features.
    4. Set up Cloud Development: Since this demo uses WeChat Cloud Development, you must follow the specific setup instructions in the CLOUD_README.md file to initialize the environment.
    git clone https://github.com/wechat-miniprogram/minigame-demo.git

  6. Configure network and preview settings

    master

    To ensure the demo functions correctly, observe the following requirements:

    • Network Functions: To enable network-related features, you must either configure valid domains in the WeChat Mini Program settings or enable "Debug Mode" (调试模式).
    • Mobile Preview: When previewing on a mobile device, ensure that "Code Protection during Upload" (上传时进行代码保护) is disabled in the "Details" (详情) settings.
    • UI Implementation: All view.js files in the directory are used strictly for UI drawing and are intended for internal use; developers do not need to modify them.

  9. Interact with the Create Group Task view

    master

    The module returns a view object that responds to specific status events. To drive the task creation flow, you must trigger these statuses (typically via the returned view's internal logic or UI components):

    • titleChange: Updates the taskTitle with the provided text.
    • allParticipant: Sets the task to include all group members (isUsingSpecify = false).
    • specifyParticipant: Triggers wx.selectGroupMembers to allow the user to pick specific participants.
    • publish: Executes the task publication flow, which includes validating the title, creating an activityId via Cloud Functions, and sharing the task to the group.

  10. How WebGLPrograms manages shader reuse

    master

    The WebGLPrograms class acts as a manager/cache for WebGLProgram instances. Instead of recompiling the same shader multiple times, it uses a code-based caching mechanism.

    The Acquisition Workflow

    1. Parameter Generation: getParameters() analyzes the material, lights, and scene state to generate a unique set of parameters (e.g., numDirLights, shadowMapEnabled, map).
    2. Code Generation: getProgramCode() assembles the final shader source string using the parameters and material defines.
    3. Acquisition: acquireProgram() checks if a program with the exact same generated code already exists.
      • If it exists, it increments a usedTimes counter.
      • If not, it creates a new WebGLProgram and adds it to the cache.
    4. Release: releaseProgram() decrements the usedTimes. When the count reaches zero, the program is removed from the cache and its WebGL resources are destroyed via program.destroy().

  11. Manage animation groups with AnimationObjectGroup

    master

    An AnimationObjectGroup is a collection of objects that share a single animation state. Instead of passing individual objects to an AnimationMixer, you can pass an AnimationObjectGroup as the root. This allows the mixer to treat the entire group as a single entity for caching and state purposes.

    Key behaviors:

    • Objects in the group appear as one object to the mixer.
    • You can add or remove objects from the group even while the mixer is running.
    • Limitation: All objects in the group must have compatible animated properties.
    • Limitation: A single property cannot be controlled by both a target group and a direct object simultaneously.
    // Example concept: Using a group as a root for an AnimationMixer
const group = new AnimationObjectGroup(mesh1, mesh2, mesh3);
const mixer = new AnimationMixer(group);
const action = mixer.clipAction(clip);
action.play();

  12. Share recorded game videos with createGameRecorderShareButton

    master

    Once a recording is stopped (and is at least 2 seconds long), you can use wx.createGameRecorderShareButton to allow users to share the video. The demo implementation configures the button with specific styles and a timeRange based on the actual recorded duration.

    Key Configuration for Share Button:

    • style: Object defining visual properties (e.g., backgroundColor, color).
    • icon: The icon to display.
    • text: The label for the button.
    • share: Configuration for the sharing action:
      • query: The query string for the share.
      • bgm: The background music file path.
      • timeRange: An array of arrays [[start, end]] defining the segment of the video to share.
    // Example configuration used by the demo
wx.createGameRecorderShareButton({
    style: {
        backgroundColor: '#ffffff',
        color: '#576b95',
        // ... other styles
    },
    icon: 'test',
    text: '分享',
    share: {
        query: 'test=test',
        bgm: 'js/api/abilityOpen/getGameRecorder/bgm.mp3',
        timeRange: [[0, writeTime]], // writeTime is the recorded duration
    },
});