冰淇淋小程序

项目概述

这是一款以唐朝文化为主题的冰淇淋电商微信小程序，采用纯原生微信小程序开发，无需后端服务，所有数据存储在本地。小程序融合了中国传统文化元素，将冰淇淋产品与唐朝名胜、诗词意境相结合，打造独特的文化消费体验。

技术栈

技术	版本/说明
开发框架	微信小程序原生框架
基础库版本	trial (最新试用版)
组件框架	glass-easel
样式语言	WXSS
模板语言	WXML
脚本语言	JavaScript (ES6)
数据存储	本地存储 (wx.setStorageSync)

项目结构

ice-cream-mini-program/
├── mini/                          # 小程序主目录
│   ├── app.js                     # 小程序入口文件（全局数据）
│   ├── app.json                   # 小程序全局配置
│   ├── app.wxss                   # 全局样式
│   ├── project.config.json        # 项目配置文件
│   ├── sitemap.json               # 站点地图配置
│   ├── custom-tab-bar/            # 自定义底部导航栏
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── icons/                     # 图标资源
│   │   ├── home.png / home_selected.png
│   │   ├── category.png / category_selected.png
│   │   ├── cart.png / cart_selected.png
│   │   ├── my.png / my_selected.png
│   │   └── ...
│   ├── images/                    # 图片资源
│   │   ├── banner.png / banner2.png / banner3.png
│   │   ├── product1.png ~ product11.png
│   │   ├── avatar.jpg
│   │   └── background.png
│   └── pages/                     # 页面目录
│       ├── index/                 # 首页
│       ├── category/              # 分类页
│       ├── cart/                  # 购物车页
│       ├── my/                    # 个人中心页
│       ├── detail/                # 商品详情页
│       ├── search/                # 搜索页
│       ├── orders/                # 订单列表页
│       ├── orderConfirm/          # 订单确认/支付页
│       └── phoneLogin/            # 手机号登录页
└── 封面/                          # 项目封面图片

功能模块

1. 首页模块 (pages/index)

• 轮播图展示：展示3张精美Banner图片
• 功能入口区：开始点单、新品推荐、特色产品、我的订单
• 搜索功能：点击搜索框跳转到搜索页面
• 推荐商品展示：展示4款精选推荐商品
• 快速加入购物车：商品卡片支持一键加购

2. 分类模块 (pages/category)

• 分类导航：盛唐、名胜、古韵、梦幻、新品推荐
• 商品列表：按分类展示商品
• 加入购物车：支持快速加购
• 商品详情跳转：点击商品进入详情页

3. 购物车模块 (pages/cart)

• 商品列表展示：显示已加入购物车的商品
• 数量调整：增加/减少商品数量
• 商品选择：单选/全选商品
• 价格计算：实时计算选中商品总价
• 删除商品：支持删除单个商品
• 提交订单：跳转到订单确认页

4. 个人中心模块 (pages/my)

• 用户信息展示：头像、昵称
• 登录功能：
  • 微信授权登录
  • 手机号验证码登录
• 地址管理：收货地址的添加和修改
• 个人信息修改：修改头像和昵称
• 我的订单：查看历史订单
• 退出登录：清除登录状态

5. 商品详情模块 (pages/detail)

• 商品图片展示
• 商品信息：名称、价格、标签、描述
• 商品规格：规格、保质期、存储方式
• 销量评分：月销量、好评率
• 操作按钮：加入购物车、立即购买

6. 搜索模块 (pages/search)

• 关键词搜索：支持商品名称和标签搜索
• 搜索结果展示：展示匹配的商品列表
• 快速操作：加入购物车、查看详情

7. 订单模块 (pages/orders, pages/orderConfirm)

• 订单确认：确认商品信息和总价
• 支付方式选择：微信支付、支付宝支付
• 模拟支付：模拟支付流程
• 订单列表：查看历史订单记录
• 订单详情：订单号、商品、金额、状态、时间

8. 登录模块 (pages/phoneLogin)

• 手机号输入：11位手机号验证
• 验证码获取：60秒倒计时
• 协议勾选：用户协议确认
• 模拟登录：本地模拟登录流程

数据模型

商品数据结构

{
  id: Number,           // 商品ID
  name: String,         // 商品名称
  image: String,        // 商品图片路径
  type: String,         // 商品分类
  price: Number,        // 商品价格
  tags: Array,          // 商品标签
  checked: Boolean,     // 是否选中
  description: String,  // 商品描述
  monthlySales: Number, // 月销量
  rating: Number,       // 好评率
  specs: String,        // 规格
  expiry: String,       // 保质期
  storage: String       // 存储方式
}

购物车数据结构

{
  ...商品数据,
  quantity: Number,     // 购买数量
  checked: Boolean      // 是否选中
}

订单数据结构

{
  id: String,           // 订单号
  items: Array,         // 商品列表
  totalPrice: Number,   // 订单总价
  paymentMethod: String,// 支付方式
  status: String,       // 订单状态
  createTime: String    // 创建时间
}

特色功能

1. 自定义TabBar

• 采用自定义组件实现底部导航栏
• 支持图标切换动画
• 适配iPhone安全区域

2. 本地数据持久化

• 购物车数据本地存储
• 订单数据本地存储
• 用户信息本地存储
• 地址信息本地存储

3. 唐朝文化主题

• 商品命名融入唐朝元素（大明宫、开元盛世、贞观、雁塔等）
• 分类采用文化主题（盛唐、名胜、古韵、梦幻）
• 粉色系UI设计，温馨甜美

运行说明

环境要求

• 微信开发者工具（最新版本）
• 微信基础库 2.0.0+

运行步骤

1. 下载并安装微信开发者工具
2. 打开微信开发者工具，选择"导入项目"
3. 选择 mini 目录作为项目目录
4. 填入自己的 AppID（或使用测试号）
5. 点击"编译"即可预览

注意事项

• 本项目为纯前端小程序，无需后端服务
• 所有数据存储在本地，清除小程序缓存会丢失数据
• 支付功能为模拟支付，非真实支付

页面预览

首页	分类	购物车	我的
轮播图+推荐商品	分类导航+商品列表	商品管理+结算	用户信息+功能入口

项目配置

AppID

wx445c1727641eb032

主题色

主色调: #ff93de (粉色)
选中色: #ff93de
文字色: #7D7D7D
背景色: #FFFFFF

扩展建议

1. 接入后端服务：可对接真实后端API，实现数据云端存储
2. 真实支付：接入微信支付，实现真实交易
3. 用户系统：完善用户注册、登录、会员体系
4. 优惠券系统：添加优惠券、满减活动
5. 评价系统：添加商品评价功能
6. 分享功能：添加商品分享、邀请好友功能

---

项目类型: 纯微信小程序
适用场景: 课程设计、计算机设计、学习参考
开发难度: ⭐⭐⭐ (中等)