# mini-program-flowers-kown-weather-01 **Repository Path**: alongsocjr/mini-program-flowers-kown-weather-01 ## Basic Information - **Project Name**: mini-program-flowers-kown-weather-01 - **Description**: 01-花知天气小程序 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-10 - **Last Updated**: 2026-04-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 花知天气小程序源码 ## 项目简介 花知天气是一个简洁美观的微信小程序天气查询应用，采用原生微信小程序技术开发，适合作为初级小程序开发教学案例。 ## 技术栈 - **前端框架**: 微信小程序原生开发 - **开发语言**: JavaScript、WXML、WXSS - **数据接口**: Node.js Express 本地 API 服务 - **设计风格**: 日系简约风格 ## 功能特性 - 🌤️ **实时天气显示**: 展示当前城市的天气信息 - 🔍 **城市搜索**: 支持城市名称搜索和热门城市快速选择 - ⭐ **收藏管理**: 收藏常用城市，快速查看天气 - 📊 **天气预报**: 5 天天气预报和温度趋势图 - 💡 **生活建议**: 根据天气情况提供穿衣、运动等建议 ## 项目结构 ``` 小程序源码/ ├── app.js # 小程序入口文件 ├── app.json # 小程序配置文件 ├── app.wxss # 全局样式文件 ├── sitemap.json # 站点地图配置 ├── project.config.json # 项目配置文件 ├── pages/ # 页面目录 │ ├── index/ # 首页 │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── search/ # 搜索页 │ │ ├── search.js │ │ ├── search.json │ │ ├── search.wxml │ │ └── search.wxss │ ├── forecast/ # 预报页 │ │ ├── forecast.js │ │ ├── forecast.json │ │ ├── forecast.wxml │ │ └── forecast.wxss │ └── favorites/ # 收藏页 │ ├── favorites.js │ ├── favorites.json │ ├── favorites.wxml │ └── favorites.wxss ├── images/ # 图片资源 │ └── README.md └── README.md # 本文件 ``` ## 快速开始 ### 环境要求 - 微信开发者工具 >= 1.05.0 - Node.js >= 14.0.0（用于 API 服务） - 操作系统：Windows 10+ / macOS 10.14+ / Linux ### 安装步骤 1. **启动 API 服务** ```bash cd ../本地API服务 npm install npm start # 或使用 node server.js ``` 2. **打开小程序项目** - 启动微信开发者工具 - 选择"导入项目" - 选择当前目录（小程序源码） - 填入 AppID（可使用测试号） 3. **配置 API 地址** - 修改 `app.js` 中的 `apiBaseUrl` 为你的 API 服务地址 - 默认为 `http://localhost:3001/api` - API 服务启动后可在控制台查看可用接口列表 4. **预览和调试** - 在微信开发者工具中点击"编译" - 查看模拟器中的效果 - 可使用真机扫码预览 ## 核心功能说明 ### 1. 首页（index） **主要功能**： - 显示当前城市的实时天气信息 - 3 小时天气预报预览 - 收藏/取消收藏功能（支持状态同步） - 下拉刷新天气数据 **核心代码**： ````javascript // 获取天气数据 loadWeatherData() { app.request({ url: `/weather/${this.data.currentCity.id}`, success: (data) => { this.processWeatherData(data); this.checkFavoriteStatus(); // 加载天气数据后检查收藏状态 } }); } // 检查收藏状态 checkFavoriteStatus() { app.request({ url: '/favorites/user', success: (res) => { // 检查当前城市是否在收藏列表中 const isFavorited = res.some(item => item.id === this.data.currentCity.id); this.setData({ isFavorited }); } }); }``` ### 2. 搜索页（search） **主要功能**： - 城市名称搜索 - 搜索历史记录 - 热门城市快速选择 - 防抖搜索优化 **核心代码**： ```javascript // 防抖搜索 onSearchInput(e) { const keyword = e.detail.value.trim(); clearTimeout(this.searchTimer); this.searchTimer = setTimeout(() => { this.performSearch(keyword); }, 300); } ```` ### 3. 预报页（forecast） **主要功能**： - 5 天天气预报 - 温度趋势图表 - 生活建议展示 - Canvas 图表绘制 **核心代码**： ```javascript // 绘制温度趋势图 drawTemperatureChart(forecastData) { const ctx = wx.createCanvasContext('temperatureChart'); // 绘制逻辑... ctx.draw(); } ``` ### 4. 收藏页（favorites） **主要功能**： - 收藏城市列表管理 - 删除收藏城市功能 - 收藏状态实时更新 - 加载状态和空状态处理 **核心代码**： ````javascript // 删除收藏 removeFavorite(e) { const { id } = e.currentTarget.dataset; wx.showModal({ title: '确认删除', content: '确定要删除该收藏吗？', success: (res) => { if (res.confirm) { this.setData({ isLoading: true }); app.request({ url: `/favorites/user/${id}`, method: 'DELETE', success: () => { // 刷新收藏列表 this.loadFavorites(); }, complete: () => { this.setData({ isLoading: false }); } }); } } }); }``` ## API接口说明 ### 基础配置 ```javascript // app.js 中的API配置 apiBaseUrl: 'http://localhost:3001/api' ```` ### 主要接口 1. **获取城市列表** ``` GET /api/cities GET /api/cities/search?q=关键词 ``` 2. **获取天气数据** ``` GET /api/weather/:cityId ``` 3. **收藏管理** ``` GET /api/favorites/user POST /api/favorites/user // 请求体: {"cityId": "城市ID"} DELETE /api/favorites/user/:cityId ``` ## 样式设计 ### 设计原则 - **日系简约风格**: 清爽、干净、留白充足 - **卡片式布局**: 信息层次清晰 - **渐变背景**: 根据天气状况动态变化 - **微交互动画**: 提升用户体验 ### 颜色规范 ```css /* 主色调 */ --primary-color: #4a90e2; --secondary-color: #667eea; /* 背景渐变 */ --sunny-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --cloudy-gradient: linear-gradient(135deg, #667eea 0%, #8b9dc3 100%); --rainy-gradient: linear-gradient(135deg, #4a90e2 0%, #7b68ee 100%); ``` ## 开发技巧 ### 1. 数据请求封装 ````javascript // app.js 中的请求封装 request(options) { wx.request({ url: `${this.globalData.apiBaseUrl}${options.url}`, method: options.method || 'GET', data: options.data, success: (res) => { if (res.statusCode === 200) { options.success && options.success(res.data); } else { options.fail && options.fail(res); } }, fail: (error) => { console.error('请求失败:', error); options.fail && options.fail(error); }, complete: () => { options.complete && options.complete(); } }); }``` ### 2. 本地存储应用 ```javascript // 搜索历史存储 wx.setStorageSync('searchHistory', history); const history = wx.getStorageSync('searchHistory') || []; ```` ### 3. 防抖优化 ```javascript // 搜索防抖 clearTimeout(this.searchTimer); this.searchTimer = setTimeout(() => { this.performSearch(keyword); }, 300); ``` ## 常见问题 ### 1. 网络请求失败 - 检查 API 服务是否启动 - 确认 API 地址配置正确 - 检查网络连接状态 ### 2. 图片资源缺失 - 替换 `images/` 目录中的占位图标 - 确保图片路径正确 ### 3. 页面跳转问题 - 检查 `app.json` 中的页面路径配置 - 使用正确的跳转方法（`switchTab` vs `navigateTo`） ## 扩展功能建议 1. **定位功能**: 自动获取用户当前位置 2. **天气预警**: 恶劣天气提醒 3. **主题切换**: 支持深色模式 4. **离线缓存**: 网络异常时显示缓存数据 5. **分享功能**: 分享天气信息给好友 ## 学习要点 通过本项目可以学习到： 1. **小程序基础**: 页面结构、配置文件、生命周期 2. **网络编程**: HTTP 请求、数据处理、错误处理 3. **用户交互**: 事件绑定、手势操作、页面跳转 4. **数据存储**: 本地存储、状态管理 5. **UI 设计**: 样式布局、动画效果、响应式设计 6. **组件化思维**: 代码复用、模块化开发 --- _本项目为教学案例，代码结构清晰，注释详细，适合初学者学习和参考。_