你有多久没有专注地、纯粹地做一件事了？比如，只是简单地数数。今天，我们不谈宏大的概念，就聊一个微信小程序里最基础的功能——计数器。它看似简单，却像一面镜子，映照出产品思维、代码逻辑和用户体验的微光。我的这个小计数器，就是从这种“简单”里生长出来的。

起初，我想做一个极简的工具，帮我在冥想时计数呼吸，或者记录每天喝水的杯数。打开微信开发者工具，创建一个新项目，那份空白的画布既让人兴奋，又有点无从下手。但我很快意识到，越是简单的功能，越需要清晰的构思。这个计数器不应该只是个冰冷的数字机器，它得有反馈，有“呼吸感”。

于是，我画下了第一个界面：中央一个巨大的数字，显示当前计数；下方是两个醒目的按钮，一个“+”，一个“-”；顶部是重置按钮。布局用Flex就能轻松搞定，关键在于让点击有即时、愉悦的响应。这里，我决定给按钮加上轻微的缩放动画，让每一次点击都像按下实体按钮一样实在。

逻辑部分，是它的心脏。听起来简单——点击加号，数字加一；点击减号，数字减一。但细节决定体验。比如，计数是否允许为负数？重置是否需要二次确认？我选择了更人性化的处理：计数可以减到负数，因为某些场景下（如计分）可能需要；重置则设计为长按触发，防止误操作。这些选择，没有对错，只有是否贴合你心中那个使用场景。

来看看核心的代码骨架吧，它简洁得惊人：

// pages/index/index.js
Page({
  data: {
    count: 0 // 计数器的核心数据
  },

  // 增加计数
  increase() {
    this.setData({
      count: this.data.count + 1
    });
  },

  // 减少计数
  decrease() {
    this.setData({
      count: this.data.count - 1
    });
  },

  // 长按重置
  resetCount() {
    wx.showModal({
      title: '提示',
      content: '确定要重置计数吗？',
      success: (res) => {
        if (res.confirm) {
          this.setData({ count: 0 });
        }
      }
    });
  }
})

而页面的结构（WXML）也保持着同样的简洁：

  
    {{count}}
  
  
    -
    +
  
  长按下方区域重置
  

配上一点样式（WXSS），让它看起来舒服些：

/* pages/index/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 40rpx;
}

.count-text {
  font-size: 120rpx;
  font-weight: bold;
  margin: 60rpx 0;
  color: #333;
  transition: transform 0.1s;
}

.btn-group {
  display: flex;
  width: 60%;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.btn {
  width: 45%;
  font-size: 60rpx;
  border-radius: 50%;
  height: 160rpx;
  background-color: #07c160;
  color: white;
}

.reset-area {
  width: 100%;
  height: 120rpx;
  background-color: #f0f0f0;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 28rpx;
}

当我在手机上真机预览，第一次点击按钮，看到数字流畅地变化时，一种奇妙的满足感油然而生。这个小小的程序“活”了。它不再是一行行冰冷的代码，而是一个能回应我的、有明确功能的小工具。我甚至开始用它来数今天打断我专注的手机解锁次数，结果那个数字高得让我自己都脸红。

从这个计数器延伸开去，你会发现它是个绝佳的起点。加上wx.setStorageSync，就能让计数在关闭小程序后依然保存；接入云开发数据库，就能实现多设备同步计数；如果加上图表组件，就能可视化一段时间内的计数趋势……一个简单的内核，拥有无限扩展的可能。