简介本资源是面向高校计算机专业学生与微信小程序初学者的期末大作业实战项目——“天使童装商城”聚焦电商类小程序开发全流程解决从页面搭建、交互实现到业务逻辑落地的学习痛点。压缩包为ZIP格式大小2.18MB包含完整小程序源码工程含app.js、app.json、pages目录及组件文件涵盖首页轮播图swiper组件、底部五栏导航navigator页面路由、商品标签筛选、优惠券管理、购物车结算及个人中心等核心模块代码结构清晰、注释规范便于理解数据绑定、wx.request网络请求、页面跳转与状态管理等关键技术点。目前已有2931人学习下载适合零基础学员通过可运行项目掌握小程序开发基础语法、UI组件使用、页面生命周期与典型电商功能实现逻辑是入门级项目实践与课程作业参考的优质范例。1. 为什么“天使童装商城”是微信小程序期末作业的高分选题很多同学做微信小程序期末大作业时一上来就扎进“校园二手书”“宿舍报修系统”这类泛用型项目结果功能雷同、交互单薄、数据空洞答辩时被问一句“用户真实购买路径怎么设计的”就卡壳。而“天使童装商城”看似只是个电商外壳实则天然覆盖小程序开发核心能力栈商品分类与搜索、多规格SKU管理、购物车状态同步、微信登录态与用户信息绑定、订单生成与本地缓存、页面级加载控制、顶部导航栏适配、图片懒加载与压缩策略——这些不是功能点罗列而是真实业务中必须闭环处理的链路。尤其对童装品类尺寸/年龄/季节标签组合复杂倒逼你设计可扩展的商品属性模型家长用户对首屏加载速度极其敏感“修改刚进入的加载页面”“微信小程序顶部导航栏高度”这类细节直接决定体验分。它不依赖后端强支撑可用 mock 数据起步又能通过 uniapp 微信小程序方案平滑过渡到多端发布是教学场景下少有的「能跑通、有深度、可延展、易展示」的典型闭环项目。2. 用 uni-app 搭建微信小程序的流程从初始化到真机调试uni-app 因其跨端能力和 Vue 语法亲和力已成为高校课程中微信小程序开发的主流选择。相比原生小程序开发“搭建微信小程序的流程”在 uni-app 中更强调工程结构与平台差异收敛而非重复编写三套代码。2.1 初始化项目并配置微信小程序专属入口使用 HBuilderX 或命令行创建标准 uni-app 项目后需明确指定微信小程序为编译目标。关键操作不是简单点击“运行到小程序模拟器”而是确认manifest.json中已正确填写 AppID测试阶段可用体验版 ID{ name: 天使童装商城, appid: , description: , versionName: 1.0.0, versionCode: 100, transformPx: false, app-plus: { /* 忽略 */ }, mp-weixin: { usingComponents: true, appid: wx1234567890abcdef, // 此处填入你的小程序 AppID setting: { urlCheck: false } } }注意mp-weixin节点下的appid是编译到微信开发者工具的必要字段。若留空HBuilderX 会提示“未配置 AppID”且无法生成合法的小程序包。该字段与微信开发者后台注册的小程序唯一标识严格对应不可随意填写测试值。2.2 替换默认首页并实现“修改刚进入的加载页面”uni-app 默认首页为pages/index/index.vue但“天使童装商城”需定制首屏体验。常见做法是将首页设为启动页splash page包含品牌 Logo、加载动画及渐隐逻辑。关键在于控制onLoad生命周期与uni.showLoading的配合!-- pages/splash/splash.vue -- template view classsplash-container image src/static/logo-angel.png classlogo modeaspectFit/image view classloading-indicator uni-load-more :statusstatus icon-typecircle/uni-load-more /view /view /template script export default { data() { return { status: more // more / noMore / loading } }, onLoad() { // 模拟资源加载耗时实际应替换为接口预检或字体加载 setTimeout(() { uni.hideLoading() uni.redirectTo({ url: /pages/home/home }) // 跳转至主商城页 }, 1500) } } /script此方案实现了“修改刚进入的加载页面”的核心诉求视觉可控、时长可调、跳转可编程。区别于原生小程序app.js中onLaunch的全局 loadinguni-app 的页面级控制更灵活且uni.hideLoading()可确保加载遮罩精准消失避免残留白屏。2.3 配置顶部导航栏高度并适配不同机型“微信小程序顶部导航栏高度”并非固定值而是由状态栏高度通常 20px 导航栏高度默认 44px 自定义标题区域共同构成。uni-app 通过pages.json统一管理{ pages: [ { path: pages/home/home, style: { navigationBarTitleText: 天使童装商城, navigationBarBackgroundColor: #ffffff, navigationBarTextStyle: black, enablePullDownRefresh: true, onReachBottomDistance: 50, navigationStyle: custom // 关键启用自定义导航栏 } } ] }启用navigationStyle: custom后页面顶部将留出安全区域需手动实现导航栏组件。此时可通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度并结合uni.getMenuButtonBoundingClientRect()获取右上角胶囊按钮位置动态计算导航栏总高度// utils/nav-height.js export function getNavBarHeight() { const systemInfo uni.getSystemInfoSync() const menuButton uni.getMenuButtonBoundingClientRect() return menuButton.height (menuButton.top - systemInfo.statusBarHeight) * 2 }该函数返回值即为实际导航栏占用高度单位 px可用于设置padding-top或height确保内容不被遮挡。此方案兼容 iPhone X 及以上全面屏机型避免“工具栏左侧返回箭头没有了”这类布局错位问题。3. 商品与购物车模块实现从单选框到 SKU 组合选择童装商品的核心难点在于属性组合复杂——同一款连衣裙可能有“年龄1-2岁/3-4岁/5-6岁”、“尺码90/100/110”、“颜色粉/蓝/黄”三组维度需支持交叉筛选与库存联动。“微信小程序单选框”在此场景下必须升级为动态属性选择器。3.1 商品详情页的属性选择器设计采用radio-groupradio实现单维度单选但需绑定>!-- pages/goods/detail.vue -- template view classattr-section view classattr-item v-for(attr, idx) in goods.attrs :keyidx text classattr-label{{ attr.name }}/text radio-group changeonAttrChange :data-indexidx label classattr-option v-foritem in attr.values :keyitem.value radio :valueitem.value :checkedselectedAttrs[attr.key] item.value color#ff6b6b / text{{ item.label }}/text /label /radio-group /view /view /template script export default { data() { return { selectedAttrs: {}, // { age: 3-4岁, size: 100, color: 粉 } goods: { attrs: [ { key: age, name: 适用年龄, values: [{ value: 1-2, label: 1-2岁 }, { value: 3-4, label: 3-4岁 }] }, { key: size, name: 尺码, values: [{ value: 90, label: 90 }, { value: 100, label: 100 }] } ] } } }, methods: { onAttrChange(e) { const idx e.currentTarget.dataset.index const attrKey this.goods.attrs[idx].key this.selectedAttrs[attrKey] e.detail.value this.updateSkuSelection() // 触发 SKU 匹配与库存校验 }, updateSkuSelection() { // 根据 selectedAttrs 查找匹配的 sku 对象 const matchedSku this.goods.skus.find(sku Object.keys(this.selectedAttrs).every(key sku.specs[key] this.selectedAttrs[key] ) ) this.currentSku matchedSku || null this.isSkuValid !!matchedSku matchedSku.stock 0 } } } /script此结构将属性选择与 SKU 数据解耦updateSkuSelection方法实时校验组合有效性避免用户提交无效规格。isSkuValid状态可控制“加入购物车”按钮禁用是防止超卖的第一道防线。3.2 购物车本地持久化与状态同步微信小程序不支持直接操作localStorage必须使用uni.setStorageSync。购物车数据结构需支持多商品、多规格、数量增减// store/cart.js const CART_KEY angel_cart_items export function getCartItems() { try { const data uni.getStorageSync(CART_KEY) return data ? JSON.parse(data) : [] } catch (e) { return [] } } export function setCartItems(items) { try { uni.setStorageSync(CART_KEY, JSON.stringify(items)) } catch (e) { console.error(购物车写入失败, e) } } export function addItem(goodsId, skuId, quantity 1) { const items getCartItems() const existing items.find(item item.goodsId goodsId item.skuId skuId) if (existing) { existing.quantity quantity } else { items.push({ goodsId, skuId, quantity }) } setCartItems(items) }在购物车页面pages/cart/cart.vue中通过watch监听items变化并触发重新计算总价watch: { items: { handler(newVal) { this.totalPrice newVal.reduce((sum, item) { const sku this.findSkuById(item.skuId) return sum (sku?.price || 0) * item.quantity }, 0) this.totalCount newVal.reduce((sum, item) sum item.quantity, 0) }, immediate: true } }提示findSkuById应从商品列表缓存中查找避免每次渲染都发起请求。本地购物车虽不依赖网络但需在onShow生命周期中调用getCartItems()刷新视图确保离开再返回时状态一致。4. 订单与支付模块落地绕过 v3 对接的轻量级方案当前“小程序微信支付v3对接 由于小程序违规,支付功能暂时无法使用”是高频现实约束。作为期末作业无需强行接入真实支付而应聚焦订单闭环逻辑——即生成订单号、记录用户选择、模拟支付成功、跳转订单完成页。这比硬上支付 SDK 更体现工程思维。4.1 生成唯一订单号并绑定用户信息订单号需具备可读性、防重性、时间可追溯性。推荐格式ANGEL{YYMMDD}{6位随机数}例如ANGEL240520123456// utils/order.js export function generateOrderNo() { const now new Date() const yymmdd ${now.getFullYear().toString().slice(-2)}${String(now.getMonth() 1).padStart(2, 0)}${String(now.getDate()).padStart(2, 0)} const random Math.floor(Math.random() * 1000000).toString().padStart(6, 0) return ANGEL${yymmdd}${random} } // 在订单提交页调用 methods: { async submitOrder() { const orderNo generateOrderNo() const userInfo uni.getStorageSync(userInfo) || {} const cartItems getCartItems() const orderData { orderNo, userId: userInfo.openid || mock_user_001, items: cartItems.map(item ({ goodsId: item.goodsId, skuId: item.skuId, quantity: item.quantity })), createTime: new Date().toISOString(), status: unpaid // 后续可扩展为 paid/shipped/finished } // 模拟提交至后端实际可存入云数据库或本地 mock await this.$http.post(/api/orders, orderData) uni.navigateTo({ url: /pages/order/success?orderNo${orderNo} }) } }此方案生成的订单号符合国内电商惯例便于人工核对userId使用openid微信登录后获取确保用户归属若未登录则降级为 mock 值不影响流程演示。4.2 模拟支付成功页与订单状态流转支付页pages/order/pay.vue仅需展示订单摘要与“模拟支付”按钮点击后更新状态并跳转template view classpay-page view classorder-summary text订单号{{ orderNo }}/text text金额¥{{ totalPrice }}/text /view button clickmockPay typeprimary立即支付模拟/button /view /template script export default { data() { return { orderNo: , totalPrice: 0 } }, onLoad(options) { this.orderNo options.orderNo this.totalPrice parseFloat(options.totalPrice) || 0 }, methods: { mockPay() { // 更新本地订单状态 const orders uni.getStorageSync(orders) || [] const target orders.find(o o.orderNo this.orderNo) if (target) { target.status paid target.payTime new Date().toISOString() uni.setStorageSync(orders, orders) } // 跳转成功页 uni.navigateTo({ url: /pages/order/success?orderNo${this.orderNo}statuspaid }) } } } /script注意uni.getStorageSync(orders)存储的是所有订单数组mockPay方法仅更新当前订单状态为后续“订单列表页”按状态筛选提供数据基础。这种轻量级状态管理比引入 Vuex 更贴合课程作业体量。5. 真机调试与抓包验证用 Charles 抓取 PC 端微信小程序流量当“微信小程序抓包”成为调试刚需——比如验证商品接口是否携带正确token、检查图片 CDN 地址是否生效、确认购物车添加请求体结构——Charles 是 Windows/macOS 下最稳定的选择。但 PC 端微信客户端非开发者工具的抓包需特殊配置。5.1 Charles 配置 HTTPS 解密与代理规则首先在 Charles 中启用 SSL Proxying 并安装根证书Proxy → SSL Proxying Settings → Enable SSL ProxyingHelp → SSL Proxying → Install Charles Root CertificateWindows 下需手动导入到“受信任的根证书颁发机构”其次为微信客户端设置系统代理Windows设置 → 网络和 Internet → 代理 → 手动设置代理地址填127.0.0.1端口8888Charles 默认macOS系统偏好设置 → 网络 → 高级 → 代理 → Web 代理(HTTP/HTTPS)同样填127.0.0.1:8888提示PC 端微信客户端默认不走系统代理需强制启用。方法是在微信安装目录下找到WeChat.exe右键 → 属性 → “快捷方式”选项卡 → “目标”末尾添加--proxy-server127.0.0.1:8888例如C:\Program Files\Tencent\WeChat\WeChat.exe --proxy-server127.0.0.1:88885.2 过滤微信小程序专属域名并定位接口启动微信客户端后在 Charles 左侧结构树中展开wechat://或mp.weixin.qq.com节点但更高效的方式是使用Filter功能Filter TypeValue说明Hostapi.angel-kids.com替换为你项目的真实 API 域名Path Contains/goods/list精准定位商品列表接口Content-Typeapplication/json排除非 JSON 响应如图片、JS抓取到请求后可右键 →Copy → cURL Command复制命令行用于 Postman 复现或双击查看Request Headers中Authorization字段是否含有效 tokenResponse Body是否返回预期商品数组。5.3 验证图片加载与 CDN 缓存策略童装商城大量依赖图片“微信小程序图片提取工具”类需求常源于图片加载慢或 404。在 Charles 中筛选png/jpg请求检查Response Headers中Cache-Control是否为public, max-age31536000一年缓存Status Code是否为200非304 Not ModifiedContent-Length是否与原始图片大小一致排除压缩过度失真若发现某张商品图返回404可右键 →Open Response in Browser直接访问 URL确认 CDN 配置是否遗漏路径前缀如/images/goods/。字段正常值示例异常含义X-CacheHIT from cloudflareCDN 命中加速生效X-CacheMISS from cdnCDN 未命中回源拉取Content-Encodinggzip服务端已启用压缩通过 Charles 的实时流量观测你能快速定位是前端路径拼写错误、CDN 配置遗漏还是后端图片服务宕机——这比在真机上反复刷新页面高效十倍。本文还有配套的精品资源点击获取