Building a Cross-Platform Secret-Code Red Envelope Feature for Taobao & Tmall

Overview

This article describes the design and implementation of a secret‑code red‑envelope activity that ran during Double 11 and how to recreate it after the event using a cross‑terminal solution for Taobao and Tmall.

Requirements

The activity includes two types of red envelopes: a “secret‑code” envelope triggered by a user‑entered keyword and a “keyword” envelope that plays an animation before the draw. The solution must work on iOS and Android, on Phone, Pad and PC, and be integrated into native apps and web pages.

Cross‑Terminal Adaptation

Phone pages use the lib.flexible layout and a px2rem toolchain (gulp plugin, webpack loader, postcss plugin). PC pages are delivered as KISSY modules compatible with older IE. Pad pages lack dedicated layout support, so the Pad version is built on top of the PC module with additional styling and functionality.

Integration

Phone & Pad

Both platforms use the native poplayer component to overlay an H5 page on the current native screen. Poplayer can be transparent, allowing click‑through, and enables rapid iteration of the activity UI.

PC

On PC the activity is exposed as a KISSY module that external pages (home, search results) can import. The module’s dependency graph is shown below.

After importing the module, the search flow follows the illustrated steps.

Final Effects

Examples of the activity on different terminals:

Phone

Pad

PC

Conclusion

The project demonstrates how a seemingly simple promotional feature can involve multiple front‑end technologies and cross‑terminal challenges, and how a clear technical solution can be documented and reused.