极简天气之小夭天气

1、利用周末两天的时间，参考小天气的风格，撸了一个天气小程序，【小夭天气】。

2、功能十分简单，查看当前地区的天气和搜索其他地区的天气，增加了可以生成图片分享出去。

3、上线后发现一个问题，就是极速提供的天气接口对区级市没有区分，例如 上海有宝山区，东北那也有一个。就没有区分。这是一个bug

4、其他有什么问题欢迎大家提意见和建议。

欢迎大家扫码体验

详情如下

部分代码如下：

<!-- 生成图片 -->
<view class="saveimage" wx:if="{{canvasPic}}">
  <view class="loading" wx:if="{{loading}}"><image src="../images/loading.gif" class="loading"></image></view>
  <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
  <view class="picbox">
      <view class="saveimageCont"><image src="{{shareImage}}" mode="widthFix"></image></view>
      <button class="keep" catchtap='eventSave'>{{shareText}}</button> 
      <text class="keep keep2" bindtap="closesaveimage">返回</text>
  </view>
</view>

<!--选择地区-->
<view class="selectArea {{getLotion === '' ? 'nomargin' :'' }}" wx:if="{{selectArea}}">
    <!-- 返回 -->
    <view class="selectAreaBox" :dss="getLotion">
        <view class="back" wx:if="{{getLotion === 'null' || getLotion !== ''}}">
            <view class="backIcon" bindtap="back">
                <image src="../images/back.png" class="img"></image>
            </view>
        </view>
        <view class="input">
            <input type="text" class="Jinput" placeholder="请输入地区"  bindinput='writeArea' value="{{inpuText}}" ></input>
            <image src="../images/serchicon.png" class="imgicon"></image>
            <view class="clear" bindtap="clearInpuText"><image src="../images/clear.png" class="clearicon"></image></view>
            <view class="sureBtn" bindtap="inputGoWeather"><image src="../images/surebtn.png" class="sureicon"></image></view>
        </view>
        <view class="tips">历史记录</view>
        <view class="hisCity">
            <view class="hisCityBtn" data-city="{{list}}" wx:for="{{historyArea}}" wx:for-item="list" wx:key wx:if="historyArea.length > 0"  bindtap="goWeather">{{list}}</view>
        </view>
        <view class="tips">热门城市</view>
        <view class="recCity">
             <view class="recCityBtn getLocation" bindtap="selectLocation"><image class="getLocationimg" src="../images/hoticon.png"></image>定位</view>
            <view class="recCityBtn" data-city="{{list}}" wx:for="{{hotArea}}" wx:for-item="list" wx:key bindtap="goWeather">{{list}}</view>
        </view>
    </view>
</view> 

getWeatherData:function(city){
   var _this = this,
         thisdata = this.data,
         historyArea = thisdata.historyArea;
   wx.request({
     url: _this.data.api,
     data: {
       "city": city
     },
     method: 'get',
     header: {
       'Content-Type': 'application/json'
     },
     dataType: 'jsonp',
     jsonp: 'callback',
     success: function (res) {
       var res = res.data
       res = JSON.parse(res)
       if (res.status === "0") {
         var data = res['result']
         data.img = '../images/condicon/'+data.img+'b.png'
         _this.setData({
           getSuccess: 'true',
           getLotion: city,
           realdata: data,
           clock: data.updatetime,
           aqi: data['aqi'],
           aqiMsg: data.aqi.aqiinfo['affect'] + '，' + data.aqi.aqiinfo['measure'],
           life: data['index'],
           daily: data['daily'],
           hourly: data['hourly'],
           airPredict: '两小时之后天气' + data.hourly[2].weather + ' ，温度 ' + data.hourly[2].temp + '°',
           quality: data['aqi'].quality
         })
         // 搜索返回成功后 清除 输入框，将搜索结果放入历史记录
         // _this.$refs.clearText.value = ''
         if (thisdata.inpuText !== '') {
           if (thisdata.historyArea.indexOf(thisdata.inpuText) === -1) {
             historyArea.push(thisdata.inpuText)
             _this.setData({
               historyArea: historyArea
             })
           }
         }
         _this.back()
       } else {
         wx.showModal({
           title: '提示',
           content: res.msg,
           success: function (res) {
             if (res.confirm) {
               _this.setData({
                 msgText: '位置获取失败！！！请手动选择',
                 loadingBtn: true
               })
             } else if (res.cancel) {
               console.log('用户点击取消')
             }
           }
         })
       }
     },

// 定位获取
  selectLocation: function () {
    let _this = this
    _this.getlocation();
  },
  getlocation: function () {
    var _this = this
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        console.log(res)
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) { 
            console.log(res)
            _this.setData({
              getLotion: res.result.address_component.district ? res.result.address_component.district : res.result.address_component.city
            })
            wx.setNavigationBarTitle({
              title: res.result.address_component.district
            })
            _this.getWeatherData(res.result.address_component.district)
          }
        })
      },
      fail:function(res){
        _this.setData({
          msgText: '位置获取失败！！！请手动选择',
          loadingBtn:true
        })
      }
    })
  },