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

lily_808

于 2020-05-06 18:49:13 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/lily_808/article/details/105956773

版权

本文介绍如何在微信小程序中开发天气预报功能，利用用户位置和百度天气接口获取数据，通过swiper组件展示天气信息，包括背景图片、天气图片的切换，以及后三天的天气预报。代码组织清晰，采用include调用不同模块。

摘要由CSDN通过智能技术生成

效果预览

页面功能介绍

此天气预报功能首先获取用户当前位置城市名，对于获取当前位置城市名和百度天气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 : true
    var hour = date.getHours() >= 10 ? date.getHours() : ('0' +