当前位置：首页 > news >正文

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

news 2025/7/18 15:26:24

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

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