Getting Started with WeUI‑WXSS for WeChat Mini Programs

Overview

WeUI‑WXSS is an official UI component library created by the WeChat design team for WeChat Mini Programs. It extends the WeUI web style definitions to match the native visual experience of the Mini Program platform.

Provided Components

The library ships with a set of basic UI elements, each implemented as a WXSS style file and a corresponding WXML markup template:

button

cell

dialog

progress

toast

article

actionsheet

icon

Visual Specification

All visual guidelines are maintained in the weui-design repository, ensuring that component styles follow the official WeChat design specifications.

Previewing the Library

Open the dist directory with the WeChat Web Developer Tools. The directory contains example pages that demonstrate each component in a running Mini Program environment.

Usage

Component markup and example WXML files are located under dist/example/. Review these files to see the required structure for each component.

To apply the full style set globally, import the main stylesheet in app.wxss (or any top‑level WXSS file): @import "./dist/style/weui.wxss"; For a smaller bundle, import only the needed widget styles. Each widget has its own WXSS file under dist/style/widget/. Example for the button component:

@import "./dist/style/widget/button.wxss";

License

The project is released under the MIT License (http://opensource.org/licenses/MIT), permitting free use, modification, and distribution.

Contribution

Contributors can file issues or submit pull requests to the repository to fix bugs, add components, or improve compliance with the design guidelines.