Spring Boot + WeChat Mini Program in Practice: A Full Breakdown of Commercial Short Drama Platform Development

The short drama market keeps heating up. How can you quickly build a short drama mini program with a complete commercial loop? The open-source "WonderClip" project by Bilibili creator Lao Long offers a practical reference model. The project uses a Spring Boot backend and a WeChat Mini Program client, covering the entire workflow from content recommendation and paid unlocking to membership systems, and is often used as a graduation project or résumé project. Based on the video demo, this article breaks down its technical architecture and product logic.

Product Form: An Immersive Vertical-Swipe Drama Experience

The client homepage uses a full-screen vertical-swipe interaction, consistent with mainstream short drama products. Videos support landscape full-screen playback, and social actions such as double-tap like, comment, favorite, and share are all available. According to the creator's demo, the homepage recommendation feed is not simply sorted by time; it makes intelligent recommendations based on user behavior profiles (such as playback duration).

Although the recommendation algorithm is not as complex as those of leading platforms like Douyin, it already has basic personalization capabilities. The series detail page shows the total number of episodes and clearly marks paid/free status. The payment model is flexible: it supports single-episode purchase, full-series purchase, or combined purchase, with specific rules configured in the backend.

A user behavior profile refers to user characteristic tags abstracted from behavioral data during use (such as playback duration, completion rate, likes, favorites, purchase records, etc.). In recommendation systems, these profiles are used to calculate the match between users and content, thereby determining the ranking of the homepage recommendation feed. In short drama scenarios, playback duration and completion rate often reflect true preferences better than clicks, because users may be attracted by a cover but quickly swipe away. The recommendation logic demonstrated by Lao Long is a basic version: rule-based or simply weighted ranking based on behavior profiles, rather than a deep learning model. For graduation projects or prototype projects, this approach has low implementation cost and strong interpretability, and it can also demonstrate the basic idea of personalized recommendation.

Commercial Loop: Simulated Payment and Real Payment Integration

Paid unlocking is the core of short drama monetization. In the demo, after users click a paid episode, a payment option pops up, allowing them to choose single-episode or full-series purchase. The creator uses simulated payment in the development environment and explains that official launch requires integration with WeChat Mini Program Pay, also mentioning the mini program review process.

After payment is completed, unlocked episodes are no longer charged repeatedly; if the user chooses full-series purchase, subsequent episodes are automatically unlocked. In addition, the membership system offers three tiers: reading membership, quarterly membership, and annual membership. After purchase, all site content can be viewed freely.

WeChat Mini Program Pay is the payment capability officially provided by WeChat. Merchants must first complete the WeChat Pay merchant account application and mini program certification, then call the unified order API on the server to generate a prepaid transaction and return it to the mini program client to invoke payment. During development, simulated payment is often used, which skips real fund flows and directly changes the order status to paid, so that business processes such as purchase, unlocking, and membership can be quickly verified. Before official launch, it must be replaced with real payment, and processes such as payment callback signature verification, order idempotency, refunds, and reconciliation must be handled properly; otherwise, duplicate unlocking or fund anomalies may occur. In addition, when a mini program involves virtual payments, platform review rules also need attention, as some categories have additional requirements for paid content.

Technical Architecture: ES Search and Backend Configurability

The theater page displays all series and supports pagination. Filtering dimensions (such as tags like AR short dramas) can be dynamically configured in the backend without changing code. Rankings are generated based on play count. The search function is implemented with Elasticsearch and supports keyword highlighting.

The "My" page aggregates viewing history, favorites, likes, and order records, and supports WeChat authorization to obtain avatar and nickname. Overall, the backend is highly configurable, reducing the cost of operational adjustments.

Elasticsearch (ES) is a distributed search and analytics engine based on Lucene, commonly used in scenarios requiring full-text search, keyword highlighting, and relevance ranking. In a short drama mini program, if text data such as drama titles, descriptions, and tags are queried directly with database LIKE queries, both performance and matching quality are hard to satisfy. ES uses an inverted index to tokenize text and build indexes, enabling fast return of relevant results and supporting highlighting of matched keywords to improve search experience. For projects with small data volumes or low concurrency, ES is not mandatory; MySQL full-text indexes or simple tokenization solutions can be used first. However, introducing ES is closer to enterprise-level search architecture and facilitates later expansion.

Project Positioning: A Plus for Graduation Projects and Résumés

The creator explicitly states that the project can be used as a graduation project or résumé project and offers experience slots for early testers. For learners, the project covers common interview topics such as mini program client interaction, Spring Boot backend, ES search, and payment integration, and therefore has practical value.

Key Points

• Tech stack: Spring Boot + WeChat Mini Program + Elasticsearch
• Monetization: single-episode/full-series purchase, combined purchase, and three-tier membership subscription
• Recommendation mechanism: intelligent recommendation based on user behavior profiles (basic version)
• Backend capabilities: series tags, filtering dimensions, and payment rules are all configurable
• Use cases: graduation projects, résumé projects, short drama startup prototypes

One-line Summary

Bilibili creator open-sources the short drama mini program WonderClip, breaking down its technical architecture and commercial loop.

Paragraph Summary

This article introduces "WonderClip," an open-source short drama mini program project by Bilibili creator Lao Long. The project uses a Spring Boot backend and a WeChat Mini Program client and covers content recommendation, paid unlocking, and membership systems. The article discusses four aspects: product form, commercial loop, technical architecture, and project positioning. The homepage offers full-screen vertical-swipe drama viewing with double-tap like, comment, favorite, and share, and the recommendation feed provides basic personalization based on user behavior profiles. Payments support single-episode, full-series, and combined purchases; simulated payment is used in the development environment, while launch requires WeChat Pay integration. On the technical side, Elasticsearch is integrated for search highlighting, and the backend can configure series tags, filtering dimensions, and payment rules. The project is positioned as a graduation or résumé project and covers interview topics such as mini program interaction, backend development, search, and payment integration.