Cross‑Platform Mini‑Program Mastery: Lessons from Alibaba’s Ticketing App

Introduction

In 2019 Alibaba Entertainment's ticketing team (Taopiaopiao) tackled cross‑platform mini‑program development across all major platforms, documenting technical evolution and difference‑control strategies to help developers avoid pitfalls.

Alipay Mini‑Program

Alipay mini‑programs focus on ticket purchasing and tool‑type features. Key recommendations include:

Avoid using web-view in core business due to slow initialization, network sensitivity, and poor performance.

Adapt city selection components using my.chooseCity, my.onLocatedComplete, and my.setLocatedCity to bridge Alipay's city system with the app's own.

Enable immersive transparent navigation by setting transparentTitle to auto in page.json and calculating heights via my.getSystemInfo.

Handle tabBar styling and red‑dot badges, re‑applying styles on app.onShow after relaunch.

Development Tips for Alipay

Do not use tnpm for dependencies; it has symlink issues.

Separate devDependencies from dependencies to reduce package size.

Be cautious with window configurations like transparent and pullRefresh as they may be inherited across pages.

Web‑view pages lose pull‑to‑refresh and resume features.

Avoid using sticky on Android versions below 5.0.

Baidu Mini‑Program

Baidu mini‑programs resemble WeChat mini‑programs but emphasize search‑driven entry. Development steps include:

Use .swan for HTML‑like markup, .css for styles, .js for logic, and .json for component registration.

When using template, wrap data with triple braces {{{item}}} to avoid injection errors.

Component observers should not start with an underscore to prevent recursive calls.

For scroll‑view issues on iOS, avoid fixed positioning on multiple scrollable areas.

Implement login flows: DSL page login obtains a credential token, while WebView pages require server‑side cookie synchronization.

ByteDance Mini‑Program

ByteDance mini‑programs integrate tightly with content platforms like Toutiao and Douyin, offering multiple entry points (feed, search, sharing, etc.). Development follows standard front‑end practices with .json, .ttml, .ttss, and .js files.

Quick‑App Cards

Quick‑app cards provide widget‑style experiences on device negative‑screen areas. Key points:

Cards must be declared in manifest.json under router.widgets with proper key paths.

Specify required system APIs in features.

Vivo cards require separate projects and cannot rely on this.$app.

OPPO service cards need token‑based user binding and server‑side push to trigger display.

Cross‑Platform Evolution

The team progressed from native DSL development (large bundles, no NPM) to webpack‑based builds for Baidu, and finally adopted Taro for multi‑platform support, enabling gradual migration and shared business logic.

Handling Platform Differences

Separate page outputs per platform.

Use polymorphic components that expose a unified interface.

Control simple logic differences with environment variables.

Maintenance Strategies

Write unit and snapshot tests with a mock API library.

Adopt a commit‑message convention to track platform‑specific changes.

Use git hooks for linting and test enforcement.

Prioritize manual regression per platform rather than exhaustive E2E tests due to mini‑program constraints.

Outlook

Future work includes standardizing mini‑program specifications and improving tooling for cross‑platform development.