WeUI for 小程序 (WeUI for Mini Programs)

When using WeUI for 小程序, replace standard HTML elements with their Mini Program equivalents:

Icons

Use the Mini Program <icon> component. Because the native icon component has a font-size: 0 property, you may need to use specific utility classes to control margins/spacing, such as .weui-icon-radio or .weui-icon-checkbox_circle.

Buttons

Use the Mini Program <button> component. The .weui-btn class is used to control spacing, while the button type (e.g., primary) is set via the type attribute.

Comparison:

• Web: <a class="weui-btn weui-btn_primary">...</a>
• Mini Program: <button class="weui-btn" type="primary">...</button>

<!-- Button Example -->
<button class="weui-btn" type="primary">页面主操作 Normal</button>

WeUI for 小程序 is a pure UI library providing styles that match the native WeChat visual experience. It includes elements like button, cell, dialog, progress, toast, article, actionsheet, and icon.

To use the library:

1. Import Styles: You can reference the global style file at dist/style/weui.wxss or import individual component styles located in dist/style/widget/.
2. Implement Structure: For the required WXML structure of each component, refer to the examples provided in the dist/example/ directory.

<!-- Reference global styles in your .wxss file -->
@import '/path/to/weui-wxss/dist/style/weui.wxss';

Due to differences in how the virtual keyboard affects layout height in Mini Programs, standard .weui-input implementations require an additional modifier class on the parent cell to ensure correct spacing and alignment.

Requirement: When using an <input class="weui-input" />, you must add the .weui-cell_input class to the parent <view class="weui-cell"> element.

<view class="weui-cell weui-cell_input">
    <view class="weui-cell__bd">
        <input class="weui-input" />
    </view>
</view>

To enable the dark theme, add the data-weui-theme="dark" attribute to the root node of your component or page.

<view data-weui-theme="dark">
    <!-- Your content here -->
</view>

In standard WeUI, :active pseudo-classes are used for click states. In Mini Programs, you should use the hover-class attribute of the <navigator> component to trigger the .weui-cell_active class.

Implementation: Apply hover-class="weui-cell_active" to your <navigator> component to handle the visual feedback for cell access items.

<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__bd">cell standard</view>
    <view class="weui-cell__ft weui-cell__ft_with-access">说明文字</view>
</navigator>

The project.private.config.json file is used to define private project configurations that override the standard project.config.json. Settings defined here are intended for local development environments and are prioritized over the main configuration file.

In this repository, the setting object includes:

• compileHotReLoad: A boolean flag that enables hot reloading during compilation to speed up the development workflow.

{
  "projectname": "weui-wxss",
  "setting": {
    "compileHotReLoad": true
  }
}