How Tencent Scaled Online Education with Mini‑Program Architecture and Engineering

1. Tencent Online Education Mini‑Program Matrix

Three main businesses are introduced: Tencent Classroom for adult vocational learning, Qiezi Tutoring for K12, and ABCmouse for children's English. Each product supports PC Web, client, H5, and App, and the aim is to increase WeChat traffic by launching a suite of mini‑programs.

2. Architecture Design and Engineering Exploration

We compared major mini‑program frameworks (taro, wepy, mpvue, native) and chose the native framework because it offers the fastest access to new features, has limited multi‑platform reuse needs, and allows direct performance tuning via native APIs.

CSS preprocessing : postcss is used to write styles with nesting, mixins, variables, and then compile to wxss. Plugins such as postcss‑url and postcss‑font‑base64 handle background images and fonts.

Data management : westore is used for state handling.

Build : gulp handles image compression and postcss compilation. Gulp is preferred over webpack because it aligns with the official mini‑program scaffolding and offers higher development efficiency.

Directory conventions : after introducing npm package management, a miniprogram folder is created as the root of mini‑program code to separate it from other node_modules.

Code style : eslint, stylelint, prettier, and commitizen are used together with git hooks to enforce linting, formatting, and conventional commits.

The generator generator-imweb-wxapp automates scaffolding and is open‑sourced.

3. Mini‑Program Development Practice

Audio/Video : Live streaming uses the native live‑player component supporting RTMP and HTTP‑FLV for low latency. Limitations include missing fullscreen button and iOS event issues, which are mitigated in newer base libraries.

For even lower latency, WebRTC rooms can be used when a Tencent Cloud WebRTC service is enabled.

Recording : Encrypted HLS is played via the standard video tag. Authentication is handled by appending a token to the m3u8 URL, which the backend validates before returning the decryption key.

Automated Release : A CLI script checks for the latest main‑branch code, verifies node_modules versions, runs npm build via the mini‑program devtools, extracts the version from package.json, uses git logs as release notes, and uploads the package.

Third‑Party Platform : By becoming a WeChat third‑party platform, we can manage dozens of institution mini‑programs, generate their app.json from templates, and publish them automatically.

4. Performance Optimization

Startup time is broken down into initialization, code download, code execution, and page rendering. Download time dominates; we introduced sub‑packages to split the app.

After splitting, the main package contains common modules and three tab pages, while each feature page resides in a 300‑500 KB sub‑package. Download time dropped by ~500 ms, reducing total startup to 3.2 s.

Pre‑loading sub‑packages via preloadRule further improves the experience when navigating to detail pages.

Rendering cost is tied to setData calls. Data larger than 64 KB causes exponential latency. Guidelines: batch updates, keep payload < 64 KB, avoid storing unrelated data in data, and minimize event bindings.

5. Common Component Library

We built a reusable request component that wraps wx.request, stores login cookies in storage, and injects them into request headers. Plugin architecture enables features like automatic loading indicators.

6. QQ Mini‑Program Overview

QQ mini‑programs share ~95 % API compatibility with WeChat, use the qq. prefix, and run on a nw.js‑based devtool. Differences include lack of live-player, no webview support, and limited automated testing.

API prefix: qq.getSystemInfoSync No webview component

Supports HTTP link activation

Cannot use live-player or live-pusher Sharing to QQ Space is available

Conclusion

The rapid growth of mini‑program ecosystems (WeChat, QQ, Alipay, Baidu) calls for a unified API standard. The W3C Chinese Interest Group is already discussing specifications, indicating a move toward industry‑wide standardization.