- 实验目的
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://pan.baidu.com/s/1WaXluHXxrRHrL1rEwGl0wA
提取码:asdf