小程序開發之——簡簡天氣
阿新 • • 發佈:2017-07-12
eth exp fff log func ces nth 樣式表 [0
小程序已經出來有段時間了,之前也有了解過。早起也有了解過,但是很不看好。
最近因工作需要,開始學了小程序。
隨著小程序SDK開放的API越來越多,功能也越來越強大,也許一不留神,他又火了。
拿來練手的是一個天氣預報(好像每次練手都是天氣預報,尷尬了……)
先看運行效果:(目前已經上線了,具體效果可以掃右邊二維碼)
首先需要的就是天氣接口,這種接口有很多,而且大部分都是免費的。無意中找到一個百度的接口:
http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getweather ,然後就可以開發了。
具體不多說了,直接上代碼:
主頁面:
index.wxml
<!--index.wxml--> <view style="background-color:#36c;color:#fff;min-height:{{device.height}}px"> <view class="box-city">{{weather.today.city}}</view> <view class="box-date">{{weather.today.date}}</view> <view class="flex-weather"> <view class="flex-item-3"> <image wx:if="{{weather.today.icon}}" src="../../images/icon/{{weather.today.icon}}" style="height:{{device.width/4}}px;width:{{device.width/4}}px"></image> </view> <view class="flex-item-3"> <view style="font-size:2.5em;font-weight: bold;">{{weather.today.c_temperature}}</view> <view class="pm25" style="background-color:{{weather.today.pm_color}}">{{weather.today.pm25}}</view> </view> <view class="flex-item-3"> <view class="weather-text" style="font-size:1.5em;font-weight:bold">{{weather.today.weather}}</view> <view class="weather-text">{{weather.today.wind}}</view> <view class="weather-text">{{weather.today.temperature}}</view> </view> </view> <view wx:for="{{weather.list}}" class="flex-weather"> <view style="font-size:0.9em;font-weight:bold" class="flex-item-3">{{item.date}}</view> <view class="flex-item-3"> <image src="../../images/icon/{{item.icon_day}}" style="height:{{device.width/8}}px;width:{{device.width/8}}px"></image> <image src="../../images/icon/{{item.icon_night}}" style="height:{{device.width/8}}px;width:{{device.width/8}}px"></image> </view> <view class="flex-item-3"> <view style="font-size:1.1em;font-weight:bold">{{item.weather}}</view> <view style="font-size:0.8em">{{item.temperature}}</view> <view style="font-size:0.8em">{{item.wind}}</view> </view> </view> <view class="flex-weather" wx:for="{{weather.index}}"> <view style="width:28%; padding: 0.3em;"> <view style="font-size:0.8em;">{{item.title}}</view> <view style="font-size:1.5em;font-weight:bold;">{{item.zs}}</view> </view> <view style="width:72%; padding: 0.3em;font-size:0.9em;text-align:left;">{{item.des}}</view> </view> </view>
樣式表文件 index.wxss
/**index.wxss**/ .box-city { font-size: 2.5em; text-align: center; vertical-align: middle; padding-top: 0.1em; padding-bottom: 0.1em; } .box-date { font-size: 0.8em; text-align: center; vertical-align: middle; padding-top: 0.1em; padding-bottom: 0.1em; } .flex-weather { flex-direction: row; display: -webkit-flex; align-items: center; text-align: center; margin-top: 0.1em; margin-bottom: 0.3em; } .flex-item-3 { width: 33.33%; padding: 0.1em; } .pm25 { font-size: 1.5em; margin-left: 1em; margin-right: 1em; border-radius: 0.1em; } .weather-text { font-size: 0.9em; margin-bottom: 0.1em; margin-top: 0.1em; }
邏輯層 index.js
var Bmap = require("../../bmap-wx.js"); var util = require("../../util.js"); var app = getApp(); Page({ data: { weather: {}, device: app.globalData.deviceInfo }, onLoad: function () { var that = this; var bmap = new Bmap.BMapWX({ ak: "需要填寫你的ak,免費申請"}); bmap.weather({ success:function(data){ that.setData({ weather: util.formatWeather(data)}); }, fail: function(data){ wx.showToast({ title: ‘獲取天氣信息失敗!‘ }); } }); } })
用來處理json的工具類 util.js
function formatWeather(res) { var weathers = { today: {}, list: [] }; console.log(res); weathers.today.city = res.currentWeather[0]["currentCity"]; weathers.today.pm25 = res.currentWeather[0]["pm25"]; weathers.today.temperature = res.currentWeather[0]["temperature"]; weathers.today.weather = res.currentWeather[0]["weatherDesc"]; weathers.today.wind = res.currentWeather[0]["wind"]; var today_date = res.currentWeather[0]["date"].split(/[ :()]/); weathers.today.c_temperature = today_date[4]; weathers.today.date = today_date[1] + " " + today_date[0]; var weatherArray = res.originalData.results[0].weather_data; for (var i = 0; i < weatherArray.length; i++) { var weather = {}; var date = new Date((Date.parse(res.originalData.date) / 1000 + (86400 * i)) * 1000); var month = date.getMonth() + 1; month = month > 9 ? month + "月" : "0" + month + "月"; weather.date = month + date.getDate() + "日" + " " + weatherArray[i]["date"].split(" ")[0]; weather.temperature = weatherArray[i]["temperature"]; weather.weather = weatherArray[i]["weather"]; weather.wind = weatherArray[i]["wind"]; var day_pic = weatherArray[i]["dayPictureUrl"]; weather.icon_day = day_pic.substring(day_pic.lastIndexOf("/") + 1, day_pic.length); var night_pic = weatherArray[i]["nightPictureUrl"]; weather.icon_night = night_pic.substring(night_pic.lastIndexOf("/") + 1, night_pic.length); weathers.list.push(weather); } if (new Date().getHours() > 18) { weathers.today.icon = weathers.list[0].icon_night; } else { weathers.today.icon = weathers.list[0].icon_day; } if (weathers.today.pm25 > 300){ weathers.today.pm_color = "#6d001d"; }else if (weathers.today.pm25 > 200) { weathers.today.pm_color = "#884898"; } else if (weathers.today.pm25 > 150) { weathers.today.pm_color = "#f00"; } else if (weathers.today.pm25 > 100) { weathers.today.pm_color = "#fc0"; }else{ weathers.today.pm_color = "#0f0"; } weathers.index = []; var indexArray = res.originalData.results[0].index; for(var i = 0; i < indexArray.length; i++){ var index = { title: indexArray[i].title, des: indexArray[i].des, zs: indexArray[i].zs }; weathers.index.push(index); } console.log(weathers); return weathers; } module.exports = { formatWeather: formatWeather }
最後,需要下載一下
bmap-wx.js
地址:http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download
至此,全部完成工作!
小程序開發之——簡簡天氣