1、利用周末兩天的時(shí)間，參考小天氣的風(fēng)格，擼了一個(gè)天氣小程序，【小夭天氣】。

2、功能十分簡(jiǎn)單，查看當(dāng)前地區(qū)的天氣和搜索其他地區(qū)的天氣，增加了可以生成圖片分享出去。

3、上線后發(fā)現(xiàn)一個(gè)問題，就是極速提供的天氣接口對(duì)區(qū)級(jí)市沒有區(qū)分，例如 上海有寶山區(qū)，東北那也有一個(gè)。就沒有區(qū)分。這是一個(gè)bug

4、其他有什么問題歡迎大家提意見和建議。

歡迎大家掃碼體驗(yàn)

小夭天氣

詳情如下

首頁(yè)

首頁(yè)

首頁(yè)

空氣質(zhì)量詳情

生活指數(shù)詳情

多日天氣詳情

部分代碼如下：

    <!-- 生成圖片 -->
    <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>

        <!--選擇地區(qū)-->
        <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="請(qǐng)輸入地區(qū)"  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: '兩小時(shí)之后天氣' + data.hourly[2].weather + ' ，溫度 ' + data.hourly[2].temp + '°',
            quality: data['aqi'].quality
          })
          // 搜索返回成功后 清除 輸入框，將搜索結(jié)果放入歷史記錄
          // _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: '位置獲取失?。。?！請(qǐng)手動(dòng)選擇',
                  loadingBtn: true
                })
              } else if (res.cancel) {
                console.log('用戶點(diǎn)擊取消')
              }
            }
          })
        }
      },

// 定位獲取
  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: '位置獲取失?。。?！請(qǐng)手動(dòng)選擇',
          loadingBtn:true
        })
      }
    })
  },