更新记录

1.0.0（2025-12-30） 下载此版本

更新日志 (Changelog)

[1.0.0] - 2025-12-30

正式发布

• Neo Shop Template v1.0.0 初始版本正式发布。
• 基于 UniApp + Vue3 + Vite 技术栈构建的现代化电商商城模板。

新增功能 (Features)

• 完整电商闭环: 包含首页、商品详情、店铺主页、购物车、个人中心、订单流程（待支付/待发货/待收货/待评价/售后）、钱包、足迹、收藏、客服、地址管理、设置等 20+ 核心页面。
• 高级 UI 组件:
  • NeoNavbar: 高度可定制的导航栏，支持透明渐变、搜索框集成，完美适配微信小程序胶囊按钮。
  • NeoTabbar: 现代化底部导航栏，支持中间凸起按钮、消息徽标、安全区域自动适配。
  • NeoSkuSelector: 强大的 SKU 选择器，支持多规格组合、库存联动、价格变动。
  • NeoProductCard: 支持瀑布流布局的商品卡片组件。
• 视觉体验:
  • 采用现代化设计语言，大圆角、微阴影、毛玻璃效果。
  • 全局统一的主题色配置 ($neo-primary)。

优化与改进 (Optimizations)

• 安全区域适配: 深度适配 iPhone X+ 系列机型的底部 Home Indicator 安全区域，防止内容遮挡。
• 性能优化: 静态图片资源全面接入 CDN，减小源码包体积，提升加载速度。
• 代码规范: 移除未使用的静态资源（图片、字体、图标），保持项目轻量整洁。
• 交互细节: 优化了滚动条显示策略，提升页面浏览的沉浸感。

平台兼容性

Neo Shop Template - 电商商城模板

简介

Neo Shop Template 是一款基于 UniApp + Vue3 + Vite 电商商城前端模板。 本项目采用最新的前端技术栈，设计风格简约时尚，注重用户体验与细节打磨。内置了丰富的电商常用组件和页面，适配了微信小程序及各类移动端平台，开箱即用，帮助开发者快速搭建高品质的电商应用。

✨ 核心特性

• 技术栈: UniApp + Vue3 (Script Setup) + Vite + SCSS
• 现代化 UI: 采用流行的圆角、渐变、毛玻璃效果，视觉体验极佳。
• 组件化开发: 封装了 NeoNavbar (自定义导航栏)、NeoTabbar (自定义底部栏)、NeoProductCard (商品卡片)、NeoSkuSelector (SKU选择器) 等高复用组件。
• 完美适配: 深度适配刘海屏、全面屏，自动处理状态栏、导航栏及底部安全区域 (Safe Area) 的布局问题。
• 丰富页面: 包含首页、商品详情、店铺主页、购物车、个人中心、订单列表、售后、足迹、收藏等核心电商页面。
• 交互细节: 优化的滚动体验、骨架屏加载、点击反馈及微动画。

📂 目录结构

neo-shop-template/
├── components/             # 公共组件
│   ├── NeoNavbar/          # 自定义导航栏
│   ├── NeoTabbar/          # 自定义底部栏
│   ├── NeoProductCard/     # 商品卡片
│   ├── NeoSkuSelector/     # SKU 选择器
│   └── ...
├── pages/                  # 页面文件
│   ├── home/               # 首页
│   ├── shop/               # 店铺主页
│   ├── product-detail/     # 商品详情
│   ├── cart/               # 购物车
│   ├── profile/            # 个人中心
│   └── ...
├── static/                 # 静态资源 (图标、图片)
├── App.vue                 # 应用入口
├── main.js                 # Vue 初始化
├── pages.json              # 页面路由配置
└── uni.scss                # 全局样式变量

🚀 快速开始

1. 下载项目: 在 DCloud 插件市场下载本模板或 Clone 仓库。
2. 导入 HBuilderX: 将项目文件夹拖入 HBuilderX。
3. 运行项目:
   • 点击菜单栏 运行 -> 运行到小程序模拟器 -> 微信开发者工具。
   • 或 运行 -> 运行到浏览器 -> Chrome。

🛠️ 二次开发指南

• 修改主题色: 在 uni.scss 中修改 $neo-primary 变量即可一键换肤。
• 数据对接: 页面中的数据均为 Mock 数据，请根据实际业务需求替换为 API 请求。
• 图标替换: 项目图标位于 /static/icons/，建议使用 SVG 或高清 PNG 替换。

⚠️ 注意事项

• 本模板为纯前端静态模板，不包含后端逻辑。

🤝 定制开发与支持

如果您需要完整功能开发、后端对接或个性化定制服务，欢迎联系作者进行付费开发。我们拥有丰富的电商项目经验，可为您提供专业的技术支持与解决方案。

如果您觉得这个模板对您有帮助，请给个五星好评！您的支持是我们更新的动力。