简介这是一套面向计算机、电子信息工程、数学等专业学生的商品展示小程序毕业设计源码经导师指导并认可获98分评价适合正在做毕设、课程设计或期末大作业的学习者进行项目实战练习。资源包共1168个文件约15.08MB涵盖vue前端页面、java后端逻辑、js脚本、json配置、wxss与wxml小程序样式及结构文件以及png、svg、jpg等图片素材另附sql数据库脚本、bat启动脚本与docx说明文档前后端结构完整便于按模块阅读与二次开发。目前已有276人学习下载。代码经严格调试可帮助读者快速理解商品展示类小程序的整体架构、页面组织与接口调用方式掌握从数据库设计到前端渲染的完整实现思路并可作为毕设选题、功能扩展与答辩准备的参考方案。1. 商品展示小程序源码到底能跑出什么效果很多同学拿到“商品展示小程序源码”这个题目时第一反应是去搜一套能直接交差的代码包结果下载下来发现要么跑不起来要么页面丑得没法看要么功能只有“首页 列表 详情”三件套答辩时被老师追问两句就露馅。我见过太多这样的案例A同学从某资源站下了个压缩包导入开发者工具后一片红最后只能重写。其实商品展示小程序的核心不在“有没有源码”而在于你是否理解它的数据流——商品数据从哪来、怎么渲染、怎么保证列表和详情页的数据一致。这套东西做扎实了它就是一个能拿高分、能讲清楚技术选型、还能继续扩展成购物车和订单模块的完整项目。适合谁适合正在做毕设、需要一套能讲原理又能跑起来的同学也适合想快速搭一个商品展示 Demo 验证交互的前端新手。2. 商品展示小程序的技术选型与最小数据流2.1 为什么我建议用原生小程序而不是跨端框架很多教程一上来就推跨端方案说一套代码多端运行。但毕设场景下原生小程序反而是最稳的。原因有三第一原生小程序的调试工具链最完整报错信息直接指向具体行号不会出现跨端框架那种“编译后报错看不懂”的情况第二商品展示涉及大量列表渲染和图片懒加载原生image组件的lazy-load属性开箱即用跨端框架往往需要额外配置第三答辩时老师问“你这个页面生命周期怎么走的”原生方案你能直接答onLoad、onShow、onReady的执行顺序跨端框架还得解释一层编译转换容易把自己绕进去。我一般会这样选如果项目周期少于两周且只需要微信端直接原生。如果明确要求支付宝端或 H5 同步再考虑跨端。商品展示这个场景90% 的毕设需求原生就够了。2.2 商品数据从静态 JSON 到云开发的三种存法商品数据放哪里决定了你后面能不能讲出“数据管理”这个加分项。常见做法有三种第一种静态 JSON 文件放在utils/目录下页面直接require引入。优点是零配置、跑得快缺点是改一个商品价格要重新编译而且没法做分页。适合只展示 10 条以内数据的演示。第二种用微信云开发的云数据库。建一个goods集合字段包括title、price、cover、desc、stock。页面通过wx.cloud.database().collection(goods).get()拉取。优点是能讲“前后端分离”“云函数”缺点是云开发环境需要开通且免费额度有限。第三种自己搭一个本地 Node.js 服务用express提供/api/goods接口。优点是能讲 RESTful 设计缺点是调试时要同时开两个终端容易忘。我的建议毕设用第二种。云开发不用买服务器数据库操作有官方文档而且能自然引出“分页加载”和“条件查询”两个技术点。下面这段代码是云数据库初始化的最小写法// app.js App({ onLaunch() { // 初始化云环境env 参数填你自己的环境 ID wx.cloud.init({ env: your-env-id, // 替换成实际环境 ID traceUser: true // 记录用户访问便于后续分析 }) } })逻辑说明wx.cloud.init必须在onLaunch里调用一次否则后续所有云数据库操作都会报“云能力未初始化”。traceUser设为true后云控制台能看到用户访问记录答辩时如果老师问“有没有用户行为数据”你可以直接打开控制台展示。参数说明env是云开发环境 ID在云开发控制台首页能看到格式类似cloud1-9gxxxxxx。不要填成环境名称名称和 ID 是两回事填错会报env not found。2.3 列表页到详情页的数据传递别再用全局变量了新手最容易踩的坑是列表页拿到商品数组后点击某个商品把整个数组存到getApp().globalData里详情页再根据索引去取。这种做法在数据量小的时候没问题但一旦列表分页加载了 3 页全局变量里的数组和详情页要展示的那条数据就可能对不上。更稳的做法是列表页只传商品 ID详情页根据 ID 重新查一次。// pages/list/list.js Page({ data: { goodsList: [] }, onLoad() { const db wx.cloud.database() db.collection(goods).limit(10).get().then(res { // res.data 是数组直接 setData 渲染 this.setData({ goodsList: res.data }) }) }, // 点击商品时只传 _id不传整个对象 goDetail(e) { const id e.currentTarget.dataset.id wx.navigateTo({ url: /pages/detail/detail?id${id} }) } })逻辑说明e.currentTarget.dataset.id对应 WXML 里>// components/goods-card/goods-card.js Component({ properties: { item: { type: Object, value: {} // 默认空对象防止渲染时报 undefined } }, methods: { // 组件内部处理点击通过 triggerEvent 通知父页面 onTap() { this.triggerEvent(cardtap, { id: this.data.item._id }) } } })逻辑说明triggerEvent把点击事件抛给父页面父页面在 WXML 里用bind:cardtapgoDetail接收。这样组件不关心跳转逻辑只负责展示和抛事件复用性最好。参数说明properties里的value必须给默认值否则当父页面数据还没加载完时组件内this.data.item.title会报错。这是血泪经验别问我是怎么知道的。3.2 列表页的图片懒加载与骨架屏商品列表最影响体验的是图片加载。如果一上来就渲染 20 张高清图页面会白屏很久。原生小程序image组件支持lazy-load但只对scroll-view或页面滚动生效。更稳的做法是配合intersectionObserver做可视区域检测不过毕设场景下直接用lazy-load就够了。!-- pages/list/list.wxml -- view classgoods-list goods-card wx:for{{goodsList}} wx:key_id item{{item}} bind:cardtapgoDetail / /view/* pages/list/list.wxss */ .goods-list { display: flex; flex-wrap: wrap; padding: 20rpx; }逻辑说明wx:key_id必须写否则列表更新时小程序会重新创建所有节点性能差且可能丢失滚动位置。goods-card组件内部用image lazy-load加载封面图。参数说明lazy-load只在页面滚动时触发如果列表放在scroll-view里需要给scroll-view设置enable-flex并确保高度固定。骨架屏可以用一个loading状态控制数据没回来时显示灰色占位块。3.3 详情页的富文本渲染与价格格式化商品详情通常有一段描述文字可能带换行或简单 HTML。小程序里不能用v-html要用rich-text组件。但rich-text对标签有限制复杂样式建议直接用text加\n换行。// pages/detail/detail.js Page({ data: { goods: null, loading: true }, onLoad(options) { const db wx.cloud.database() db.collection(goods).doc(options.id).get().then(res { const goods res.data // 价格从分转成元保留两位小数 goods.priceText (goods.price / 100).toFixed(2) this.setData({ goods, loading: false }) }).catch(() { wx.showToast({ title: 商品不存在, icon: none }) }) } })逻辑说明数据库里价格存整数单位分避免浮点运算误差。展示时除以 100 并toFixed(2)。catch里处理 ID 不存在的情况给用户提示而不是白屏。参数说明doc(options.id)里的options.id来自列表页跳转 URL 的?idxxx。如果 ID 格式不对云数据库会直接报错所以catch是必须的。4. 商品展示小程序避坑与常见问题排查4.1 云数据库查不到数据控制台却显示有记录现象云开发控制台里goods集合明明有 10 条记录但小程序里get()返回空数组。原因云数据库默认权限是“仅创建者可读写”而你的记录可能是从控制台手动添加的创建者不是当前用户。小程序端用匿名身份去查自然查不到。解决在云开发控制台把goods集合的权限改成“所有用户可读仅创建者可写”。毕设展示场景不需要用户写入这个权限最合适。改完后重新编译数据就能出来了。4.2 图片在开发者工具能显示真机预览裂开现象开发者工具里商品图正常手机扫码预览时图片位置一片空白。原因图片链接是 HTTP 协议或者域名没有在小程序后台配置合法域名。开发者工具默认不校验域名真机校验。解决把图片换成 HTTPS 链接并在小程序后台“开发设置”里把图片域名加入 downloadFile 合法域名。如果用的是本地图片检查路径是否用了绝对路径/images/xxx.png真机上相对路径容易出错。4.3 列表滚动到底部加载更多时重复请求同一页数据现象快速上滑时onReachBottom触发多次同一页数据被追加了两遍。原因没有加请求锁。第一次请求还没回来第二次触发又发了一次。解决在data里加一个loadingMore标志请求前判断如果为true就直接return请求完成后置回false。onReachBottom() { if (this.data.loadingMore || !this.data.hasMore) return this.setData({ loadingMore: true }) // ... 发起请求成功后追加数据并更新 hasMore }4.4 详情页返回列表页后列表滚动位置丢失现象从列表页点进详情再返回列表回到了顶部。原因navigateTo跳转后列表页被保留在页面栈里但重新显示时onShow触发如果onShow里重新拉数据并setData滚动位置就会重置。解决列表数据只在onLoad里拉一次onShow里不重新请求。如果确实需要刷新用wx.pageScrollTo记录并恢复滚动位置但毕设场景下不刷新最简单。4.5 商品价格显示成 1999 而不是 19.99现象数据库存的是 1999页面直接渲染出来就是 1999。原因忘了做分转元的格式化。解决在utils/format.js里写一个fenToYuan函数所有价格展示前都过一遍。别在每个页面里写重复逻辑改起来会疯。5. 让商品展示小程序源码变成高分毕设的进阶技巧5.1 用云函数做商品搜索而不是前端过滤很多同学做搜索功能时把全部商品拉到前端再用filter过滤。数据量小的时候能用但答辩时老师一问“如果有一万条商品怎么办”就卡住了。正确做法是用云函数在服务端做模糊查询。// cloudfunctions/searchGoods/index.js const cloud require(wx-server-sdk) cloud.init() const db cloud.database() const _ db.command exports.main async (event) { const keyword event.keyword || // 用正则做模糊匹配title 包含 keyword const res await db.collection(goods) .where({ title: db.RegExp({ regexp: keyword, options: i // i 表示忽略大小写 }) }) .limit(20) .get() return res.data }逻辑说明db.RegExp是云数据库提供的正则查询options: i忽略大小写。云函数部署后在页面里用wx.cloud.callFunction({ name: searchGoods, data: { keyword } })调用。参数说明limit(20)限制返回条数防止关键词太宽泛时返回过多数据。如果要做分页再加skip参数。5.2 给商品卡片加一个“库存紧张”标签这个技巧能让你的项目在答辩时多一个亮点。在商品卡片组件里根据stock字段动态显示标签!-- components/goods-card/goods-card.wxml -- view classcard image src{{item.cover}} lazy-load modeaspectFill / view classinfo text classtitle{{item.title}}/text text classprice¥{{item.priceText}}/text text wx:if{{item.stock 5}} classtag仅剩{{item.stock}}件/text /view /view逻辑说明wx:if控制标签只在库存小于 5 时显示。stock字段在云数据库里是数字类型直接比较即可。参数说明modeaspectFill保证图片裁剪填充不会变形。如果商品图比例不统一这个模式最合适。5.3 用云开发控制台做数据模拟别手动一条条加答辩前需要准备演示数据。手动在控制台加 20 条商品太慢用云函数批量插入// cloudfunctions/initGoods/index.js const cloud require(wx-server-sdk) cloud.init() const db cloud.database() exports.main async () { const goods [] for (let i 1; i 20; i) { goods.push({ title: 模拟商品 ${i}, price: Math.floor(Math.random() * 9900) 100, // 1 元到 100 元 cover: https://example.com/placeholder.png, // 替换成实际图片链接 desc: 这是第 ${i} 个商品的描述, stock: Math.floor(Math.random() * 20) }) } // 批量插入每次最多 20 条 await db.collection(goods).add({ data: goods }) return { count: goods.length } }逻辑说明云数据库的add方法支持传入数组一次最多 20 条。循环生成 20 条模拟数据价格用Math.random生成库存随机。参数说明cover链接需要是 HTTPS 且已配置合法域名否则真机不显示。演示前先在开发者工具里确认图片能加载。5.4 答辩时怎么讲清楚“数据一致性”老师最爱问的问题是“列表页显示的价格和详情页显示的价格会不会不一致”如果你用全局变量传整个对象确实可能不一致。但如果你按第 2 章的做法详情页根据 ID 重新查一次就能回答“详情页的数据是独立查询的以数据库为准不存在缓存不一致。”这个回答能直接体现你对数据流的理解比背概念强得多。我自己的习惯是任何需要展示的数据都以数据库为唯一来源前端不维护副本。这个习惯让我在多个项目里避免了“改了价格但列表没更新”的尴尬。希望帮到你。本文还有配套的精品资源点击获取