极简天气之小夭天气

1、利用周末两天的时间，参考小天气的风格，撸了一个天气小程序，【小夭天气】。2、功能十分简单，查看当前地区的天气和搜索其他地区的天气，增加了可以生成图片分享出去。3、上线后发现一个问题，就是极速提供的天气接口对区级市没有区分，例如 上海有宝山区，东北那也有一个。就没有区分。这是一个bug4、其他有什么问题欢迎大家提意见和建议。欢迎大家扫码体验详情如下部分代码如下： <!– 生成图片 –> <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 }) } }) },