Mini Program Development
Mini Program development in MiniDev Studio has two independent capability tracks — get them straight first:
| Track | What it is | Form | Usage |
|---|---|---|---|
Web UI components (minidev-components) | m-* visual components (button, input, swiper…) | Web Component tags | Write <m-button> directly in your template — no import / registration |
Bridge SDK (mini-sdk) | JS APIs that call native capabilities (Toast, routing, storage, device…) | mini.* functions | import mini from 'mini-sdk', then call mini.showToast() |
In one sentence: use
m-*tags to build the UI, andmini.*functions to call capabilities. The two do not depend on each other.
Design & conventions
- Design language: Material Design 3 (MD3), with a complete set of built-in color, radius, typography, and motion tokens.
- Framework-agnostic: Vue, React, and plain HTML are written the same way; component event data is always on
e.detail. - Size units: supports
rpx(responsive pixels, 750rpx = screen width), converted automatically at compile time to adapt to different screens.
Components · Web UI
- Basics: View · Text · Icon · Image · Button · Divider
- Form: Input · Textarea · Switch · Slider · Picker · Radio · Checkbox · Label · Form
- Layout: Main · ScrollView · Swiper
- Display: Progress · Circle · Loading · Skeleton · Steps · Collapse · Video
- Feedback: Popup · Calendar · Cascader
Bridge SDK
- UI & interaction: UI Controls · Lifecycle
- Data & device: Storage · Clipboard · Device · Network
- App & business: Router · App · Auth · Analytics · Vehicle · Component · Map
Advanced guides
Runtime model · Call style & environment detection · Error handling · Local mock · app.json configuration
If you're new, start with Getting Started.