在转载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()