Mini-Game Solution

This topic explains how to use mini-games to connect device capabilities, user behavior, and incentive systems: which business goals they are suitable for, how common gameplay patterns can be designed, and which templates and cases you can reference.

Applicable Scenarios

In miniapp scenarios, consider the mini-game solution if you need to:

Increase device usage frequency through gamified tasks, allowing users to connect devices, use features, check in, or share during interactions.
Combine game achievements, leaderboards, and lotteries with coupons, entitlements, and physical rewards to support marketing campaigns and brand exposure.
Improve long-term retention and reactivation through pet growth, badges, consecutive challenges, season rankings, and similar mechanisms.

Use the mini-game solution to build a closed loop around "device - game - user".

Typical Business Scenarios

Scenario	Goal	Gameplay direction
Device interaction	Link device capabilities with game feedback	Steps exchanged for energy, heart rate triggering challenges, air conditioner energy savings earning green points, robot vacuum runs exchanged for items, and speaker sound or lighting effects triggered after game completion
Marketing amplification	Use mini-games as campaign traffic entry points to reduce acquisition costs and increase brand exposure	Game achievements redeemed for product or service coupons, friend invitations for team challenges, leaderboard rewards, and lotteries distributing coupons or entitlements
User retention	Extend the user lifecycle through gamification	Device onboarding games for new users, daily challenges and season rankings for active users, reactivation tasks for dormant users, digital pets, and commemorative badges

How It Works

Mini-games run inside a <web-view> container on a miniapp page. The host page loads the WebView, prepares the runtime environment and initial data, and communicates with the WebView through a messaging mechanism. The WebView side focuses on rendering and game logic, and requests host capabilities through messages when needed.

Gameplay Cases

See the case page for details:

Development Guide

The mini-game solution uses the miniapp <web-view> capability to establish a messaging channel between the WebView (game) and the host page (app or miniapp page). This enables two-way communication and allows the host side to call miniapp APIs on behalf of the WebView.

The platform provides @ray-js/mini-game-sdk for developers. For details, see MiniGameSDK.

An out-of-the-box template project is also available. See Mini-Game Template.

Detailed Development Documentation