更新记录

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 Logo

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 替换。

⚠️ 注意事项

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

🤝 定制开发与支持

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


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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。