- 实验目的
1、天气预报项目的设计与实现；
- 实验环境
个人手机、与因特网连接的计算机网络系统；主机操作系统为Windows或MAC；微信开发者工具、IE等软件。
数据支持：
进制数据天气预报api
腾讯地图逆地址解析：
- 实验项目需求
- 获取用户位置权限
- 获取当前位置
- 根据当前位置获取本地所在城市
- 根据城市获取本地天气
- 实现搜索城市的天气预报
- 对获取到的数据进行布局排列
- 实验报告内容
图示：
布局：
- header position设置relative，动态图片wave position设置absolute，bottom设置-2px将动态图片插入header的底部，
- top、center使用flex布局，默认row排列，主轴方向对齐为space-between，项目间距相等，交叉轴方向设置，项目与交叉轴居中对齐，对齐方式为center
- bottom使用flex布局，排列方向row排列，允许项目换行，主轴方向对齐为space-between，项目间距相等，交叉轴对齐方式为center
- hourlyNotify使用flex布局，排列为column排列，主轴对齐方式为space-between，项目间距相等
- notify设置display:block和white-space: pre-wrap使文本内容自动换行，text-align:center、justify-content: cente和align-items:center使文本内容居中对齐
使用可滚动视图模块，方向为横向滚动，view组件视图内容用wx:for控制属性绑定data中的hourly数组的内容，重复渲染该组件，排列方式display：inline-block，不设置宽度时，内容撑开宽度；不会独占一行，支持宽高，代码换行，被解析成空格，文本居中排列
| <view class="hourly_title">24小时预报</view> <scroll-view scroll-x="true" class="hourly"> <view class="h_item" wx:for="{{hourly}}" wx:key="index"> <text class="h_time">{{item.time}}</text> <view class="h_img"> <image mode="widthFix" src="/icon/{{wid}}.png"></image> </view> <text class="h_tmp">{{item.tmp}}°</text> </view> </scroll-view> |
使用可滚动视图模块，方向为横向滚动，view组件视图内容用wx:for控制属性绑定data中的daily_forecast数组的内容，重复渲染该组件，排列方式display：inline-block，不设置宽度时，内容撑开宽度；不会独占一行，支持宽高，代码换行，被解析成空格，文本居中排列
| <scroll-view scroll-x="true" class="daily"> <view class="d_item" wx:for="{{daily_forecast}}" wx:key="index"> <text class="d_txt">{{item.d_txt}}</text> <text class="d_date">{{item.d_date}}</text> <view class="h_img"> <image mode="widthFix" src="/icon/{{wid}}.png"></image> </view> <text class="h_tmp">{{item.tmp_min}}°~{{item.tmp_max}}°</text> <view class="h_img"> <image mode="widthFix" src="/icon/{{wid}}.png"></image> </view> <text class="d_wind_dir">{{item.wind_dir}}</text> <text class="d_wind_sc">{{item.wind_sc}}级</text> </view> </scroll-view> |
功能：
wx.getSetting获取用户的当前设置，if语句判断是否有位置权限，没有则用wx.authorize用于获取用户位置授权，成功获取权限则wx.showToast弹出“授权成功”窗口，若选择拒绝使用wx.showModal重新弹出“检测到您没打开此小程序的定位权限，是否去设置打开”窗口，引导用户在wx.openSetting设置中打开位置授权
| wx.getSetting({ success(res) { if (!res.authSetting['scope.userLocation']) { wx.authorize({ scope: 'scope.userLocation', success(){ wx.showToast({ title: '授权成功', icon: 'success', duration: 1000 }) }, fail(){ wx.showModal({ content: '检测到您没打开此小程序的定位权限，是否去设置打开？', confirmText: "确认", cancelText: "取消", success: function (res) { console.log(res); //点击“确认”时打开设置页面 if (res.confirm) { console.log('用户点击确认') wx.openSetting({ success: (res) => { } }) } else { console.log('用户点击取消') } } }) } }) } } }) |
获取当前位置：
使用getlocation获取当前位置的经纬度,wgs84返回gps坐标，成功将result的latitude和longitude，与腾讯位置服务的逆地址解析url组合，使用wx.request网络api请求latitude和longtitude所对应的位置信息，使用setData将位置城市赋值到data中的city中
| wx.getLocation({ type: 'wgs84', success: (result) => { console.log(result); var url = 'https://apis.map.qq.com/ws/geocoder/v1/?location='+result.latitude+','+result.longitude+'&key=KKABZ-QQLEK-4KSJA-AJGTK-VTLGK-GLBMX&get_poi=1' wx.request({ url: url, data: {}, dataType: 'json', header: {'content-type':'application/json'}, method: 'GET', responseType: 'text', success: (res) => { console.log(res); this.setData({ city:res.data.result.address_component.city }) this.getWeather(this.data.city) }, fail: (res) => { console.log(res); }, complete: (res) => { console.log(res);}, }) }, fail: (res) => { console.log(res); }, complete: (res) => { console.log(res);}, }) }, |
文本框用于获取要搜索的城市名，使用bindtap绑定文本内容，使用setData获取文本框内容
bindKeyInput(e) {
this.setData({
search_city: e.detail.value
})
},
图标搜索调用获取天气getWeather
GetWeather(city)根据城市获取city的天气预报
使用wx.request网络api获取city的天气预报数据，成功获取数据后使用if语句判断city是否正确，若不存在该城市，使用wx.showToast弹出“抱歉！没有该城市的天气预报”窗口，
若该城市存在，使用setData将result中的城市名，城市的气温，最高气温与最低气温，气候图片数字，风向，风级，风速，空气湿度，aqi空气质量，气压，出行建议保存到data中，
将hourly中的数据使用for循环保存到data中的hourly数组中，将未来七天的数据使用for循环保存到daily_forecast中，再使用setData保存到data中
| getWeather(city) { var that = this //获取实况天气 wx.request({ url: 'https://api.binstd.com/weather/query?appkey=839c6cf080e63a65&city=' + city, success: (res) => { if (res.data.msg == '城市不存在') { wx.showToast({ title: '抱歉！没有该城市的天气预报', icon: 'none', duration: 2000 }) return; } console.log(res) that.setData({ city: city, temperature: res.data.result.temp, wid: res.data.result.img, direct: res.data.result.winddirect, power: res.data.result.windpower, humidity: res.data.result.humidity, aqi: res.data.result.aqi.aqi, windspeed:res.data.result.windspeed, temphigh:res.data.result.temphigh, templow:res.data.result.templow, pressure:res.data.result.pressure, affect:res.data.result.aqi.aqiinfo.affect, measure:res.data.result.aqi.aqiinfo.measure }) // console.log(that.data.affect); // console.log(that.data.measure); // 24小时天气预报 var arr = res.data.result.hourly var hourly = [] for (var i = 0; i < arr.length; i++) { hourly[i] = { "imgsrc": arr[i].img, "tmp": arr[i].temp, "time": arr[i].time, } } that.setData({ hourly: hourly }) // 未来七天的天气预报 var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六"); var afterSeven = res.data.result.daily var daily_forecast = [] for (var i = 0; i < afterSeven.length; i++) { daily_forecast[i] = { d_txt: i == 0 ? "今天" : weekArray[new Date(arr[i].date).getDay()], d_date: afterSeven[i].date.substring(5), imgsrc_d: afterSeven[i].day.img, imgsrc_n: afterSeven[i].night.img, wind_dir: afterSeven[i].day.winddirect, wind_sc: afterSeven[i].day.windpower, tmp_max: afterSeven[i].day.temphigh, tmp_min: afterSeven[i].night.templow, } } that.setData({ daily_forecast: daily_forecast }) }, fail: (res) => { console.log(res); }, complete: (res) => { console.log(res);}, }) }, |
文件链接：文章来源：https://www.toymoban.com/news/detail-495380.html
链接：https://pan.baidu.com/s/1WaXluHXxrRHrL1rEwGl0wA
提取码：asdf文章来源地址https://www.toymoban.com/news/detail-495380.html
到了这里，关于天气预报小程序的设计与实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
