实时更新天气微信小程序开发

news2024/11/26 7:34:57

1.新建一个天气weather项目

2.在app.json中创建一个路由页面

当我们点击保存的时候，微信小程序会自动的帮我们创建好页面

3.在weather页面上书写我们的骨架

4.此时我们的页面很怪，因为没有给它添加样式和值。此时我们给它一个样式。（样式写在wxss中）

5.给它值，使用插值表达式，数据放在js的data中

6.完善代码，用wx-for的方式渲染出今天，明天，昨天的天气情况。温馨提示

7.完整代码

weather.wxml

<!--pages/weather/weather.wxml-->
<view class="cotent">
  <view class="today">
    <view class="info">
      <view class="temp">{{temp}}℃</view>
      <view class="lowhigh">{{low}}/{{high}}</view>
      <view class="type">{{type}}</view>
      <view class="city">{{city}}</view>
      <view class="week">{{week}}</view>
      <view class="weather">{{weather}}</view>
    </view>
  </view>
  <view class="viewLine"></view>
  <view class="otherWeather">
    <view class="weatherId" wx:for="{{otherWeather}}" wx:key="index">
      <view class="infoOther">
        <view class="typeOther">{{item.type}}</view>
        <view class="lowhighOther">{{item.low}}/{{item.high}}</view>
        <view class="weekOther">{{item.week}}</view>
        <view class="weatherOther">{{item.direction}}</view>
        <view class="weatherOther">{{item.windLeve}}</view>
      </view>
    </view>
  </view>
  <view class="tip">
      友情提示：天气变凉，空气湿度较大，易发生感冒，请注意适当增加衣物，加强自我防护，避免感冒。
  </view>
</view>

weather.js

// pages/weather/weather.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
      temp: "4",
      low: "-1℃",
      high: "10℃",
      type: "晴",
      city: "北京",
      week: "八日星期二",
      weather: "无持续风向 微风级",
      otherWeather: [{
          id: "002",
          low: "2℃",
          high: "10℃",
          type: "多云",
          week: "9日星期三",
          direction:"无持续风向",
          windLeve: "向微风级",
        },
        {
          id: "003",
          low: "0℃",
          high: "9℃",
          type: "多云",
          week: "10日星期四",
          direction:"无持续风向",
          windLeve: "向微风级",
        },
        {
          id: "004",
          low: "-1℃",
          high: "10℃",
          type: "多云",
          week: "11日星期五",
          direction:"无持续风向",
          windLeve: "向微风级",
        },
      ]
    },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
  
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
  
    }
  })

weather.wxss

/* pages/weather/weather.wxss */
page {
  background-color: #001f3e;
  color: white;
}

.content {
  font-family: 微软雅黑, 宋体;
  font-size: 14px;
  background-size: cover;
  height: 100%;
  width: 100%;
  color: #333333;
}

.today {
  padding-top: 70rpx;
  height: 50%;
}

.temp {
  font-size: 80px;
  text-align: center;
}

.city {
  font-size: 20px;
  text-align: center;
  margin-top: 20rpx;
  margin-right: 10rpx;
}

.lowhigh {
  font-size: 12px;
  text-align: center;
  margin-top: 30rpx;
}

.type {
  font-size: 16px;
  text-align: center;
  margin-top: 30rpx;
}

.week {
  font-size: 12px;
  text-align: center;
  margin-top: 30rpx;
}

.weather {
  font-size: 12px;
  text-align: center;
  margin-top: 20rpx;
}

.viewLine {
  width: 100%;
  height: 1rpx;
  background-color: #8b9da9;
  margin-top: 30rpx;
}

.otherWeather {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
  padding-top: 20rpx;
}

.infoOther {
  text-align: center;
}

.infoOther view,.tip {
  padding: 10rpx;
  color: #c1cad4;
  font-size: 12px;
}
.tip {
  margin-top: 30rpx;
}

但是注意此时我们采用的方式是写死的。一般来说，正常的开发应该是有网络请求的。