微信小程序开发实战：基于和风天气API的精准天气预报（含自动定位与源码解析）

1. 和风天气API申请与配置第一次接触天气类小程序开发时最让我头疼的就是API的选择。市面上虽然有不少天气数据提供商但经过多次对比测试我发现和风天气的免费开发版完全能满足个人开发者的需求。记得去年做第一个天气小程序时我试过三个不同平台最终只有和风天气的API响应速度和数据准确性最稳定。申请API key的流程其实很简单但有几个关键点新手容易忽略。首先访问和风天气官网注册账号时建议使用常用邮箱因为后续API调用统计和到期提醒都会发到这个邮箱。进入控制台后在应用管理页面点击新建应用这里有个小技巧应用名称最好包含测试字样比如天气小程序测试这样审核通过更快。创建应用时需要注意两个重要选项应用版本选择免费开发版key类型选择Web API。免费版每天有1000次调用限额对于学习开发完全够用。创建成功后系统会生成一个32位的API key这个key要妥善保管后面我们会频繁用到。2. 小程序域名配置与权限设置拿到API key后很多开发者会直接开始写代码结果在真机调试时发现请求失败。这是因为微信小程序对网络请求有严格的安全限制必须在后台配置合法域名。我就曾在这个环节卡了半天最后发现是少配置了一个域名。登录微信公众平台进入开发-开发设置-服务器域名找到request合法域名列表。需要添加以下两个和风天气的API域名https://devapi.qweather.comhttps://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/now24小时预报/v7/weather/24h7天预报/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.jsAPI封装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确保在不同设备上显示一致。