微信小程序开发实战：基于和风天气API的精准天气预报（含自动定位与源码解析）
1. 和风天气API申请与配置
第一次接触天气类小程序开发时，最让我头疼的就是API的选择。市面上虽然有不少天气数据提供商，但经过多次对比测试，我发现和风天气的免费开发版完全能满足个人开发者的需求。记得去年做第一个天气小程序时，我试过三个不同平台，最终只有和风天气的API响应速度和数据准确性最稳定。
申请API key的流程其实很简单，但有几个关键点新手容易忽略。首先访问和风天气官网注册账号时，建议使用常用邮箱，因为后续API调用统计和到期提醒都会发到这个邮箱。进入控制台后，在"应用管理"页面点击"新建应用"，这里有个小技巧：应用名称最好包含"测试"字样，比如"天气小程序测试"，这样审核通过更快。
创建应用时需要注意两个重要选项：应用版本选择"免费开发版"，key类型选择"Web API"。免费版每天有1000次调用限额，对于学习开发完全够用。创建成功后，系统会生成一个32位的API key，这个key要妥善保管，后面我们会频繁用到。
2. 小程序域名配置与权限设置
拿到API key后，很多开发者会直接开始写代码，结果在真机调试时发现请求失败。这是因为微信小程序对网络请求有严格的安全限制，必须在后台配置合法域名。我就曾在这个环节卡了半天，最后发现是少配置了一个域名。
登录微信公众平台，进入"开发"-"开发设置"-"服务器域名"，找到request合法域名列表。需要添加以下两个和风天气的API域名：
- https://devapi.qweather.com
- https://geoapi.qweather.com
这里有个常见坑点：域名必须包含https协议头，只写devapi.qweather.com会导致配置失败。另外，如果遇到"域名未备案"的提示，不用紧张，和风天气的这两个域名都是已备案的，可能是缓存问题，刷新页面再试即可。
权限设置同样重要。在app.json文件中需要声明位置权限：
"permission": { "scope.userLocation": { "desc": "你的位置信息将用于天气预报定位" } }这个描述文字会显示在位置授权弹窗上，建议写得具体些，提高用户授权率。我在实际项目中测试发现，把用途说明清楚的授权率能提升30%以上。
3. 自动定位功能实现详解
自动定位是天气类小程序的核心功能，我见过不少开发者直接用wx.getLocation获取坐标就开始请求天气数据，这其实忽略了多种异常情况。完整的定位流程应该包含以下几个关键处理：
首先是用户未授权的情况。我们可以在onLoad生命周期中先调用wx.getSetting检查授权状态：
wx.getSetting({ success(res) { if (!res.authSetting['scope.userLocation']) { wx.authorize({ scope: 'scope.userLocation', fail() { // 引导用户手动授权 } }) } } })如果用户拒绝授权，应该提供友好的引导提示，而不是直接报错。我的做法是显示一个模态对话框，解释定位对天气服务的重要性，并提供跳转设置页的按钮：
wx.showModal({ title: '需要位置权限', content: '获取精准天气预报需要您的位置信息', success(res) { if (res.confirm) { wx.openSetting() } } })获取到经纬度后，记得要转换成和风天气API要求的格式："经度,纬度"。这里有个细节处理：建议把定位坐标存入全局变量或本地存储，避免用户每次进入小程序都要重新定位。
4. 天气数据请求与页面渲染
有了位置信息后，就可以开始请求天气数据了。和风天气提供了多个接口，我们主要用到三个：
- 实时天气：/v7/weather/now
- 24小时预报：/v7/weather/24h
- 7天预报：/v7/weather/7d
在实际开发中，我发现同时发起多个请求可能会导致渲染闪烁。更好的做法是使用Promise.all并行请求：
const requests = [ this.getNowWeather(), this.getHourlyWeather(), this.getDailyWeather() ] Promise.all(requests).then(() => { wx.hideLoading() }).catch(err => { // 统一错误处理 })页面渲染部分有几个优化技巧。天气图标建议使用网络图片而非本地资源，因为和风天气提供了完整的天气图标集。温度显示要注意单位转换，特别是从华氏度转摄氏度的情况。日期显示建议格式化为"周X"这样的友好格式，可以通过下面这个工具函数实现：
formatDate(date) { const week = ['日','一','二','三','四','五','六'] return `周${week[new Date(date).getDay()]}` }对于24小时预报这种横向滚动列表，记得给容器设置white-space: nowrap，子项设置为inline-block。我在早期版本中用过flex布局，结果在iOS上出现了滚动卡顿的问题，后来改用这种方案就流畅多了。
5. 错误处理与性能优化
天气API调用失败是常见情况，需要做好充分的错误处理。和风天气的API会返回标准化的错误码，比如"204"表示请求坐标有误，"401"表示key无效。建议封装统一的错误处理函数：
handleError(code) { const errorMap = { '204': '定位信息有误', '401': 'API key无效', '404': '请求地址错误' } wx.showToast({ title: errorMap[code] || '服务异常', icon: 'none' }) }性能优化方面，我总结了几个实用技巧：
- 使用wx.startPullDownRefresh实现下拉刷新，而不是页面滚动刷新
- 对频繁更新的数据如温度使用throttle节流
- 天气图片使用CDN加速
- 首页数据做本地缓存，设置合理的过期时间
一个特别容易忽略的点是API调用频率控制。免费版每分钟限制30次调用，如果用户快速切换城市可能会触发限流。我的解决方案是加一个请求队列，确保不会短时间内发起大量请求。
6. 源码结构与关键代码解析
完整的天气小程序源码通常包含以下几个核心文件：
- pages/index：主页面
- components/weather：天气组件
- utils/api.js：API封装
- utils/format.js：数据格式化工具
重点看一下API封装部分的实现。我习惯把所有的天气请求封装到一个WeatherService类中：
class WeatherService { constructor(apiKey) { this.apiKey = apiKey this.baseUrl = 'https://devapi.qweather.com' } getNowWeather(location) { return new Promise((resolve, reject) => { wx.request({ url: `${this.baseUrl}/v7/weather/now`, data: { location, key: this.apiKey }, success: res => resolve(res.data), fail: reject }) }) } // 其他方法... }页面数据绑定部分，建议把不同时间段的天气数据分开管理，而不是全部放在一个大的data对象里。这样既方便维护，也能提高渲染效率：
Page({ data: { nowWeather: null, hourlyWeather: [], dailyWeather: [] } })样式编写时要注意单位转换。微信小程序使用rpx作为响应式单位，750rpx等于屏幕宽度。对于天气图标这种固定大小的元素，建议使用rpx而不是px，确保在不同设备上显示一致。