Mini Program · mini_program
Runner Course
A runner training course mini app with course lists, collapsible chapters, learning progress, previews, lesson playback, and paid-content conversion.
About this template
Overview
A real WeChat / Alipay / Douyin mini-program template — uni-app + Vue 3 + TS, one codebase compiles to 10+ targets, full pages + admin. 10 courses / 110+ lessons / collapsible chapters / progress bar / preview / lesson player. Terracotta warm tones, paired with J Education.
Why this template
Key Highlights
HIGHLIGHT 01
uni-app cross-platformOne Vue 3 + TS codebase compiles to 10+ targets.
HIGHLIGHT 02
Native bottom tab navigationWeChat-style 4-tab bottom nav with active state.
HIGHLIGHT 03
Persisted local storageuni.setStorageSync for cross-end state.
HIGHLIGHT 04
Real admin pagesNot just frontend — actual record management UI.
What's Inside
Features Grid
Tab Bar Nav4-5 tabs WeChat-style
Login + ProfilePhone / WeChat / Apple ID
Core Flow PagesBrowse → detail → checkout
Admin BackendManage records + settings
Storageuni.setStorageSync persistence
Theme VariablesBrand colors via CSS vars
Multi-end BuildWeChat / Alipay / Douyin / H5
Splash + BootLoading + app initialization
Perfect For
Use cases this template fits
WeChat mini-programsAlipay mini-programsDouyin / TikTok mini-programsMulti-end mobile apps
Tech Stack
Built with
uni-appVue 3TypeScript微信小程序H5