微信小程序城市天气预报切换显示

xiaoxiao2021-02-28  51

在转载http://blog.csdn.net/u014360817/article/details/52803527的基础上开发,补充第一部分的城市切换。

目前开发的界面如下:

标红的第一部分:

xxx.wxml(界面显示)

<view class="newTopView">     <!--左边添加当前城市名字,点击跳转选择城市 右边添加刷新当前天气-->         <text class="cityInfo">{{currentCityInfo}}</text>         <view class="search" bindtap="clickButton">更多>></view>

</view>

xxx.wxss(显示样式)

.cityInfo{   color: white;   font-size: 100rpx; } .search{   color: white;   font-size: 25rpx; }

xxx.js(显示中调用的ClickButton函数)

采用的方法:

利用微信小程序API函数wx.chooseLocation。获取地点的经纬度后,采用转载博客中程序即利用wx.request请求天气数据,更新数据即可。

clickButton:function(){     console.log('clickButton')     var that = this     wx.chooseLocation({       success: function(res){           console.log(res.longitude)           console.log(res.latitude)           wx.request({           //这个网站有免费API赶紧收藏           url: 'http://route.showapi.com/9-5',           data: {             showapi_appid: '11697',             showapi_sign: '6c0c15c5ec61454dac5288cea2d32881',             //             from: '5',             lng: res.longitude,             lat: res.latitude,             //获取一周情况 0是不获取             needMoreDay: '1',             needIndex: '1'           },           success: function (res) {             console.log(res)             console.log(res.data.showapi_res_body.now.api)             console.log(res.data.showapi_res_body.cityInfo.c5)             console.log(res.data.showapi_res_body.now.temperature)             that.setData({               //改变加载状态               loadingHidden: true,                              currentCityInfo: res.data.showapi_res_body.cityInfo.c5,               currentTemperature: res.data.showapi_res_body.now.temperature,               nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,               dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,               weather: res.data.showapi_res_body.now.weather,               aqi: res.data.showapi_res_body.now.aqi,               quality: res.data.showapi_res_body.now.aqiDetail.quality,               windPower: res.data.showapi_res_body.now.wind_power,               windDirection: res.data.showapi_res_body.now.wind_direction,               //拼接数组               list: [                 {                   'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic,                   'weekday': res.data.showapi_res_body.f1.weekday,                   'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature,                   'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature                 },                 {                   'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic,                   'weekday': res.data.showapi_res_body.f2.weekday,                   'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature,                   'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature                 },                 {                   'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic,                   'weekday': res.data.showapi_res_body.f3.weekday,                   'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature,                   'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature                 },                 {                   'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic,                   'weekday': res.data.showapi_res_body.f4.weekday,                   'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature,                   'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature                 },                 {                   'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic,                   'weekday': res.data.showapi_res_body.f5.weekday,                   'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature,                   'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature                 },                 {                   'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic,                   'weekday': res.data.showapi_res_body.f6.weekday,                   'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature,                   'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature                 },                 {                   'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic,                   'weekday': res.data.showapi_res_body.f7.weekday,                   'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature,                   'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature                 }]             })}         })       }           })   },

程序开发中遇到问题:

this的用法:

第一步必须要赋值变量,通过变量去调用SetData().

var that = this

that.setData()

转载请注明原文地址: https://www.6miu.com/read-43010.html

最新回复(0)