1. 項目概述

校園二手交易平臺微信小程序旨在為在校學生提供一個便捷的二手物品交易渠道，包含用戶模塊、商品發布與瀏覽、訂單管理、私信溝通等核心功能。本文將基于思維導圖的結構，分享該小程序開發過程中的關鍵技術點和實現方案。

2. 項目功能思維導圖

3. 技術架構

1. 前端技術棧

• 微信小程序原生框架（WXML/WXSS/JS）
• wx.request API（網絡請求）

2. 后端技術棧

• springBoot+MyBatis（服務端框架）
• MySQL（數據庫）

4. 核心模塊實現

1. 登錄，注冊

 //登錄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)//跳轉到indexsetTimeout(() => {// wx.navigateTo({//   url: '/pages/index/index',// })wx.navigateBack()}, 1000);} else {wx.showToast({title: res.data.msg,icon: 'error'})}}

  //注冊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"})}}

2. 二手商品發布模塊

  /*** 發布閑置*/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)}})}}

3. 二手商品瀏覽模塊
   wxml

  <!-- 內容區域 --><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

 /*** 獲取二手商品閑置列表數據*/async getGoodsList() {const res = await http.get('/goodsList', null, {isLoading: this.data.isLoading})this.setData({goodsList: res.data.data.list})},

5. 總結

校園二手交易平臺微信小程序通過合理的技術選型和模塊化設計，實現了完整的二手交易流程。項目充分利用了微信小程序的生態能力，為用戶提供了流暢的交易體驗。后續可考慮加入推薦算法、信用評價體系等功能，進一步提升平臺價值。

開發過程中，模塊化思維和良好的狀態管理是關鍵，同時需要注意小程序的各種限制（如請求域名、存儲大小等）。

6. 項目實現效果截圖

7. 關于作者其它項目視頻教程介紹

本人在b站錄制的一些視頻教程項目，免費供大家學習

1. Android新聞資訊app實戰：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
2. Androidstudio開發購物商城實戰：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
3. Android開發備忘錄記事本實戰：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
4. Androidstudio底部導航欄實現：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
5. Android使用TabLayout+ViewPager2實現左右滑動切換：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8