小程序已经出来有段时间了,之前也有了解过。早起也有了解过,但是很不看好。最近因工作需要,开始学了小程序。随着小程序SDK开放的API越来越多,功能也越来越强大,也许一不留神,他又火了。拿来练手的是一个天气预报(好像每次练手都是天气预报,尴尬了……)先看运行效果:(目前已经上线了, ...
小程序已经出来有段时间了,之前也有了解过。早起也有了解过,但是很不看好。
最近因工作需要,开始学了小程序。
随着小程序SDK开放的API越来越多,功能也越来越强大,也许一不留神,他又火了。
拿来练手的是一个天气预报(好像每次练手都是天气预报,尴尬了……)
先看运行效果:(目前已经上线了,具体效果可以扫右边二维码)
首先需要的就是天气接口,这种接口有很多,而且大部分都是免费的。无意中找到一个百度的接口:
http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getweather ,然后就可以开发了。
具体不多说了,直接上代码:
主页面:
index.w
<!--index.w--><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/loading.gif' data-original="../../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/loading.gif' data-original="../../images/icon/{{item.icon_day}}" style="height:{{device.width/8}}px;width:{{device.width/8}}px"></image> <image src='/images/loading.gif' data-original="../../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>
原标题:小程序开发之——简简天气
关键词:小程序
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。