第8章：微信小程序天气预报实战

微信小程序入门与实战第8章：实战项目一：天气预报小程序本章目录01项目概述与需求分析了解天气预报小程序的项目背景和核心功能需求。02天气API选择与对比对比主流天气API服务，选择合适的API进行开发。03项目架构与技术选型设计项目的整体架构，并确定技术选型。04核心功能实现详解深入讲解获取地理位置、网络请求、数据处理等核心功能。05实战开发与总结带领大家从零开始开发天气预报小程序，并进行总结和回顾。项目概述与需求分析项目背景基于用户的地理位置信息，调用第三方天气API，开发一个功能完整的天气预报小程序。核心功能需求获取地理位置：自动获取用户的地理位置信息，定位精准。显示当前天气：实时展示温度、天气状况、风力、湿度等详情。未来多日预报：提供未来3-7天的天气预报，支持趋势查看。生活指数：提供穿衣、洗车、运动等实用建议，贴心服务。UI设计：设计简洁、美观、响应式的用户界面，提升体验。小程序界面效果预览2026年度项目规划·天气预报小程序天气API选择与对比天气API优点缺点数据丰富度使用成本和风天气接口稳定，数据准确，文档完善免费版有调用次数限制高（含生活指数等）免费版可用，付费更全心知天气数据更新及时，支持多语言免费版功能较少中（基本天气信息）免费版，适合小型项目高德地图天气与地图结合紧密，定位准确数据维度相对单一中（天气+预警）免费，需申请开发者Key百度地图天气国内用户基数大，稳定性高接口文档相对复杂中（基本+预警）免费，需申请开发者Key选择建议：个人/小型项目首选和风天气（数据丰富、接口稳定）；若需深度地图结合，可考虑高德/百度地图天气。项目架构与技术选型图示：小程序数据流转与核心模块交互流程项目架构核心模块小程序前端：负责UI展示和用户交互，构建直观的操作界面。网络请求：通过wx.requestAPI调用天气API，实现数据拉取。数据存储：利用wx.setStorageSync缓存位置与天气数据，优化体验。关键技术选型异步处理：采用ES6async/await语法，避免回调地狱，提升代码可读性。UI布局：使用Flex弹性布局，实现响应式设计，适配多尺寸屏幕。数据解析：利用JSON.parse高效解析API返回数据，确保数据准确渲染。核心功能实现详解-获取地理位置wx.getLocationAPI用于获取用户的实时地理位置信息（经纬度），为天气定位提供基础数据支持。权限配置要求必须在app.json中配置permission字段，向用户申请地理位置授权。//app.json权限配置{"permission":{"scope.userLocation":{"desc":"你的位置信息将用于天气定位"}}}//pages/index/index.js获取位置逻辑asyncgetLocation(){constres=awaitwx.getLocation({type:'wgs84'});console.log('经纬度:',res.latitude,res.longitude);this.getWeather(res.latitude,res.longitude);}关键提示：获取到经纬度后，需通过异常捕获处理用户拒绝授权的情况，并提示用户检查权限设置。核心功能实现详解-网络请求与数据处理使用wx.requestAPI调用天气API获取实时数据，处理网络请求核心逻辑，实现数据拉取与展示。Async/Await异步处理替代传统回调函数，使异步代码逻辑更清晰、简洁，提升代码可维护性。数据校验与异常捕获校验接口返回码，处理请求失败场景，确保用户体验流畅。weather.jsasyncgetWeather(latitude,longitude){wx.showLoading({title:'加载中...'});try{constres=awaitwx.request({url:'/v7/weather/now',data:{location:`${longitude},${latitude}`}});if(res.data.code==='200'){this.setData({now:res.data.now});}else{wx.showToast({title:'获取失败'});}}catch(error){wx.showToast({title:'网络异常'});}finally{wx.hideLoading();}}核心功能实现详解-UI设计与数据展示天气预报小程序UI设计方案UI设计原则简洁明了

突出核心，去繁就简响应式布局

Flex适配，多端兼容视觉层次

字体间距，区分重点核心功能模块当前天气模块：实时展示温度、天气状况、风力及湿度等关键数据。未来多日预报：列表化展示未来3-7天的日期、天气状况及温度范围趋势。生活指数模块：基于天气数据提供穿衣、洗车、运动等实用生活建议。核心功能实现详解-未来多日预报切换实现思路事件绑定为未来多日预报的每个日期卡片绑定点击事件，捕获用户交互。数据更新点击时，将选中日期的详细天气数据更新到当前天气展示模块。核心代码实现//WXML:循环渲染并绑定事件<viewwx:for="{{daily}}"bindtap="onDailyItemClick"><text>{{item.fxDate}}{{item.condTxtD}}</text></view>//JS:事件处理与数据更新onDailyItemClick(e){constday=e.currentTarget.dataset.day;this.setData({now:{temp:day.tempMax,...}});}实战开发-项目初始化与配置创建项目流程打开微信开发者工具，点击左上角“+”号选择“小程序”项目类型进行创建填写项目名称、选择本地目录点击“创建”完成初始化配置app.json{"pages":["pages/index/index"],"window":{"navigationBarTitleText":"天气预报","navigationBarBackgroundColor":"#007AFF"},"permission":{...}}关键提示：配置文件中需重点关注pages路径配置和permission权限申请，这是小程序正常运行的基础。实战开发-核心代码实现核心逻辑(pages/index/index.js)//页面初始化与数据获取Page({data:{now:{},daily:[]},onLoad(){this.getLocation();//获取定位},asyncgetWeather(lat,lon){//调用API获取天气数据...}});界面渲染(pages/index/index.wxml)<!--当前天气展示--><viewclass="now-weather"><textclass="temp">{{now.temp}}</text></view><!--多日预报循环渲染--><viewwx:for="{{daily}}"><text>{{item.fxDate}}</text></view>核心要点：JS负责数据逻辑（定位、API调用、数据处理），WXML负责UI结构渲染，两者通过数据绑定实现实时更新。常见问题排查Q1:无法获取地理位置？检查app.json中的permission配置是否正确，确保用户已授权地理位置权限。Q2:天气API请求失败？检查APIKey是否正确，网络连接是否正常，以及请求URL和参数是否正确。Q3:数据展示异常？检查数据解析逻辑是否正确，确保从API返回的数据中正确提取了所需的字段。Q4:界面布局错乱？检查WXSS样式是否正确，特别是Flex布局的属性设置，确保适配不同屏幕尺寸。本章总结项目需求与架构掌握了项目的整体设计思路和技术选型，明确开发方向。天气API选择与使用学会选择合适的第三方API，并通过网络请求获取数据。异步请求处理掌握async/await处理异步请求，避免回调地狱，提升代码可读性。UI设计与数据展示设计简洁美观的UI界面，实现数据在页面上的动态渲染。小程序实战开发综合运用所学知识完成项目开发，提升实际项目开发能力。能力提升通过完整项目流程，巩固前端技能，积累实战经验。通过本章学习，我们从理论到实践，完成了天气预报小程序的全流程开发，为后续复杂项目打下坚实基础。课后实操任务：完善天气预报小程序任务步骤1.添加城市切换功能在页面顶部添加城市选择按钮，支持手动输入或选择城市，获取对应天气信息。2.实现天气预警信息展示从天气API返回数据中提取暴雨、大风等预警信息，并在界面醒目位置展示。3.添加空气质量指数(AQ