How to Build Scalable Interactive Mini‑Program Pages for E‑commerce Promotions

Overview

The 2020 "City Cash" interactive promotion highlighted major gaps between venue‑type pages, which focus on simple display and coupon collection, and interactive pages that behave like mini‑games with complex animations, drag‑and‑drop, and multiple UI layers. The team transitioned from a venue development team to an interactive team, documenting lessons learned.

Characteristics of Interactive Pages

Interactive pages require diverse interaction patterns (animations, drag, dialogs, toasts) and cannot rely on the reusable components used for venue pages. Extracting common functionality for reuse becomes a key challenge.

Page Layout and Layering

Unlike venue pages that scroll vertically, interactive pages stack elements along the Z‑axis. A five‑layer hierarchy is recommended:

Background layer – background image and page color.

Animation layer – main content, banners, feeds.

HUD layer – interactive buttons that trigger main or side tasks.

Dialog layer – transparent mask and various pop‑ups.

Toast layer – top‑most feedback messages and loading indicators.

When complex animations require more than five layers, the hierarchy can extend to ten or more. To avoid style conflicts, the team suggests z‑index ranges: 1‑100 for animation, 100‑1000 for HUD, and >1000 for dialogs.

Business Risks

Interactive pages often handle high‑value operations such as cash withdrawals, making bugs potentially costly. For example, a mis‑configured prize limit could expose the company to millions in claims. Therefore, amount validation and anti‑fraud measures (e.g., unique anti‑counterfeit codes) are essential.

Amount Validation Function

The team implemented a validation routine that checks the prize amount against configured limits and provides user‑friendly error messages. A simplified version looks like:

function validateAmount(amount, limit) {
  if (amount > limit) {
    return { ok: false, msg: 'Amount exceeds limit' };
  }
  if (amount < 0) {
    return { ok: false, msg: 'Invalid amount' };
  }
  return { ok: true };
}

Displaying a unique anti‑counterfeit code on the winning page further prevents screenshot fraud.

Modularization Strategy

Interactive features often span multiple UI components, making module extraction difficult. The team abstracted common functionalities—such as popup handling—into reusable modules.

Popup Queue Design

Interactive projects can contain dozens of popups (e.g., 54 in the cash‑splitting project). The solution includes:

Classification : Automatic popups (data‑driven) vs. manual popups (user‑triggered).

UI Model : Represent popups as a two‑dimensional array where the first dimension denotes layer and the second dimension holds a queue of popups for that layer.

Logic Specification : Define actions that modify the popup matrix, enforce a single active popup per time slice, and provide a runtime that interprets actions against business rules.

This model ensures deterministic ordering, easier debugging, and clear separation of UI and logic.

Withdrawal Module

The withdrawal flow is broken into three stages: pre‑withdrawal (button display), withdrawal processing (platform checks, authentication, API calls), and withdrawal detail view. Repeated development of this flow across projects caused high cost and instability.

Solution:

Encapsulate core withdrawal logic (WeChat version check, error code handling, API invocation) into a reusable hook.

Provide configurable UI components for entry, channel selection, and result display.

Allow business teams to configure success/failure presentations via server‑driven JSON.

This reduces development time by ~30% and improves system stability.

Interactive Development Engine

Based on accumulated experience, the team built a full‑stack interactive development engine comprising:

CLI Tool : Generates project scaffolds with selectable templates (e.g., TypeScript + Sass), handles EJS‑based file replacements, and supports multi‑environment variables.

Engineering Boilerplate : Upgraded to Babel 7 + Webpack 5 with thread‑loader, achieving ~44% faster builds; integrated ESLint, Prettier, Husky, and lint‑staged for code quality.

Component Library : Centralized business components (countdown, loading, toast, task widgets) in a private npm scope.

Function Library : Split into environment‑agnostic utilities (e.g., amount validation) and platform‑specific functions (e.g., native app navigation).

Mini‑Program Engineering and Transparent Layer

Developing the cash‑splitting mini‑program required integration with the host JD Earn Earn mini‑program. Two approaches were considered: building directly on the compiled host code or developing within the host source. The latter was chosen for safety and access to the host’s engineering features.

A “transparent layer” was introduced to automatically merge host code with the project code, handling file watching, less‑to‑wxss compilation, multi‑environment variables, and code merging via a Gulp‑based CLI (named imi‑cli). Developers work only on the business module; the transparent layer abstracts host setup.

Conclusion

By treating interactive pages as layered, modular systems and providing a dedicated CLI‑driven engineering pipeline, the team achieved higher code reuse, reduced development cycles, and mitigated business risks associated with high‑value interactive features.