Bootstrap

微信小程序——天气查询

1.外观

颜色会随着天气改变而改变
在这里插入图片描述
在这里插入图片描述

2.代码

weather1.wxml

<!--pages/weather1/weather1.wxml-->
<swiper indicator-dots="{{indicatorDots}}" indicator-color="rgba(255, 255, 255, .3)">
  <!-- 第一页 -->
  <swiper-item class="card1 card" >
    <view class="update_info">
      <text style="color: white">最后更新于{{update_time}}</text>
    </view>
    <view class="today" style="background: linear-gradient({{bgcolor[t_wea_img][0]}}, {{bgcolor[t_wea_img][1]}});">
      <!-- 今天的温度范围 -->
      <view class="today_tem">
        <text>{{t_tem1}}°C~{{t_tem2}}°C</text>
      </view>
      <!-- 今天的天气图标 -->
      <view class="today_img">
        <image class="img" style="width: 300rpx; height:300rpx" src="../../pics/{{t_wea_img}}.png"></image>
      </view>
      <!-- 今天的天气状况是晴？阴？雨？等等 -->
      <view class="today_wea">
        <text>{{t_wea}}</text>
      </view>  
      <view>
        <!-- 当前时刻温度 -->
        <view class="current_tem">
          <text>{{t_tem}}°C</text>
        </view>
        <!-- 城市和周几 -->
        <view style="wdith: 160rpx; display: inline-block; margin-left:90rpx">
          <view>
            <image src="../../pics/address.png" style="width: 40rpx; height:40rpx"></image>
            <text style="font-size: 45rpx">{{city}}\n</text>
          </view>
          <view style="margin-top: 10rpx"><text style="font-size: 40rpx; font-family:FangSong">{{t_week}}</text></view>
        </view>
      </view>
    </view>
    <!-- 未来三天天气 -->
    <view class="three_days" style="background-color: white">
      <!-- 明天天气 -->
      <view class="pre tomorrow"> 
        <text>明天</text>
        <image src="../../pics/{{t1_wea_img}}2.png" style="width: 150rpx; height:150rpx;"></image>
        <text>{{t1_tem2}}~{{t1_tem1}}</text>
      </view>
      <!-- 后天天气 -->
      <view class="pre ttomorrow">
        <text>{{t2_week}}</text>
        <image src="../../pics/{{t2_wea_img}}2.png" style="width: 150rpx; height:150rpx;"></image>
        <text>{{t2_tem2}}~{{t2_tem1}}</text>
      </view>
      <!-- 大后天天气 -->
      <view class="pre tttomorrow">
        <text>{{t3_week}}</text>
        <image src="../../pics/{{t3_wea_img}}2.png" style="width: 150rpx; height:150rpx;"></image>
        <text>{{t3_tem2}}~{{t3_tem1}}</text>
      </view>
    </view>
  </swiper-item>
  <!-- 第二页 -->
  <swiper-item class="card2 card">
    <view class="marquee_container" style="--marqueeWidth--:-40em">
      <view class="marquee_text">{{t_tips}}</view>
    </view>
    <!-- 模块一  空气质量 质量指数 PM2.5-->
    <view class="block1 block">
      <view>
        <image class="img" src="../../pics/air.png"></image>
        <text>空气质量：{{t_air_level}}</text>
      </view>
      <view>
        <image class="img" src="../../pics/qua.png"></image>
        <text>质量指数：{{t_air}}</text>
      </view> 
      <view>
        <image class="img" src="../../pics/pm2.5.png"></image>
        <text>PM2.5：{{t_pm25}}</text>
      </view>
    </view>
    <!-- 模块二 温度范围 湿度 气压-->
    <view class="block2 block">
      <view>
        <image class="img" src="../../pics/tem.png"></image>
        <text>{{t_tem1}}°C~{{t_tem2}}°C</text>
      </view>

      <view>
        <image class="img" src="../../pics/hum.png"></image>
        <text>湿度：{{t_hum}}</text>
      </view>
      <view>
        <image class="img" src="../../pics/pre.png"></image>
        <text>气压：{{t_pre}}</text>
      </view>
    </view>
    <!-- 模块三 风向 风速 能见度-->
    <view class="block3 block">
      <view>
        <image class="img" src="../../pics/wind.png"></image>
        <text>风向：{{t_win}}</text>
      </view>
      <view>
        <image class="img" src="../../pics/winm.png"></image>
        <text>{{t_winm}}</text>
      </view>
      <view>
        <image class="img" src="../../pics/visibility.png"></image>
        <text>能见度:{{t_visibility}}</text>
      </view>
    </view>
  </swiper-item>
</swiper>

weather1.wxss


swiper{
  height: 1470rpx;
  width: auto;
  background-size: cover;
  /*url里填写背景图片的base64编码，由于太长，我就没粘贴上*/
  background-image: url('') 
}
.card{
  width: 660rpx;
  display: flex; 
  flex-direction: column;
  align-items: center;
}

.today{
  justify-content: center;
  margin-top: 30rpx;
  width: 660rpx;
  height: 800rpx; 
  color: white;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
}
.today_tem{
  width: 660rpx; 
  height: 100rpx; 
  line-height:100rpx; 
  position:relative; 
  left: 20rpx; 
  font-size: 40rpx;
}
.today_img{
  width:660rpx; 
  height:400rpx;
  text-align:center;
}
.today_wea{
  width:660rpx; 
  height:40rpx; 
  text-align:center; 
  font-size:35rpx; 
  font-family:FangSong;
}
.current_tem{
  display: inline-block; 
  width:400rpx; 
  margin-top:100rpx; 
  margin-left:20rpx;
  font-size:120rpx;
}
.three_days{
  display: flex;
  flex-direction: row;
  width: 660rpx;
  height: 550rpx; 
  color: rgb(172, 169, 169);
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
}
.pre{
  margin-top: 20rpx;
  margin-bottom: 20rpx; 
  height: 510rpx;
  width: 219.5rpx;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: space-between;
}
.tomorrow{
  border-right: 0.5rpx rgb(204, 201, 201) solid;
}
.ttomorrow{
  border-right: 0.5rpx rgb(204, 201, 201) solid;
}
.block{
  border-radius: 40rpx;
  width: 660rpx;
  height: 400rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  background-color: white;
  opacity: 0.7;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.block1{
  margin-top: 20rpx;
}
.block view{
  width: 220rpx;
  height: 400rpx;
  /* border: 1px solid; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}
.img{
  margin-top: 50rpx;
  margin-bottom: 100rpx;
  width: 120rpx; 
  height: 120rpx;
}
.pre{
  text-align:center; 
  font-size: 35rpx;
}

/*马灯效果*/
@keyframes around {
  from {
   margin-left: 100%;
  }
  to {
   /* var接受传入的变量 */
   margin-left: var(--marqueeWidth--);
  }
 }
 
.marquee_container{
  background-color: #7479b8;
  height: 50rpx;
  line-height: 50rpx;
  position: relative;
  width: 100%;
  margin-top:0rpx;
}
.marquee_container:hover{
  /* 不起作用 */
  animation-play-state: paused;
}
.marquee_text{
  color:#fff;
  font-size: 28rpx;
  height: 50rpx;
  display: inline-block;
  white-space: nowrap;
  animation-name: around;
  animation-duration: 10s;  /*过渡时间*/
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}

weather1.js

// pages/weather1/weather1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    t_tips: "",
    city: "",
    update_time:"",
    t_wea: "",
    t_wea_img: "qing",
    t_tem: "",
    t_tem1: "",
    t_tem2: "",
    t_week: "",
    today: "",
    t_air_level:"",
    t_air:"",
    t_pm25:"",
    t_hum:"",
    t_pre:"",
    t_win:"",
    t_winm:"",
    t_visibility:"",

    t1_wea: "",
    t1_wea_img: "qing",
    t1_tem1: "",
    t1_tem2: "",
    t1_week: "",
    t1_wea: "",
    
    t2_wea_img: "qing",
    t2_tem1: "",
    t2_tem2: "",
    t2_week: "",
    t2_wea: "",

    t3_wea_img: "qing",
    t3_tem1: "",
    t3_tem2: "",
    t3_week: "",
    t3_wea: "",

    indicatorDots: true,
	//这个是背景颜色(渐变色)
    bgcolor: {
      "yin": ["#7f7f7f", "#262b4e"],
      "xue": ["d7d7d7", "bdbdbd"],
      "lei": ["#2e3be4", "#11028f"],
      "shachen": ["#dbda22", "#fba01d"],
      "wu": ["#d2d2a4", "#afafac"],
      "bingbao": ["#2ce769", "#04febf"],
      "yun": ["#4d568f", "#403f62"],
      "yu": ["#56cde7", "#031eff"],
      "qing": ["#d7e123", "#fd9a1d"]
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  }, 
  

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    wx.request({
      //当天天气的接口
      url: 'https://tianqiapi.com/api?version=v6&appid=69451765&appsecret=st31is2A',
      success(res){
        var data = res.data;
        console.log(data);
        wx.setStorageSync('tips', data.air_tips);
        
        that.setData({
          t_tips: data.air_tips,
          city: data.city,
          update_time: data.update_time,
          t_tem: data.tem,
          t_tem1: data.tem1,
          t_tem2: data.tem2,
          t_wea: data.wea,
          t_wea_img: data.wea_img,
          t_week: data.week,
          today: data.date,
          t_air_level: data.air_level,
          t_air: data.air,
          t_pm25: data.air_pm25,
          t_hum: data.humidity,
          t_pre: data.pressure,
          t_win: data.win,
          t_winm: data.win_meter,
          t_visibility: data.visibility,
        })
      }
    }),
    wx.request({
      //未来的天气接口
      url: 'https://tianqiapi.com/api?version=v1&appid=69451765&appsecret=st31is2A',
      success(res){
        var pre = res.data;
        console.log(pre);
        that.setData({
          //明天的数据
          t1_tem1: pre.data[1].tem1,
          t1_tem2: pre.data[1].tem2,
          t1_wea: pre.data[1].wea,
          t1_wea_img: pre.data[1].wea_img,
          t1_week: pre.data[1].week,
          //后天的数据
          t2_tem1: pre.data[2].tem1,
          t2_tem2: pre.data[2].tem2,
          t2_wea: pre.data[2].wea,
          t2_wea_img: pre.data[2].wea_img,
          t2_week: pre.data[2].week,
          //大后天的数据
          t3_tem1: pre.data[3].tem1,
          t3_tem2: pre.data[3].tem2,
          t3_wea: pre.data[3].wea,
          t3_wea_img: pre.data[3].wea_img,
          t3_week: pre.data[3].week,
        })
      }
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.onShow();
    wx.showNavigationBarLoading()//在标题栏中显示加载
    //模拟加载
    console.log("refresh");
    setTimeout(function(){
      wx.hideNavigationBarLoading()//完成停止加载
      wx.stopPullDownRefresh()//停止下拉刷新
   },500);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

weather1.json

{
  "usingComponents": {}  
}

app.json

{
  "pages":[
    "pages/weather1/weather1",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#000033",
    "navigationBarTitleText": "我的天气",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#000000"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3.素材

提供下列天气素材， 提取码: uisb
在这里插入图片描述
小程序码
在这里插入图片描述

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Java报错could not find java.dll
深度学习04-CNN经典模型
Spring3 Web MVC下的数据类型转换
Mysql 进阶学习笔记
微信小程序拉取代码到运行过程（mac）
大数据预处理技术
【PyTorch】12 生成对抗网络实战——用GAN生成动漫头像
vue3+ts移动端适配各种机型
纯前端实现腾讯cos文件上传功能
7-2 学生类设计 (20分)
;