Bolt.new实战指南③｜实战：零代码生成天气预报应用

今天进入实战环节——我们用上一篇学的Prompt工程5步法，从零在Bolt.new中生成一个天气预报应用。全程零代码基础也能跟上。

项目目标

构建一个美观的天气预报Web应用，支持城市搜索、7天预报展示和实时天气数据展示。

Step 1：准备Prompt

按照Prompt工程5步法，我们先写好完整的需求描述：

做一个天气预报Web应用：

核心场景：用户输入城市名，查看当前天气和未来7天预报

功能清单（核心）：
- 搜索栏：输入城市名搜索天气
- 当前天气卡片：温度、湿度、风速、天气图标
- 7天预报列表：日期、温度范围、天气状况
- 最近搜索历史：保存5个最近搜索的城市

UI布局：
- 顶部：大搜索栏 + 搜索历史下拉
- 中间：当前天气大卡片（城市名、温度大字、天气图标、湿度/风速）
- 下方：7天预报横向滚动卡片

技术约束：
- React + TypeScript + Tailwind CSS
- 使用OpenWeatherMap免费API获取天气数据
- 响应式设计，手机端优先
- 配色：蓝色系渐变背景，白色卡片

交互细节：
- 搜索框输入时实时显示匹配城市建议
- 点击预报卡片展开当日详细信息
- 默认显示北京天气

Step 2：获取API Key

在开始之前，我们需要一个免费的天气API。推荐OpenWeatherMap：

1. 访问 openweathermap.org
2. 注册免费账号
3. 进入API Keys页面，复制你的Key
4. 免费计划每分钟60次请求，完全够用

拿到Key后，在Bolt.new的Prompt中加上一句："API Key用你自己的，我会稍后在环境变量中替换"。Bolt.new会生成带占位符的代码，你只需要填入自己的Key即可。

Step 3：在Bolt.new中生成

打开 bolt.new，将完整的Prompt粘贴到输入框中，点击Generate。

Bolt.new会自动完成以下工作：

• 创建React项目结构
• 安装Tailwind CSS等依赖
• 编写搜索组件、天气卡片组件、预报列表组件
• 实现API调用逻辑和状态管理
• 配置响应式样式

首次生成大约需要30-60秒，取决于项目复杂度。

Step 4：检查和调整

生成完成后，你会看到一个完整可运行的应用。检查以下几个关键点：

API Key是否正确配置

打开 .env 或环境变量文件，填入你的OpenWeatherMap Key：

VITE_WEATHER_API_KEY=你的Key

界面是否美观

第一次生成的界面可能不够精致。常见的调整需求：

调整配色方案：背景改为深蓝色渐变(#0f172a到#1e3a5f)，
天气卡片加毛玻璃效果(backdrop-blur)，
温度数字加大到4xl，
搜索栏加圆角和阴影

功能是否完整

逐项测试每个功能点：

• ✅ 搜索城市能正常返回天气
• ✅ 7天预报数据完整
• ✅ 搜索历史能保存和恢复
• ✅ 手机端布局正常

Step 5：进阶优化

基础版跑通后，可以用以下Prompt继续迭代：

添加以下功能：
1. 天气图标根据天气状况动态切换（晴/云/雨/雪各有图标）
2. 温度单位切换按钮（摄氏/华氏）
3. 添加定位功能：点击定位按钮自动获取当前位置天气
4. 日出日落时间显示
5. 空气质量指数(AQI)展示

常见问题排查

API返回401错误

API Key未配置或已过期。检查.env文件中的Key是否正确，新注册的Key可能需要等待10-15分钟才生效。

城市搜索不准确

OpenWeatherMap的搜索默认返回多个匹配结果。可以在代码中加一个城市选择下拉框：

搜索时先调用Geocoding API获取匹配城市列表，
展示下拉选择框让用户选择精确城市，
再根据选中的经纬度查询天气

手机端样式错乱

在Tailwind配置中添加移动端断点样式：

确保搜索栏宽度在手机上为100%，
预报卡片在小屏幕上纵向排列，
温度数字不要太大导致溢出

完整项目结构

weather-app/
├── src/
│   ├── components/
│   │   ├── SearchBar.tsx      # 搜索组件
│   │   ├── CurrentWeather.tsx  # 当前天气卡片
│   │   ├── ForecastList.tsx   # 7天预报
│   │   └── SearchHistory.tsx  # 搜索历史
│   ├── hooks/
│   │   └── useWeather.ts      # 天气数据Hook
│   ├── types/
│   │   └── weather.ts         # 类型定义
│   ├── utils/
│   │   └── api.ts             # API调用封装
│   ├── App.tsx
│   └── main.tsx
├── .env                        # API Key
├── tailwind.config.js
└── package.json

下一篇，我们将深入Bolt.new的项目管理和部署——如何管理多文件项目、如何导出代码、如何部署到Vercel让全世界访问。