文章目录

一、实现效果
二、天气查询API
三、微信小程序设计思路
- 1、页面跳转
- 2、获取天气信息
- 3、信息显示
四、程序实现
- 1、页面跳转功能
- 2、获取天气信息
- - 2.1、变量声明
  - 2.2、获取所在地区天气信息
- 3、天气信息显示
五、总结
- 1、遇到的问题
- 2、后续优化方向
- 3、获取未来天气的方法

一、实现效果

本人的需求比较简单，只是一个页面用来显示两个人所在地的实时天气信息，主要信息包括所在省份、所在地区、天气、实时气温、风向、风力、空气湿度和发布时间，可以根据实时天气信息显示相应天气图标，下面是实现效果

二、天气查询API

本人使用的是高德的天气查询API，相关文档可点击链接查看。高德的天气查询API是一个简单的HTTP接口，可以根据用户输入的城市编码获取相应地区的天气情况，但是使用前需要申请自己的key，具体申请方法可以点击这篇大佬的文章查看微信小程序开发——调用免费天气api接口（高德、天气API）

使用高德天气查询API是免费的，而且可查询次数非常多，完全足够普通的个人开发者使用。

三、微信小程序设计思路

1、页面跳转

看过之前文章的应该清除，本人的小程序是分三个部分，最中间是首页，也就是公共部分，查询天气是常用的功能，因此直接放在了公共部分的页面，点击天气图标可以进入上面的天气显示页面，公共页面如下图

点击图中的天气图标即可，音乐是另外一个功能，但是由于时间有限，本文只介绍天气查询功能的实现，音乐功能后续会另外介绍，此外还有已经基本实现的记事本功能，期待的小伙伴们可以关注一下专栏呀，希望大家互相学习，共同进步。

2、获取天气信息

跳转到天气页面后需要获取天气信息，根据高德的开发指南，需要知道两个人所在地区的城市编码，城市编码可以根据高德开发指南里的城市编码表确定。此外，根据开发指南，不仅可以获取实况天气，还可以获取预报天气，也就是未来几天的天气，本人尝试过，获取预报天气时只有白天天气、夜间天气、白天温度、夜间温度、白天风力、风向和夜间风力、风向这些信息，没有发布时间、实时气温、空气湿度这些信息。

3、信息显示

正如最开始的效果图，本人的需求只是显示两个人的实时天气，所以在信息显示方面设计的较为简单，为了不那么单一，特地加上了两个头像，大家也可以根据自己的想法进行渲染修饰。

天气图标的话是利用wx:if函数判别当前天气情况然后显示的，实现方法较为粗暴，如果大佬有更好的方法可以评论区交流呀。

四、程序实现

1、页面跳转功能

页面跳转功能实现较为简单，只是插入了一张图片，给图片加入了点击触发的跳转函数，当然还有其他方法，这里就暂时不做介绍了，后续记事本的文章会介绍另一种方法。

主页.wxml代码如下

<!-- 天气 --><view class="app"><image src="../../image/weather_cover/weather.png" bindtap="weather" style="width: 133rpx; height: 129rpx; display: inline-block; box-sizing: border-box; position: relative; left: -60rpx; top: -300rpx"></image><text style="position: relative; left: -155rpx; top: -260rpx">天气</text></view>

咳咳，本人由于能力有限，在调整图标位置和大小时使用了微信开发工具的可视化开发功能，所以导致整体代码有些长，希望大家多多指教，虽然后来发现可以通过在.wxss文件增加对应的样式可以达到这种调整大小的效果，但是在尝试的过程中发现对于位置的调节并没有达到预期效果，需要继续学习。

页面跳转.wxss文件代码如下

.app{width: auto;height: auto;
}

页面跳转.ts文件代码如下

weather:function(){wx.navigateTo({url:'/pages/weather/weather'})},

2、获取天气信息

获取天气信息需要上面申请的key和所在地的城市编码，还是按照惯例，先上程序

2.1、变量声明

data: {lin_weather_inform:{},},

声明一个变量用来存储查询到的天气信息。

2.2、获取所在地区天气信息

onLoad:function(){var that = this;// 获取小林所在地区温度wx.request({url: 'https://restapi.amap.com/v3/weather/weatherInfo',data:{'key': '自己申请的key',   //改为自己申请的Key'city': '210911',},success:function(res){that.setData({lin_weather_inform: res.data,})}})}

在对应位置填入自己申请的key和城市编码即可，url的网址可以直接用同一个。

3、天气信息显示

这里先解释一下，本人为了实现天气图标显示并且能够根据实况天气显示对应图标，加入了一个判断过程，所以显得程序非常繁杂，如果大佬有好的方法还请评论区指教呀。

天气显示代码如下

<!-- 小林天气 -->
<view class="lin_weather"><image src="../../image/weather_cover/lin.png" style="width: 232rpx; height: 227rpx; display: inline-block; box-sizing: border-box; position: absolute; left: 473rpx; top: 30rpx"></image><view class="info" style="position: absolute; left: 55rpx; top: 120rpx"> 所在省份：{{lin_weather_inform.lives[0].province}}</view><view class="info" style="position: absolute; left: 55rpx; top: 190rpx"> 城市：{{lin_weather_inform.lives[0].city}}</view><view class="info" style="position: absolute; left: 55rpx; top: 250rpx">天气：{{lin_weather_inform.lives[0].weather}}</view><!-- 天气图标判断显示 --><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('晴')}}" src="../../image/weather_cover/fine.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('阴')}}" src="../../image/weather_cover/cloudy_yin.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('多云')}}" src="../../image/weather_cover/cloudy.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雨') || lin_weather_inform.lives[0].weather == ('阵雨') || lin_weather_inform.lives[0].weather == ('小雨') || lin_weather_inform.lives[0].weather == ('中雨') || lin_weather_inform.lives[0].weather == ('大雨') || lin_weather_inform.lives[0].weather == ('暴雨')}}" src="../../image/weather_cover/rain.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雷阵雨') || lin_weather_inform.lives[0].weather == ('雷阵雨并伴有冰雹')}}" src="../../image/weather_cover/thunderstorm.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雪') || lin_weather_inform.lives[0].weather == ('阵雪') || lin_weather_inform.lives[0].weather == ('小雪') || lin_weather_inform.lives[0].weather == ('中雪') || lin_weather_inform.lives[0].weather == ('大雪') || lin_weather_inform.lives[0].weather == ('暴雪')}}" src="../../image/weather_cover/snow.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雾')}}" src="../../image/weather_cover/fog.png" style="position: absolute; left: 220rpx; top: 250rpx"></image><view class="info" style="position: absolute; left: 55rpx; top: 310rpx"> 实时气温：{{lin_weather_inform.lives[0].temperature}}℃</view><view class="info" style="position: absolute; left: 55rpx; top: 370rpx"> 风向：{{lin_weather_inform.lives[0].winddirection}}</view><view class="info" style="position: absolute; left: 55rpx; top: 430rpx"> 风力：{{lin_weather_inform.lives[0].windpower}}</view><view class="info" style="position: absolute; left: 55rpx; top: 490rpx"> 空气湿度：{{lin_weather_inform.lives[0].humidity}}%</view><view class="info" style="position: absolute; left: 55rpx; top: 550rpx"> 发布时间：{{lin_weather_inform.lives[0].reporttime}}</view>
</view>

五、总结

1、遇到的问题

在利用上述方法实现天气查询时需要在微信小程序开发工具中不校验合法域名这一项勾选，否则会报错，这么设置的话虽然可以正常调试，但是对于需要发布的微信小程序会导致无法发布，要根本解决这个问题需要我们将网址添加到request的合法域名中。

2、后续优化方向

后续可以添加一个按钮，用来查询未来天气，点击可以看到未来几天的天气情况。

3、获取未来天气的方法

首先看一下高德官方文档的介绍

由此可以看出，只需要在wx.request中将气象类型修改成all即可，具体程序如下

wx.request({url: 'https://restapi.amap.com/v3/weather/weatherInfo',data:{'key': '自己的key',   //改为自己申请的Key'city': '210911','extensions': 'all',},success:function(res){that.setData({lin_weather_inform: res.data,})}})

微信小程序开发笔记—天气获取显示相关推荐

微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记（1.1）滚动选择器picker的使用
微信小程序开发笔记(1.1)滚动选择器picker的使用前言滚动选择器picker 普通选择器多列选择器时间选择器日期选择器省市区选择器前言最近被拉来做小程序,因为时间比较赶,其他方面 ...
微信小程序开发笔记—设置页面密码
文章目录一.功能概述二.实现效果三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...
微信小程序开发笔记一
微信小程序开发笔记一.微信小程序的结构 1.初识小程序 2.快捷键 3.查阅文档二.常用组件 1.input组件 2.button组件三.小程序中的函数 1.函数的两种定义方法 2.带参函数 3 ...
微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序开发笔记——wsdchong
微信小程序开发笔记一.小程序简介小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...

微信小程序开发笔记—天气获取显示

文章目录

一、实现效果

二、天气查询API

三、微信小程序设计思路

1、页面跳转

2、获取天气信息

3、信息显示

四、程序实现

1、页面跳转功能

2、获取天气信息

2.1、变量声明

2.2、获取所在地区天气信息

3、天气信息显示

五、总结

1、遇到的问题

2、后续优化方向

3、获取未来天气的方法

微信小程序开发笔记—天气获取显示相关推荐

最新文章

热门文章