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

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