WXSS
你可能会说
把小程序里的预约按钮做醒目一点,周围也留点空。
描述微信小程序组件外观和排版的样式语言预约按钮的文字与点击行为不变时,可以用 WXSS 修改颜色、圆角和间距。它控制画面怎么显示,不负责提交或保存预约。
也常被叫作WX Style Sheets小程序样式
只改样式,预约页怎样变化
index.wxss
.reserve {
padding: 24rpx;
}<button class="reserve">青禾工作坊
周末陶艺体验
周六 14:00 · 陶艺体验
14:00 — 15:30
预约这个时段按钮已有内容与点击逻辑。当前只看外观差异,不改预约流程。
样式作用在哪些对象上
通过类名找到对象:WXML 中的 class="reserve" 把按钮连到 WXSS 的 .reserve。同一个类名也可以统一设置多个相同对象的样式。
样式有作用范围:app.wxss 提供全局页面样式,页面同名的 WXSS 负责当前页。自定义组件还可能隔离自己的样式。
可以这样发给项目里的 AI Agent
请在这个微信小程序预约页的 WXSS 中调整预约按钮:用项目主题色,圆角和间距沿用现有规范。保留按钮文字、位置与点击逻辑。完成后在窄屏和宽屏检查外观,并预约一次确认行为没受影响。
接下来学什么
延伸阅读 · 权威出处
快速练习