微信小程序开发笔记

🎀 文章作者：二土电子🐸 期待大家一起学习交流！

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

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

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

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

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

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

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

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

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

主页.wxml代码如下

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

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

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

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

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

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

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

天气显示代码如下