目录
一、项目演示
基于微信小程序实现的天气预报App
二、项目测试环境
三、项目关键源码
1.登录页面
<view class="container">
<!-- 顶部图片 -->
<image class="logo" src="/images/logo.png" mode="aspectFit"></image>
<!-- 用户名和密码输入框 -->
<view class="input-container">
<text class="label">用户名</text>
<input id="username" class="input" placeholder="请输入用户名" type="text" value="{{username}}" bindinput="onInputChange" />
<text class="label">密码</text>
<input id="password" class="input" placeholder="请输入用户密码" type="password" value="{{password}}" bindinput="onInputChange" />
</view>
<!-- 登录按钮 -->
<button class="login-button" bindtap="onLogin">立 即 登 录</button>
<!-- 注册链接 -->
<view class="register-link" bindtap="navigateToRegister">
<text>新用户, 立即注册!</text>
</view>
</view>这段代码是一个简单的登录界面，包括顶部图片展示、用户名和密码输入框、登录按钮以及注册链接。代码中使用了小程序的组件和事件绑定功能来实现交互。
image标签用于显示logo图片，使用src属性指定图片路径，并设置mode="aspectFit"让图片保持原始宽高比例适应容器大小。input标签为用户名和密码输入框，分别具有 id、placeholder、type 和 value 属性，通过bindinput="onInputChange"绑定输入事件处理函数。button标签为登录按钮，使用bindtap="onLogin"绑定点击事件处理函数。view标签包含注册链接文本，并通过bindtap="navigateToRegister"绑定点击事件跳转到注册页面。
整体结构上，通过组合不同的组件和事件绑定，实现了一个简洁的登录界面，为用户提供了方便的登录与注册操作。
2.注册页面
/* pages/register/register.wxss */
/* 容器样式 */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #ffffff;
}
/* 顶部图片样式 */
.logo {
width: 100%;
height: 230px;
margin-bottom: 20px;
}
/* 输入框容器样式 */
.input-container {
width: 80%;
margin-bottom: 20px;
}
/* 标签样式 */
.label {
font-size: 14px;
font-weight: bold;
color: #000000;
margin-top: 10px;
}
/* 输入框样式 */
.input {
width: 100%;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 10px;
margin-top: 10px;
margin-bottom: 20px;
}
/* 注册按钮样式 */
.register-button {
width: 80%;
height: 40px;
background-color: #00b5ff;
color: #fff;
font-size: 16px;
border-radius: 5px;
margin-bottom: 10px;
}
/* 登录链接样式 */
.login-link {
color: #00b5ff;
font-weight: bold;
margin-bottom: 40px;
}这段样式代码是用于注册页面的样式设计，通过设置不同的样式规则来美化页面元素的展示和布局。
.container样式设置了容器的显示方式为 flex 布局，垂直居中显示，高度为整个视口高度，背景色为白色。.logo样式设置顶部图片的宽度为100%，高度为230px，下方留有20px的间距。.input-container样式设置了输入框容器的宽度为80%，下方留有20px的间距。.label样式设置了标签的字体大小为14px，加粗显示，颜色为黑色，上方留有10px的间距。.input样式设置输入框的宽度为100%，高度为40px，边框为1px的灰色实线，圆角为5px，内边距为0 10px，上方和下方分别留有10px和20px的间距。.register-button样式设定注册按钮的宽度为80%，高度为40px，背景色为蓝色，字体颜色为白色，字体大小为16px，圆角为5px，下方留有10px的间距。.login-link样式设置登录链接文本的颜色为蓝色，加粗显示，下方留有40px的间距。
通过以上样式设计，使注册页面的各个元素能够以美观的方式呈现在用户面前，提升用户体验和页面整体效果。
3.首页
<view class="container">
<scroll-view scroll-y="true" class="scroll-view">
<view class="content">
<!-- 顶部城市和添加按钮 -->
<view class="top-bar">
<view class="city-section">
<image src="/images/dingwei.png" class="location-icon"></image>
<text class="city-text">{{city}}</text>
</view>
</view>
<!-- 未来7天预报 -->
<view class="forecast-section">
<text class="section-title">未来7天预报</text>
<scroll-view scroll-x="true" class="daily-forecast">
<view wx:for="{{dailyForecast}}" wx:key="date" class="daily-item">
<text class="week">{{item.week}}</text>
<text class="date">{{item.date}}</text>
<image src="/images/{{item.wea_day_img}}.png" class="wea-day-img"></image>
<text class="wea-day">{{item.wea_day}}</text>
<text class="tem1">{{item.tem1}}℃</text>
<text class="separator">|</text>
<text class="tem2">{{item.tem2}}℃</text>
<text class="wea-night">{{item.wea_night}}</text>
<image src="/images/{{item.wea_night_img}}.png" class="wea-night-img"></image>
<text class="win-speed">{{item.win_speed}}</text>
</view>
</scroll-view>
</view>
<!-- 生活指数 -->
<view class="life-index-section">
<text class="section-title">生活指数</text>
<view class="index-grid">
<view class="index-item">
<image src="/images/chuanyi.png" class="index-icon"></image>
<text class="index-label">穿衣</text>
<text class="index-value">{{zhishu.chuanyi.level}}</text>
</view>
<view class="index-item">
<image src="/images/daisan.png" class="index-icon"></image>
<text class="index-label">带伞</text>
<text class="index-value">{{zhishu.daisan.level}}</text>
</view>
<view class="index-item">
<image src="/images/ganmao.png" class="index-icon"></image>
<text class="index-label">感冒</text>
<text class="index-value">{{zhishu.ganmao.level}}</text>
</view>
<view class="index-item">
<image src="/images/chenlian.png" class="index-icon"></image>
<text class="index-label">晨练</text>
<text class="index-value">{{zhishu.chenlian.level}}</text>
</view>
<view class="index-item">
<image src="/images/ziwaixian.png" class="index-icon"></image>
<text class="index-label">紫外线</text>
<text class="index-value">{{zhishu.ziwaixian.level}}</text>
</view>
<view class="index-item">
<image src="/images/liangshai.png" class="index-icon"></image>
<text class="index-label">晾晒</text>
<text class="index-value">{{zhishu.liangshai.level}}</text>
</view>
<view class="index-item">
<image src="/images/xiche.png" class="index-icon"></image>
<text class="index-label">洗车</text>
<text class="index-value">{{zhishu.xiche.level}}</text>
</view>
<view class="index-item">
<image src="/images/lvyou.png" class="index-icon"></image>
<text class="index-label">旅游</text>
<text class="index-value">{{zhishu.lvyou.level}}</text>
</view>
<view class="index-item">
<image src="/images/diaoyu.png" class="index-icon"></image>
<text class="index-label">钓鱼</text>
<text class="index-value">{{zhishu.diaoyu.level}}</text>
</view>
<view class="index-item">
<image src="/images/yundong.png" class="index-icon"></image>
<text class="index-label">运动</text>
<text class="index-value">{{aqi.yundong}}</text>
</view>
<view class="index-item">
<image src="/images/jinghuaqi.png" class="index-icon"></image>
<text class="index-label">净化器</text>
<text class="index-value">{{aqi.jinghuaqi}}</text>
</view>
</view>
</view>
</view>
</scroll-view>
</view>这段代码是用于显示24小时预报的部分，通过循环展示每小时的天气信息。
<view class="forecast-section">用于包裹整个24小时预报部分。<text class="section-title">24小时预报</text>显示标题为"24小时预报"。<scroll-view scroll-x="true" class="hourly-forecast">创建一个横向滚动的视图容器，用于展示每小时的天气信息。<view wx:for="{{hours}}" wx:key="hours" class="hour-item">遍历名为hours的数据列表，每个小时的天气信息都包裹在一个hour-item的视图中。<text class="hour-time">{{item.hours}}</text>显示该小时的时间。<image src="/images/{{item.wea_img}}.png" class="hour-icon"></image>根据天气图标的名称动态加载对应的天气图标。<text class="hour-wea">{{item.wea}}</text>显示该小时的天气情况。<text class="hour-temp">{{item.tem}}℃</text>显示该小时的温度。<text class="hour-win">{{item.win}}</text>显示该小时的风向。<text class="hour-win-speed">{{item.win_speed}}</text>显示该小时的风速。
通过这段代码，可以将24小时的天气预报信息以清晰的方式呈现给用户，使用户可以方便地查看每个小时的天气情况，包括温度、风向等信息。
4.城市管理页面
<view class="list">
<view class="list-item" wx:for="{{cityList}}" wx:key="city" data-city="{{item.city}}" bindlongpress="deleteCity" bindtap="handleCityClick">
<text class="city-name">{{item.city}}</text>
<text class="temperature">{{item.temperature}}℃</text>
</view>
</view>
<!-- 图片容器 -->
<view class="image-container" bindtap="showModal">
<image src="/images/city_add.png" mode="aspectFit" />
</view>
<!-- 弹窗 -->
<modal class="modal" title="请输入城市" wx:if="{{showModal}}" bindconfirm="handleConfirm" bindcancel="handleCancel">
<input style="width: auto;" placeholder="请输入城市名称" value="{{inputCity}}" bindinput="handleInput" />
</modal>这段页面代码主要包括以下内容：
- 一个城市列表，每个城市项包括城市名称和温度显示。
- 一个图片容器，点击可以展示弹窗。
- 弹窗组件，包含一个输入框用于输入城市名称。
这个页面的功能主要是展示城市列表并允许用户进行城市操作，同时提供一个方便的方式用于输入城市名称。
四、项目源码
👇👇👇👇👇快捷方式👇👇👇👇👇
扫一扫
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
