微信小程序开发之天气预报，调用百度天气接口，显示温馨提示和之后的天气

效果预览

页面功能介绍

此天气预报功能首先获取用户当前位置城市名，对于获取当前位置城市名和百度天气ak申请有疑问可以参考之前文章，然后根据城市名调用百度天气接口返回天气各项数据，最后对返回的数据进行处理，利用swiper轮播组件来实现滚动展示当天天气、温馨提示和之后天气的情况。

主要代码分析

1：根据当前时间不同，显示不同的背景图片和天气图片，通过Date对象的getHours()方法来获取当前小时，进而进行判断，晚上6点到早6点显示夜间图片，其他时间显示白天图片

getTime: function () {var date = new Date();var minute = date.getMinutes() >= 10 ? date.getMinutes() : ('0' + date.getMinutes());var nowhour = date.getHours()var src = (nowhour >= 18 || nowhour <= 6) ? '12.png' :'11.jpg'var show = (nowhour >= 18 || nowhour <= 6) ? false : truevar hour = date.getHours() >= 10 ? date.getHours() : ('0' + date.getHours());var now = date.getDate() >= 10 ? date.getDate() : ('0' + date.getDate());var todayDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + now;var todayTime = hour + ':' + minute;this.setData({show:show,src:src,todayDate: todayDate,todayTime: todayTime})},

2：轮播图页面调用

为了使得天气预报的效果更直观，此案例才用了一个自动播放的轮播来分别呈现今日天气主要信息、温馨提示信息和之后天气预报概况，不用用户点击选择；同时为了使得页面代码简洁化，分别将不同的模块存储于不同的wxml文件中，并在主文件中试用include来进行调用。

<swiper autoplay interval="5000" duration="3000">
<swiper-item>
<view class="content"><image class="bg" src="{{src}}"></image><view class="today"><view class="info"><view class="city">{{city}}</view><view class="temp">{{temp}}</view><view class="weather-img"><block wx:if="{{show}}"><image src="{{dayImg}}" class="today-img"></image></block><block wx:else><image src="{{nightImg}}" class="today-img"></image></block></view><view class="weather">{{weather}}</view>      </view><view class='time'><view class="today-time">{{todayTime}}</view><view class="today-date">{{todayDate}}</view></view></view>
</view>
</swiper-item>
<swiper-item>
<include src="tips.wxml" />
</swiper-item>
<swiper-item>
<include src="future.wxml" />
</swiper-item>
</swiper>

3：天气数据获取及处理

天气数据的获取就是调用百度的天气查询接口，提供城市名和用户注册的ak，返回的数据比较多，根据需要对数据进行处理即可，可以使用js的各种方法来实现数据的匹配、过滤等。

loadWeather: function (city) {var that = thiswx.request({url: 'https://api.map.baidu.com/telematics/v3/weather?location=' + city + '&output=json&ak=' + ak,success(res) {var temReg = /\d+℃/;that.setData({temp: res.data.results[0].weather_data[0].date.match(temReg)[0],dayImg: res.data.results[0].weather_data[0].dayPictureUrl,nightImg: res.data.results[0].weather_data[0].nightPictureUrl,weather: res.data.results[0].weather_data[0].weather + ' | ' + res.data.results[0].weather_data[0].wind,tips: res.data.results[0].index,future_temp: res.data.results[0].weather_data});}})},

4：后三天每天天气显示

当天数据的date字段比较复杂，此处利用index进行判断，如果为0是第一条数据，即当天数据的话则直接显示今天，不显示其中的具体内容，当然也可以在js中使用filter方法过滤掉第一条数据再进行赋值。

<view class="content"><image class="bg" src="11.jpg"></image><block wx:for="{{future_temp}}" wx:key="key"><view class="future-item"><view class="future-time" wx:if="{{index == 0}}">今天</view><view class="future-time" wx:else>{{item.date}}</view><view class="future-img-container"><block wx:if="{{show}}"><image src="{{item.dayPictureUrl}}" class="future-img"></image></block><block wx:else><image src="{{item.nightPictureUrl}}" class="future-img"></image></block></view><view class="future-tem">{{item.temperature}}</view></view></block>
</view>

如需要源码，关注下面公众号，后台回复天气预报小程序即可获取，感谢阅读，感谢关注！

微信小程序开发之天气预报，调用百度天气接口，显示温馨提示和之后的天气相关推荐

php网页抓取浏览者手机号码_微信小程序开发之获取用户手机号码(php接口解密)...
后边要做一个微信小程序,并要能获取用户微信绑定的手机号码.而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如 ...
微信小程序开发、uni-app开发、腾讯AI、百度AI
目录 1.微信小程序开发 2.uni-app开发 3.腾讯AI 4.百度AI 5.微信小程序开发与uni-app开发 1.微信小程序开发以下是微信小程序的API,可以在里面进行查阅微信开放文档微 ...
微信小程序开发系列六：微信框架API的调用
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序开发：集成腾讯地图的步骤
在微信小程序开发的时候,会避免不了的使用腾讯送的大礼包,从微信支付到腾讯地图,一条龙的服务,不得不说鹅厂的实力,但是话又说回来了,鹅厂的官方API真是不敢恭维,尤其是微信小程序开发文档,如果不熟悉的话 ...
微信小程序开发：腾讯地图集成详细步骤
前言在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯大礼包,从微信支付到腾讯地图,一条龙的腾讯大礼包,不得不说鹅厂的实力是无可比拟的.但是话又说回来了,鹅厂的官方 API ...
微信小程序开发：腾讯地图集成步骤（旧题新说）
在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯大礼包,从微信支付到腾讯地图,一条龙的腾讯大礼包,不得不说鹅厂的实力是无可比拟的. 但是话又说回来了,鹅厂的官方API真是不敢 ...
web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...

微信小程序开发之天气预报，调用百度天气接口，显示温馨提示和之后的天气

微信小程序开发之天气预报，调用百度天气接口，显示温馨提示和之后的天气相关推荐

最新文章

热门文章