原创模板--微信小程序实现的垃圾分类

一、项目演示

二、项目测试环境

三、项目关键源码

1.登录页面

2.注册页面

3.小常识

4.知识问答

5.分类搜索

6.我的、个人信息、修改密码

四、项目源码

一、项目演示

基于微信小程序实现的垃圾分类

二、项目测试环境

其中还使用到了TomCat服务器

三、项目关键源码

1.登录页面

<view class="login-container"><image class="logo" src="/images/ico.png"></image><view class="form-box"><view class="input-group"><text class="input-label">用户名</text><input class="input-field" type="text" placeholder="请输入用户名" placeholder-class="placeholder" bindinput="onUsernameInput" value="{{username}}" /></view><view class="input-group"><text class="input-label">密码</text><input class="input-field" type="password" placeholder="请输入密码" placeholder-class="placeholder" bindinput="onPasswordInput" value="{{password}}" /></view><view class="option-row"><view class="register-link"><text bindtap="navigateToRegister">还没有账号，立即注册</text></view></view><button class="login-btn" bindtap="onLogin">立 即 登 录</button></view>
</view>

登录页面包含用户名和密码输入框以及登录按钮，用户需要输入用户名和密码进行登录操作。
用户需要在对应的输入框中输入用户名和密码，用户名输入框为文本输入，密码输入框为密码输入。
在输入框中可以看到提示文字，帮助用户了解需要输入的内容。
用户还可以选择立即注册，点击注册链接跳转到注册页面进行账号注册。

2.注册页面

/* pages/register/register.wxss *//* 页面容器 */
.register-container {width: 100vw;height: 100vh;background-color: #fff;display: flex;flex-direction: column;align-items: center;
}/* Logo样式 - 保持与登录页面一致 */
.logo {width: 100%;height: 260px;margin-top: 24rpx;
}/* 表单容器 */
.form-box {width: calc(100% - 100rpx); /* 左右各50rpx边距 */margin: 24rpx 50rpx;flex: 1;display: flex;flex-direction: column;
}/* 输入组样式 */
.input-group {margin-bottom: 40rpx;
}/* 输入标签 */
.input-label {font-size: 32rpx;color: #000;font-weight: bold;
}/* 输入框 */
.input-field {height: 80rpx;font-size: 32rpx;border-bottom: 2rpx solid #00BCD4;padding: 10rpx 0;margin-top: 20rpx;
}/* 占位符样式 */
.placeholder {color: #ccc;font-size: 32rpx;
}/* 登录链接 */
.login-link {margin-top: 28rpx;text-align: right;color: #000;font-size: 28rpx;
}/* 注册按钮 - 与登录按钮保持相同样式 */
.register-btn {margin-top: 80rpx;height: 70rpx;background: linear-gradient(to right, #00BCD4, #00ACC1);color: #fff;font-size: 15px;font-weight: bold;border-radius: 35rpx;box-shadow: 0 4rpx 12rpx rgba(0, 188, 212, 0.3);display: flex;justify-content: center;align-items: center;
}/* 按钮点击效果 */
.register-btn:active {opacity: 0.9;transform: scale(0.98);
}

这段CSS代码是用于注册页面的样式定义。以下是代码中的一些关键样式说明：

页面容器样式定义了注册页面的整体布局，设置为居中显示，并且高度和宽度都是整个视口的100%。
Logo样式保持与登录页面一致，高度为260px，并且有一定的上边距。
表单容器样式设置了左右各50rpx的边距，并且占据剩余空间。
输入组样式定义了输入框之间的间距。
输入框相关样式包括输入标签样式、输入框样式和占位符样式，其中输入框底部有2rpx的蓝色边框。
登录链接设置了上边距，并且居右显示。
注册按钮样式设置了按钮的样式，包括背景色渐变、文本颜色等，并且有阴影效果。
按钮点击效果定义了按钮按下时的透明度和缩放效果。

3.小常识

<!--index.wxml-->
<view class="container"><scroll-view scroll-y class="scroll-view"><video id="myVideo" src="http://localhost:8080/raw/garbage.mp4" controls loop class="video"></video><!-- 图片区域 --><image src="/images/home01.jpg" mode="widthFix" class="content-image"></image></scroll-view>
</view>

在 index.wxml 文件中，使用了 scroll-view 组件用于实现垂直滚动。
视频元素使用了 video 组件，设置了 src 属性指向视频文件地址，同时具有控制条和循环播放的功能。
图片元素使用了 image 组件，设置了图片路径和展示模式为 widthFix，以适应宽度进行显示。
页面整体结构包裹在 view 组件中，并设置了类名为 container，同时样式类 scroll-view 用于定义滚动样式。

4.知识问答

<view class="container"><!-- 开始答题按钮 --><button wx:if="{{!showQuestions}}" class="start-btn" bindtap="startQuiz">开始答题</button><!-- 题目区域 --><view wx:if="{{showQuestions}}" class="question-container"><!-- 图片 --><image src="/images/studywd.png" class="question-image"></image><!-- 问题描述 --><view class="question-text"><text>请问</text><text class="highlight">{{currentQuestion.name}}</text><text>属于什么垃圾？</text></view><!-- 选项按钮 --><view class="options-container"><button wx:for="{{options}}"wx:key="index"class="option-btn {{selectedIndex === index ? 'selected' : ''}}"bindtap="selectOption"data-index="{{index}}"data-value="{{item.value}}"disabled="{{isAnswered}}">{{item.label}}. {{item.text}}</button></view><!-- 结果提示 --><view wx:if="{{showResult}}" class="result-text {{isCorrect ? 'correct' : 'wrong'}}">{{resultText}}</view></view>
</view>

1. 页面结构分为开始答题按钮和题目区域两部分，通过`showQuestions`控制显示
2. 题目区域包含图片、问题描述、四个选项按钮和结果提示
3. 选项按钮使用`wx:for`循环渲染，选中状态通过`selectedIndex`控制样式变化
4. 结果提示根据`isCorrect`显示正确/错误样式，内容由`resultText`决定

5.分类搜索

<!--pages/search/search.wxml-->
<view class="container"><!-- 搜索框区域 --><view class="search-box"><input class="search-input" placeholder="请输入名称查询" placeholder-class="placeholder" bindinput="onInput" bindconfirm="onSearch" confirm-type="search" value="{{searchKeyword}}" /><image class="search-icon" src="/images/searchd.png" bindtap="onSearch" /></view><!-- 搜索结果列表 --><scroll-view class="list-container" scroll-y><block wx:for="{{searchResults}}" wx:key="name"><view class="list-item"><view class="item-header"><text class="item-name">{{item.name}}</text><text class="item-type">{{item.text}}</text><image class="type-icon" src="{{item.image}}" mode="aspectFit"></image></view><view class="item-row"><text class="row-title">包含类型：</text><text class="row-content">{{item.contain}}</text></view><view class="item-row"><text class="row-title">分类解释：</text><text class="row-content">{{item.explain}}</text></view><view class="item-row"><text class="row-title">投放提示：</text><text class="row-content">{{item.tip}}</text></view></view></block><view wx:if="{{searchResults.length === 0 && hasSearched}}" class="empty-tip">未找到相关数据</view></scroll-view>
</view>

页面包括搜索框区域和搜索结果列表。
搜索框区域包括输入框和搜索图标，用户可以输入关键字进行搜索。
搜索结果列表使用滚动视图展示搜索结果，包括每个搜索结果的名称、类型、图标、包含类型、分类解释和投放提示。
若搜索结果为空且已经进行过搜索，则显示"未找到相关数据"的提示。
用户可以通过输入关键字和点击搜索图标进行搜索，显示搜索结果或提示信息。

6.我的、个人信息、修改密码

<!--pages/mine/mine.wxml-->
<view class="container"><!-- 顶部背景图 --><image class="banner" src="/images/studywd.png" mode="aspectFill"></image><!-- 功能列表 --><view class="menu-list"><!-- 个人信息 --><view class="menu-item" bindtap="goToInformation"><image class="menu-icon" src="/images/information.png"></image><text class="menu-text">个人信息</text><image class="menu-arrow" src="/images/right.png"></image></view><!-- 修改密码 --><view class="menu-item" bindtap="goToModifyPassword"><image class="menu-icon" src="/images/password.png"></image><text class="menu-text">修改密码</text><image class="menu-arrow" src="/images/right.png"></image></view><!-- 当前版本 --><view class="menu-item" bindtap="showVersion"><image class="menu-icon" src="/images/banben.png"></image><text class="menu-text">当前版本</text><image class="menu-arrow" src="/images/right.png"></image></view><!-- 退出登录 --><view class="menu-item" bindtap="logout"><image class="menu-icon" src="/images/quit.png"></image><text class="menu-text">退出登录</text><image class="menu-arrow" src="/images/right.png"></image></view></view>
</view><!--pages/information/information.wxml-->
<view class="container"><!-- 用户头像 --><image class="user-avatar" src="/images/ico.png"></image><!-- 用户信息列表 --><view class="info-list"><view class="info-item"><image class="info-icon" src="/images/username.png"></image><text class="info-label">用户名</text><text class="info-value">{{username}}</text></view><view class="divider"></view><view class="info-item"><image class="info-icon" src="/images/password.png"></image><text class="info-label">密码</text><text class="info-value">{{password}}</text></view><view class="divider"></view></view>
</view><!--pages/modifyPassword/modifyPassword.wxml-->
<view class="container"><!-- 用户头像 --><image class="user-avatar" src="/images/ico.png"></image><!-- 表单区域 --><view class="form-container"><view class="form-item"><text class="label">原密码</text><input class="input" type="password" placeholder="请输入原密码" placeholder-class="placeholder"bindinput="onOldPasswordInput"/></view><view class="divider"></view><view class="form-item"><text class="label">新密码</text><input class="input" type="password" placeholder="请输入新密码" placeholder-class="placeholder"bindinput="onNewPasswordInput"/></view><view class="divider"></view><button class="submit-btn" bindtap="modifyPassword">确认修改</button></view>
</view>

在mine.wxml页面中，展示了一个包含个人信息、修改密码、当前版本和退出登录功能的菜单列表。每个菜单项都包括一个图标、文本和箭头图标，点击对应的菜单项会触发相应的事件。
在information.wxml页面中，展示了用户的头像以及用户信息列表。用户信息包括用户名和密码，分别显示在不同的信息项中。
在modifyPassword.wxml页面中，展示了一个修改密码的表单区域。用户需要输入原密码和新密码，并点击确认修改按钮来提交修改密码的请求。
页面中的样式类和事件绑定都已经设置好，确保页面能够正常展示和交互。
整体结构清晰，适合展示个人信息和进行密码修改等操作。