产品查看器小程序

基于微信原生框架开发的产品展示小程序，支持中英文双语切换。

功能特性

• 📱 产品分类浏览 - 左侧分类菜单，支持多级分类
• 🛍️ 产品列表展示 - 右侧产品卡片展示，包含图片、名称、价格
• 📋 产品详情页 - 支持图片/视频媒体展示，产品详细信息
• 🌐 多语言支持 - 中文/英文切换，数据本地化
• 🔄 下拉刷新 - 支持数据刷新
• 📷 图片预览 - 产品图片大图预览
• 📤 页面分享 - 支持产品页面分享

技术架构

前端

• 框架: 微信小程序原生框架
• 语言: JavaScript
• 样式: WXSS
• 组件: 微信小程序内置组件

后端API

• 语言: Golang
• 框架: Gin
• 数据库: MySQL
• 缓存: Redis

项目结构

ProductViewer_miniprogram/
├── pages/                          # 页面目录
│   ├── index/                      # 首页
│   │   ├── index.js               # 页面逻辑
│   │   ├── index.wxml             # 页面结构
│   │   ├── index.wxss             # 页面样式
│   │   └── index.json             # 页面配置
│   └── product-detail/            # 产品详情页
│       ├── product-detail.js
│       ├── product-detail.wxml
│       ├── product-detail.wxss
│       └── product-detail.json
├── utils/                          # 工具模块
│   ├── api.js                     # API接口封装
│   ├── language.js                # 多语言管理
│   └── util.js                    # 通用工具函数
├── app.js                         # 小程序入口文件
├── app.json                       # 小程序全局配置
├── app.wxss                       # 全局样式
├── project.config.json            # 项目配置
└── sitemap.json                   # 站点地图

API接口

基础配置

• Base URL: http://localhost:8080/api
• 支持语言: zh-CN (简体中文), en-US (英语)

接口列表

1. 获取公司信息

   GET /api/company?lang={语言代码}
   

2. 获取分类列表

   GET /api/categories?lang={语言代码}&parentId={父分类ID}
   

3. 获取产品列表

   GET /api/products?categoryId={分类ID}&lang={语言代码}
   

4. 获取产品详情

   GET /api/product/{产品ID}?lang={语言代码}
   

开发指南

1. 环境要求

• 微信开发者工具
• Node.js (可选，用于依赖管理)

2. 项目配置

1. 在微信开发者工具中导入项目
2. 修改 utils/api.js 中的 BASE_URL 为你的后端API地址
3. 配置项目的AppID（在project.config.json中）

3. 本地开发

1. 启动后端API服务
2. 在微信开发者工具中预览小程序
3. 使用真机调试测试API接口

4. 部署发布

1. 确保后端API服务正常运行
2. 在微信开发者工具中上传代码
3. 提交审核并发布

核心功能说明

多语言切换

• 支持中文/英文切换
• 语言设置本地持久化存储
• 切换语言时自动重新获取对应语言的数据

分类导航

• 左侧分类菜单，支持多级分类展示
• 点击分类自动加载对应产品列表
• 当前选中分类高亮显示

产品展示

• 产品卡片布局，包含图片、名称、价格
• 支持图片懒加载和占位符
• 点击产品卡片进入详情页

产品详情

• 支持图片/视频媒体轮播展示
• 产品基本信息展示（名称、价格、SKU）
• 图片支持点击放大预览
• 支持页面分享功能

注意事项

1. 网络请求域名配置

   • 需要在小程序后台配置合法域名
   • 开发阶段可以在开发者工具中关闭域名校验

2. 图片资源

   • 产品图片需要配置CDN或静态文件服务
   • 建议使用HTTPS协议

3. 错误处理

   • 网络请求失败时显示错误提示
   • 支持重试机制
   • 数据为空时显示友好提示

4. 性能优化

   • 图片懒加载
   • 列表数据分页加载（可根据需要扩展）
   • 适当的加载状态展示

扩展功能建议

• 产品搜索功能
• 产品收藏功能
• 分页加载
• 离线缓存
• 用户行为统计
• 产品对比功能

许可证

本项目仅供学习和开发参考使用。