当前位置：网站首页>微信小程序——天气查询

微信小程序——天气查询

2022-08-09 10:48:00 【Cutecumber】

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"
}