文章目录
-
- [1. 项目概述](#1. 项目概述)
- [2. 项目功能思维导图](#2. 项目功能思维导图)
- [3. 技术架构](#3. 技术架构)
-
-
- [1. 前端技术栈](#1. 前端技术栈)
- [2. 后端技术栈](#2. 后端技术栈)
-
- [4. 核心模块实现](#4. 核心模块实现)
- [5. 总结](#5. 总结)
- [6. 项目实现效果截图](#6. 项目实现效果截图)
- [7. 关于作者其它项目视频教程介绍](#7. 关于作者其它项目视频教程介绍)
1. 项目概述
校园二手交易平台微信小程序旨在为在校学生提供一个便捷的二手物品交易渠道，包含用户模块、商品发布与浏览、订单管理、私信沟通等核心功能。本文将基于思维导图的结构，分享该小程序开发过程中的关键技术点和实现方案。
2. 项目功能思维导图
3. 技术架构
1. 前端技术栈
- 微信小程序原生框架（WXML/WXSS/JS）
- wx.request API（网络请求）
2. 后端技术栈
- springBoot+MyBatis（服务端框架）
- MySQL（数据库）
4. 核心模块实现
- 登录，注册
javascript
//登录
async onClickLoginHandle() {
if (this.data.username == "") {
wx.showToast({
title: '用户名不能为空',
icon: 'error'
})
return
}
if (this.data.password == "") {
wx.showToast({
title: '密码不能为空',
icon: 'error'
})
return
}
//调用登录接口
const res = await http.get("/login", {
username: this.data.username,
password: this.data.password
}, {
header:{
'Content-type': 'application/json'
}
})
if (res.data.code == 200) {
wx.showToast({
title: res.data.msg,
})
//保存用户名信息
wx.setStorageSync("user", res.data.data)
wx.setStorageSync("isAgreed", this.data.isAgreed)
//跳转到index
setTimeout(() => {
// wx.navigateTo({
// url: '/pages/index/index',
// })
wx.navigateBack()
}, 1000);
} else {
wx.showToast({
title: res.data.msg,
icon: 'error'
})
}
}
javascript
//注册
async onClickRegisterHandle() {
if (this.data.username == "") {
wx.showToast({
title: '请输入用户名',
icon: "error"
})
return
}
if (this.data.phone == "") {
wx.showToast({
title: '请输入手机号',
icon: "error"
})
return
}
if (this.data.password == "") {
wx.showToast({
title: '请输入密码',
icon: "error"
})
return
}
const res = await http.get("/register", {
username: this.data.username,
password: this.data.password,
mobile:this.data.phone,
nickname: "这个家伙很懒，什么都没有留下～",
avatar:"https://img2.baidu.com/it/u=3134235566,1012432277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
})
if (res.data.code == 200) {
wx.showToast({
title: res.data.msg,
})
setTimeout(() => {
wx.navigateBack()
}, 1000);
} else {
wx.showToast({
title: res.data.msg,
icon: "error"
})
}
}- 二手商品发布模块
javascript
/**
* 发布闲置
*/
async onCreateHandle() {
if (!wx.getStorageSync('user')) {
wx.showModal({
title: '温馨提示',
content: '登录后才可以发布闲置物品哦～',
complete: (res) => {
if (res.confirm) {
wx.navigateTo({
url: '/pages/login/login',
})
}
}
})
return;
}
if (this.data.goods_name === '' || this.data.goods_introduce === '' || this.data.goods_price === '' || this.data.goods_img === '') {
wx.showToast({
title: '请完善发布信息',
icon: 'error'
})
return;
}
const prams = {
...this.data
}
const res = await http.post('/pushGoods', prams)
if (res.data.code == 200) {
wx.showToast({
title: res.data.msg,
icon: 'success',
success: () => {
setTimeout(() => {
wx.switchTab({
url: '/pages/index/index',
})
//清空数据
this.setData({
goods_name: '',
goods_introduce: '',
goods_price: '',
goods_img: '',
status: 0,
})
}, 1000)
}
})
}
}- 二手商品浏览模块
wxml
xml
<!-- 内容区域 -->
<view class="grid-container">
<block wx:for="{{goodsList}}" wx:key="uid">
<view class="grid" bind:tap="onItemClickHandle" data-item="{{item}}">
<view class="grid-item">
<image src="{{item.goods_img}}" mode="aspectFill" />
<text class="product-name">{{item.goods_name}}</text>
<view class="product-price-view">
<span style="color:#f3514f; font-size: 22rpx">￥</span>
<text class="product-price">{{item.goods_price}}</text>
</view>
</view>
<view class="mask-container" wx:if="{{item.status==1}}">
<text>卖掉啦～</text>
</view>
</view>
</block>
</view>js
javascript
/**
* 获取二手商品闲置列表数据
*/
async getGoodsList() {
const res = await http.get('/goodsList', null, {
isLoading: this.data.isLoading
})
this.setData({
goodsList: res.data.data.list
})
},5. 总结
校园二手交易平台微信小程序通过合理的技术选型和模块化设计，实现了完整的二手交易流程。项目充分利用了微信小程序的生态能力，为用户提供了流畅的交易体验。后续可考虑加入推荐算法、信用评价体系等功能，进一步提升平台价值。
开发过程中，模块化思维和良好的状态管理是关键，同时需要注意小程序的各种限制（如请求域名、存储大小等）。
6. 项目实现效果截图
7. 关于作者其它项目视频教程介绍
本人在b站录制的一些视频教程项目，免费供大家学习
- Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
- Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
- Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
- Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
- Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8