你的位置:首页 > 软件开发 > 操作系统 > 小程序开发之——简简天气

小程序开发之——简简天气

发布时间:2017-07-13 00:00:22
小程序已经出来有段时间了,之前也有了解过。早起也有了解过,但是很不看好。最近因工作需要,开始学了小程序。随着小程序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 (#换成@)。