极简天气之小夭天气

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
})
}
})
},