在微信小程序中，实现点击按钮后修改颜色是一个常见的交互效果，可以增强用户的操作体验。本文将详细介绍如何在微信小程序中实现这一功能，并提供相应的代码示例。
我们需要理解微信小程序的基本架构。微信小程序由四部分组成：WXML（结构层）、WXSS（样式层）、JavaScript（逻辑层）和JSON（配置文件）。在这个例子中，我们主要关注WXML、WXSS和JavaScript文件。
1. WXML（结构层）：
WXML文件定义了页面的结构和交互元素。在这个例子中，我们有两个`view`组件，它们根据`sty`的状态显示或隐藏。当`sty`为0时，显示第一个`view`，其背景颜色为`{{score}}`；当`sty`为1时，显示第二个`view`，背景颜色同样为`{{score}}`。这里的`catchtap`事件监听器用于捕获点击事件，并调用`score`函数。
```html
<view wx:if="{{sty==0}}">
<view class="score" style="background-color:{{score}};" catchtap='score'>
<text>按钮一</text>
</view>
</view>
<view wx:if="{{sty==1}}">
<view class="score" style="background-color:{{score}};" catchtap='score'>
<text>按钮一</text>
</view>
</view>
```
2. WXSS（样式层）：
WXSS类似于CSS，用于定义元素的样式。这里我们定义了一个`.score`类，设置了按钮的宽度、圆角和文字颜色。
```css
.score {
width: 335rpx;
border-radius: 10rpx 0rpx 0rpx 10rpx;
}
.score text {
color: #FCB216;
}
```
3. JavaScript（逻辑层）：
JavaScript文件是实现业务逻辑的地方。在这里，我们创建了一个`Page`对象，包含页面的初始数据和事件处理函数。`data`对象包含了两个属性：`sty`用于存储按钮状态（0或1），`score`用于存储按钮背景颜色。`score`函数是点击事件的处理函数，当按钮被点击时，它会改变`sty`和`score`的值，从而更新按钮的样式。
```javascript
Page({
data: {
sty: 0,
score: '#fff5df',
},
score: function (e) {
let that = this;
that.setData({
sty: 1,
score: 'rgba(252,178,22, 0.3)',
});
},
})
```
微信小程序通过结合WXML、WXSS和JavaScript实现了点击按钮后修改颜色的效果。当用户点击按钮时，`score`函数会被调用，改变`sty`和`score`的值，使得按钮的背景颜色从`#fff5df`变为`rgba(252,178,22, 0.3)`，达到颜色加深的效果。这样的实现方式简单易懂，同时也易于扩展到其他交互设计中。
通过学习这个示例，开发者可以了解到微信小程序中的数据绑定、事件处理和样式修改等基础知识，这对于开发微信小程序应用至关重要。在实际开发中，开发者可以根据需求调整颜色值和样式，以实现更丰富的交互效果。同时，也可以利用微信小程序提供的API和组件库，创建更多复杂且富有吸引力的用户体验。
