What is this?
WeUI for Mini Programs is a basic WXSS/CSS style library that matches WeChat's native visual look, designed by WeChat's own design team for WeChat web pages and Mini Programs.
WeUI for Mini Programs is a basic WXSS/CSS style library that matches WeChat's native visual look, designed by WeChat's own design team for WeChat web pages and Mini Programs.Is this a UI toolkit with logic, or just styles?It is a pure CSS/WXSS style library with no JS behavior — if you want ready-made interactive components with logic baked in, the README points you to the separate WeUI Mini Program component library instead.
It is a pure CSS/WXSS style library with no JS behavior — if you want ready-made interactive components with logic baked in, the README points you to the separate WeUI Mini Program component library instead.How do I add it to a Mini Program project?Reference dist/style/weui.wxss directly, or import just the widgets you need from dist/style/widget; matching wxml markup examples for each component live in dist/example.
Reference dist/style/weui.wxss directly, or import just the widgets you need from dist/style/widget; matching wxml markup examples for each component live in dist/example.Are there different unit versions I should know about?The default build uses px units. If your Mini Program needs the scalable rpx unit instead, there's a separate pre-built version in the dist-rpx-mode directory.
The default build uses px units. If your Mini Program needs the scalable rpx unit instead, there's a separate pre-built version in the dist-rpx-mode directory.What widgets does WeUI include?Button, cell, dialog, progress, toast, article, actionsheet and icon, among other common Mini Program UI elements.
Button, cell, dialog, progress, toast, article, actionsheet and icon, among other common Mini Program UI elements.How do I preview the components?Open the dist directory (not the whole repo) in WeChat's web developer tool to see the styled components in action.
Open the dist directory (not the whole repo) in WeChat's web developer tool to see the styled components in action.How do I enable dark mode?Add the attribute data-weui-theme='dark' to the root node of your page to switch WeUI into its dark theme.
Add the attribute data-weui-theme='dark' to the root node of your page to switch WeUI into its dark theme.Where can I see the visual design rules behind these styles?The weui-design reference documents the WeUI visual standards that this style library implements.
The weui-design reference documents the WeUI visual standards that this style library implements.What are similar projects?weui, coloruicss, vant-weapp, vux, materialize, chakra-ui, arc-library, galaxy
weui, coloruicss, vant-weapp, vux, materialize, chakra-ui, arc-library, galaxyWhich topics is it in?miniprogram, weixin, less, css3, ui-library, dark-mode, wechat, theme, component-library, design, css, china
miniprogram, weixin, less, css3, ui-library, dark-mode, wechat, theme, component-library, design, css, china