💡 Vibe Coding 实战：手把手教你写个“穿衣助手” (附 AI 进阶版)

usecaseDiagram
    actor User as "早起懵逼的用户"
    package "穿衣助手小程序" {
        usecase "一键获取穿衣建议" as UC1
    }

    User --> UC1

    note right of UC1
        1. 自动定位 (你在哪)
        2. 获取天气 (冷不冷)
        3. 智能推荐 (穿什么)
    end note

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

    User->>MP: 打开小程序 (睡眼惺忪)
    MP->>MP: wx.getLocation (定位中...)
    MP->>WeatherAPI: GET /weather/forecast (明天冷吗?)
    WeatherAPI-->>MP: { Min: 15, Max: 22 }
    MP->>MP: 🧠 规则匹配: 15-22°C -> 衬衫+外套
    MP-->>User: 展示："老铁，明天穿衬衫配薄外套！"

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "明天穿什么",
    "navigationBarTextStyle": "black"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "我们需要知道你在哪，才能告诉你明天会不会冻着🥶"
    }
  }
}

<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>

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
    // 在真实项目中，这里会是一个 wx.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
      });
    });
  },

  // --- 🧠 核心规则引擎 (The Brain) ---
  // 这里可以根据个人体质调整，怕冷的就把阈值调高点
  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 "羽绒服！棉裤！怎么暖和怎么穿！🐧";
    }
  }
});

// 迭代 V1.1：增加下雨提醒
if (isRaining || pop > 60) {
    advice += " 另外，出门别忘带伞！☔️";
}