国庆七天乐，写博也快乐之微信小程序天气预报+根据天气自动变换背景图实战（使用和风天气API）

hello，大家好，这里是X大魔王，先提前祝各位国庆节快乐😽😽
这里还是继续带来微信小程序的一些内容，是我之前做项目的一个内容，这里给各位分享一下，我觉得还蛮不错的~🍊🍊🍊

效果图🏙️

图比较多，我这里就直接全部弄一起了😎可以看到背景是变了但是头像下方的字全是“晴”，当时是为了得到效果，因为这个字是要你当前的城市真正的天气而得到的，比如：“晴”、“阴”这种，由于现在我要给各位看一下背景图，这个字各位可以先不用管，这里效果比较多，图片我就只放了部分哈，毕竟这个天气太多了😶‍🌫️😶‍🌫️😶‍🌫️
这里只是背景颜色的变换，不是下面的小程序的全部噢注意一下~下面的是我当时写项目的个人中心截图，这篇博文只是分享背景颜色的变换，不过喜欢的朋友可以评论留言，我后续可以出教程🐶🐶

当时我所在的城市是阴天，刚好就截了这张图~~

夜晚的都是统一的噢，不管是下雨还是下雪，夜晚都是一个背景颜色，细心的朋友可能发现了，这个背景是变了，并且这个“字体颜色”也变了噢🐶🐶

和风天气开发者😏

打住！！可能有朋友看到这里就撤退了！但是这一部分真的非常非常简单！
各位不妨继续往下看😏😏

和风天气开发者官网

玩过高德地图开发者或者腾讯地图开发者的朋友肯定就很有经验，因为流程都是一样的😏

注册或者登录好之后，进入控制台：
创建应用->选择免费开发版本->应用名称随便填->类型选择Web API，创建好之后就可以得到key

这样和风天气这一块我们就搞定了，接下来的难点就在小程序上了，就是要调用和风天气的API😏😏😏

小程序开发🐶

app.wcss ⭐

我们先对天气背景颜色进行全局的配置

/* 全局变量定义 设置主题颜色，字体大小等 */
page{
   
  /* 主题颜色 */
  --themeColor:#FF5700;
  /* 字体大小 rpx自适应大小 */
  font-size: 28rpx;
  --sunny:-webkit-linear-gradient(top,#1c92d2,#b3f5e1,#f2fcfe);
  --cloudy: -webkit-linear-gradient(top,#c1e3f8,#eef2f3);
  --overcast: -webkit-linear-gradient(top,#8e9eab,#eef2f3);
  --rainny: -webkit-linear-gradient(top,#1f2429,#bdc3c7);
  --night: -webkit-linear-gradient(top,#bdc3c7,#2c3e50);
  --white: #fff;
  --blick: #000;
}

天气预报⛅🌤️

注意事项🍐

天气预报这一块不全是我做的，我是参考了别人的😏😏😏做样式这一块我是真的不太行🥸🥸我是在它的基础之上增删改查，望见谅😶‍🌫️😶‍🌫️
在河源 源城旁边的那个绿色logo是我从icon-font下来的，如果你们复制代码过去之后是看不见的，你们可以自行修改
在js文件里，你们将APIKEY换成刚刚你们申请的key即可，一般将这个key值保存在constants里

wxml

<view class="header-modular" wx:if="{
    {now}}">
	<image class="bg-wave" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/bg_wave.gif"></image>
	<view class="row">
		<view class="row location-wrap" bindtap="selectLocation">
      <iconfont name="22location" size="30" style="margin-right: 10rpx;" /> 
			<view class="title">{
  {City}} {
  {County}}</view>
		</view>

	</view>
	<view class="row">
		<view class="tmp">{
  {now.temp}}°</view>
		<image class="icon-weather" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{
    {now.icon}}.png"></image>
	</view>
	<view class="tips-wrap">
		<view class="tips ">{
  {now.windDir}} {
  {now.windScale}}级</view>
		<view class="tips ">湿度 {
  {now.humidity}}%</view>
		<view class="tips ">气压 {
  {now.pressure}}Pa</view>
	</view>
</view>

<view class="card-modular " wx:if="{
    {hourly}}">
	<view class="title">24小时预报</view>
	<view class="card-wrap">
		<block wx:for="{
    {hourly}}" wx:key="index">
			<view class="item hourly">
				<view class="text-gray">{
  {item.time}}</view>
				<image class="icon" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{
    {item.icon}}.png"></image>
    
				<view class="text-primary mb-32">{
  {item.temp}}°</view> 
				<view>{
  {item.windDir}}</view>
				<view class