Vibe Coding 实战：从零打造“穿衣助手”小程序

Posted on Sat 06 December 2025 in Tech

前言：什么是 Vibe Coding？

在之前的文章 Vibe Coding from 0 to 1 中，我们探讨了做产品的核心逻辑：先爱上问题，再寻找方案。"Vibe Coding" 不是一种新的编程语言，而是一种编程氛围或者说心态。它强调的是快速验证、关注核心价值、以及在编码过程中保持对用户痛点的敏锐感知。

今天，我们不仅仅是写代码，而是在构建一个解决方案。我们的目标是解决“不知道明天穿什么”这个痛点，而不是展示我们精通多么复杂的架构。

Step 0: 需求分析 (Refine the Vibe)

我们在动手写代码前，先回顾一下我们的“灵魂拷问”结果：

痛点：气温数字太抽象，无法直接转化为穿衣决策。
用户：对气温不敏感、早上赶时间的上班族/学生。
价值：一秒钟告诉我穿什么，别废话。
形态：微信小程序（无需下载，即用即走）。

MVP 功能清单： 1. 获取当前位置。 2. 获取明日天气（气温）。 3. 核心逻辑：根据气温推荐穿搭。 4. 展示结果。

Step 1: 系统设计 (Design the Solution)

简单并不代表简陋。即使是 MVP，我们也需要清晰的逻辑。

1.1 用例设计

用户只要做一件事：打开小程序。系统负责剩下的一切。

usecaseDiagram
    actor User as "用户 (User)"
    package "穿衣助手小程序" {
        usecase "查看穿衣建议" as UC1
    }

    User --> UC1

    note right of UC1
        1. 自动定位
        2. 获取天气
        3. 显示穿搭建议
    end note

1.2 简单架构

我们需要一个极简的架构。考虑到 MVP 的时效性，我们直接在小程序端调用免费的天气 API。

前端：微信小程序 (WXML, WXSS, JS)
数据源：和风天气 (QWeather) 或其他免费 API
逻辑层：本地规则引擎 (Temperature -> Clothing Rules)

sequenceDiagram
    participant User
    participant MP as 小程序 (Mini Program)
    participant WeatherAPI as 天气 API

    User->>MP: 打开小程序
    MP->>MP: 获取当前经纬度 (wx.getLocation)
    MP->>WeatherAPI: 查询明日天气 (GET /weather/forecast)
    WeatherAPI-->>MP: 返回气温 (Min: 15, Max: 22)
    MP->>MP: 匹配穿衣规则 (Rule Engine)
    Note over MP: Rule: 15-22°C -> 衬衫 + 外套
    MP-->>User: 展示建议："穿衬衫配薄外套"

Step 2: 核心代码实现 (Code the Vibe)

我们不需要复杂的框架，原生小程序足矣。

2.1 准备工作

注册微信小程序账号。
申请一个免费的天气 API Key（这里以伪代码代替具体 API 调用）。

2.2 配置文件 (app.json)

极简风格，我们只需要一个页面。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "明天穿什么",
    "navigationBarTextStyle": "black"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "我们需要您的位置来查询当地天气"
    }
  }
}

2.3 界面 (pages/index/index.wxml)

界面要干净。大号字显示建议，小号字显示辅助的天气信息。

<view class="container">
  <view class="header">
    <text class="location">{{locationName}}</text>
  </view>

  <view class="main-card">
    <view class="recommendation">
      <text class="title">明天建议穿：</text>
      <text class="clothing-text">{{clothingAdvice}}</text>
    </view>

    <view class="weather-info">
      <text>气温：{{tempMin}}°C - {{tempMax}}°C</text>
      <text class="weather-desc">{{weatherText}}</text>
    </view>
  </view>

  <view class="footer">
    <text class="tips">别为了风度不要温度哦</text>
  </view>
</view>

2.4 核心逻辑 (pages/index/index.js)

这是大脑所在。注意 getClothingAdvice 函数，它是我们的“规则引擎”。

const weatherAPI = require('../../utils/weather.js');

Page({
  data: {
    locationName: '定位中...',
    clothingAdvice: '计算中...',
    tempMin: '--',
    tempMax: '--',
    weatherText: '--'
  },

  onLoad: function () {
    this.initWeather();
  },

  initWeather: function () {
    const that = this;
    // 1. 获取位置
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        const { latitude, longitude } = res;
        that.fetchWeather(latitude, longitude);
      },
      fail() {
        that.setData({ locationName: '定位失败，请授权' });
      }
    });
  },

  fetchWeather: function (lat, lon) {
    const that = this;
    // 模拟调用天气 API
    // 实际项目中请替换为真实 request
    weatherAPI.getForecast(lat, lon).then(data => {
      const advice = that.getClothingAdvice(data.tempMin, data.tempMax);
      that.setData({
        locationName: '当前位置', // 实际应逆地理编码获取城市名
        tempMin: data.tempMin,
        tempMax: data.tempMax,
        weatherText: data.text,
        clothingAdvice: advice
      });
    });
  },

  // --- 核心规则引擎 ---
  getClothingAdvice: function (min, max) {
    const avg = (parseInt(min) + parseInt(max)) / 2;

    if (avg >= 30) {
      return "背心、短裤、防晒霜。热死啦！";
    } else if (avg >= 25) {
      return "短袖 T 恤、薄裙子。";
    } else if (avg >= 20) {
      return "长袖衬衫、薄卫衣。";
    } else if (avg >= 15) {
      return "厚卫衣、风衣、牛仔外套。";
    } else if (avg >= 10) {
      return "毛衣、夹克、秋裤警告。";
    } else {
      return "羽绒服！棉裤！怎么暖和怎么穿！";
    }
  }
});

Step 3: 迭代与反馈 (Loop the Vibe)

代码写完了，发布上线。但这只是开始。

按照 Vibe Coding 的理念，我们现在应该拿着这个简陋的小程序去找身边的朋友试用。

场景 1：朋友说“我觉得 20 度穿长袖热”。
- Action：调整 getClothingAdvice 中的阈值，或者增加“体感温度”算法。
场景 2：朋友说“下雨怎么办？”
- Action：在 API 返回中增加 pop (降水概率) 判断，如果有雨，追加建议“记得带伞”。

// 迭代后的逻辑片段
if (isRaining) {
    advice += " 另外，出门别忘带伞！☔️";
}

结语

你看，从需求到实现，我们并没有引入复杂的后端服务、数据库或 AI 模型。我们用最少的代码（Code），传递了最核心的穿衣指导价值（Vibe）。

这就是 Vibe Coding 的魅力：不为写代码而写代码，只为解决问题而写代码。

现在，拿起你的键盘，去构建属于你的 Vibe 吧。

Previous Post Next Post