微信小程序表单开发实战：weui-wxss 组件库完整教程
【免费下载链接】weui-wxssA UI library by WeChat official design team, includes the most useful widgets/modules.项目地址: https://gitcode.com/gh_mirrors/we/weui-wxss
写过微信小程序表单页的同学大概都有过这种经历：输入框、单选、开关、报错提示一个个手工调样式，深色模式下又要重新对一遍颜色。weui-wxss 是微信官方设计团队开源的 UI 组件库，专为微信小程序设计，内置的表单控件都遵循微信视觉规范。用它，一屏表单的样式代码基本可以省掉。
把 weui-wxss 集成进你的小程序工程
集成过程分三步：先克隆仓库，再把编译好的样式复制到项目，最后在 app.wxss 里引入主样式文件。
git clone https://gitcode.com/gh_mirrors/we/weui-wxss克隆后打开 dist-rpx-mode/style/，里面是编译好的 rpx 单位样式。把整个 style 目录（连同 weui.wxss 主文件）拷进小程序工程，然后在 app.wxss 中引入：
@import './style/weui.wxss';引入之后，全局控件样式、图标和深浅色变量就都生效了，页面里直接用 weui- 开头的类名即可。
读懂小程序表单页的三大布局区域
一个完整的 weui-wxss 表单页由.weui-form容器包裹，内部固定分三个区域：
weui-form__text-area：表单头部，放标题weui-form__title和一句描述weui-form__desc，告诉用户这一页要填什么；weui-form__control-area：主体区，所有输入控件都放在weui-cells单元格里，这里可以放很长、支持滚动；weui-form__ft：底部区，内含weui-form__opr-area按钮区和weui-form__tips-area提示区，放提交按钮和"点击即表示同意"这类免责文案。
骨架看起来是这样的：
<view class="weui-form"> <view class="weui-form__bd"> <view class="weui-form__text-area"> <h2 class="weui-form__title">标题</h2> <view class="weui-form__desc">一句话描述</view> </view> <view class="weui-form__control-area"> <!-- 输入控件 --> </view> </view> <view class="weui-form__ft"> <view class="weui-form__opr-area"> <view class="weui-btn weui-btn_primary">提交</view> </view> </view> </view>把区域摆对，页面比例自然就是微信里常见的表单样子，完整写法可以对照 form_vertical.wxml。
常用表单组件的最小用法
weui-textarea 文本域怎么配
文本域用weui-textarea类，配合右下角的计数行，一行就能给出带字数统计的多行输入：
<textarea class="weui-textarea" placeholder="请描述问题" rows="3"></textarea> <view class="weui-textarea-counter"><span>0</span>/200</view>picker 原生选择器嵌入单元格
picker是小程序原生组件，套上weui-select类后会得到带箭头、高度一致的选中项展示区，range传入选项数组即可：
<picker bindchange="onChange" range="{{array1}}"> <view class="weui-select">{{array1[index]}}</view> </picker>checkbox-group 复选组与 radio-group 单选组
复选和单选都复用单元格结构：外层checkbox-group/radio-group负责收集值，内层label套weui-cell，真正的checkbox/radio加weui-check类后会被隐藏，显示交给weui-icon-checked图标。单元格容器分别用weui-cells_checkbox和weui-cells_radio区分样式，可参考 form_checkbox.wxml 与 form_radio.wxml。
weui-switch-cp 开关
开关由一个隐藏的原生checkbox加一个weui-switch-cp__box视觉外壳组成，放进单元格就是标准的"标题 + 右侧开关"行：
<label class="weui-cell weui-cell_switch"> <view class="weui-cell__bd">标题文字</view> <view class="weui-cell__ft"> <view class="weui-switch-cp"> <checkbox class="weui-switch-cp__input" checked="true" /> <view class="weui-switch-cp__box"></view> </view> </view> </label>用 weui-wxss 实现表单报错与操作反馈
表单的状态反馈，weui-wxss 预置了四类现成样式，按需加类名就行：
- 行内报错：给单元格加
weui-cell_warn，标签和输入文字自动变红，警示图标同步显示； - 顶部提示：
weui-toptips_warn是一条固定在顶部的红色提示条，适合多输入项时汇总错误原因； - 结果页：提交成功或失败，用
weui-msg结构渲染整页结果，带大图标、说明文案和操作按钮； - 加载状态：
weui-loading是旋转的加载圈，weui-btn_loading则让按钮显示"提交中"并屏蔽重复点击。
具体效果可对照 form_input_status.wxml 里的输入状态演示页。
响应式适配、深色模式与无障碍细节
三个容易被忽略、但组件库已经替你做好的点：
- rpx 响应式：样式全部基于 rpx 单位编写，会随屏幕宽度自动等比缩放，不需要额外写媒体查询；
- data-weui-theme 换肤：在页面根节点写
data-weui-theme="{{theme}}"，取值为 light 或 dark，整页颜色走 CSS 变量自动切换，示例页 form_switch.wxml 就是这么做的； - 内置 ARIA：控件自带
aria-role、aria-label，让读屏软件能读出"正在加载""按钮"等语义；weui-wa-hotarea类名还会把小元素的点击热区扩到 88rpx 以上，手抖也不容易点偏。
继续深入：样式源码与 uploader 上传组件
想改默认样式时，别在编译产物上硬改，直接看 Less 源码：表单输入、标签、报错态的变量和规则都在 weui-form_common.less，主题变量集中在 src/style/base/ 目录。
表单之外，uploader 上传组件 提供图片缩略图网格、上传中遮罩、删除按钮等现成结构，配合weui-cell_uploader单元格，再写一段上传逻辑就能拼出完整的资料上传页，是本文表单能力最自然的下一站。
【免费下载链接】weui-wxssA UI library by WeChat official design team, includes the most useful widgets/modules.项目地址: https://gitcode.com/gh_mirrors/we/weui-wxss
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
