1. Using the time of two days in the weekend and referring to the style of small weather, a small weather program, Xiaoyao weather, was established.

2. The function is very simple. You can check the weather in the current area and search the weather in other areas, and you can generate pictures to share.

3. After going online, we found a problem that the weather interface provided at a high speed does not distinguish district level cities. For example, there is Baoshan District in Shanghai and there is one in the northeast. There is no distinction. This is a bug

4. If you have any other questions, you are welcome to put forward your opinions and suggestions.

Welcome to scan

Details are as follows

Some codes are as follows:

    <!-- Generate pictures -->
    <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">Return</text>
      </view>
    </view>

        <!--Choice area-->
        <view class="selectArea {{getLotion === '' ? 'nomargin' :'' }}" wx:if="{{selectArea}}">
            <!-- Return -->
            <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="Please enter region"  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">Historical record</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">Hot cities</view>
                <view class="recCity">
                     <view class="recCityBtn getLocation" bindtap="selectLocation"><image class="getLocationimg" src="../images/hoticon.png"></image>Location</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: 'Weather in two hours' + data.hourly[2].weather + ' ，temperature ' + data.hourly[2].temp + '°',
            quality: data['aqi'].quality
          })
          // After the search returns successfully, clear the input box and put the search results in the history
          // _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: 'Tips',
            content: res.msg,
            success: function (res) {
              if (res.confirm) {
                _this.setData({
                  msgText: 'Location acquisition failed!!! Please select manually',
                  loadingBtn: true
                })
              } else if (res.cancel) {
                console.log('User click Cancel')
              }
            }
          })
        }
      },

// Location acquisition
  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: 'Location acquisition failed!!! Please select manually',
          loadingBtn:true
        })
      }
    })
  },