# jztt

**Repository Path**: fanyouf/jztt

## Basic Information

- **Project Name**: jztt
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-18
- **Last Updated**: 2026-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# jztt - 小程序项目

基于 uni-app + Vue 3 开发的微信小程序项目，仿小米商城风格。

## 项目概述

- **框架**: uni-app
- **前端**: Vue 3
- **目标平台**: 微信小程序
- **AppID**: wx017bb11d70d7d623

## 项目结构

```
jztt/
├── pages/                  # 页面目录
│   ├── index/              # 首页
│   │   └── index.vue
│   ├── cates/              # 分类页
│   │   └── cates.vue
│   ├── fans/               # 米圈页
│   │   └── fans.vue
│   ├── cart/               # 购物车页
│   │   └── cart.vue
│   └── my/                 # 我的页
│       └── my.vue
├── static/                 # 静态资源
│   ├── icons/              # TabBar 图标
│   └── logo.png            # Logo
├── unpackage/              # 编译输出目录
├── App.vue                 # 应用入口组件
├── main.js                 # 应用入口文件
├── manifest.json           # 应用配置
├── pages.json              # 页面路由配置
├── uni.scss                # 全局样式变量
└── index.html              # H5 入口页面
```

## 页面功能

| 页面 | 路径 | 功能描述 | 开发状态 |
|------|------|----------|----------|
| 首页 | pages/index/index | Banner展示、功能导航、产品推荐 | ✅ 已完成 |
| 分类 | pages/cates/cates | 商品分类、搜索、推荐商品列表 | ✅ 已完成 |
| 米圈 | pages/fans/fans | 社区动态、用户互动 | ✅ 已完成 |
| 购物车 | pages/cart/cart | 购物车管理 | 🚧 待开发 |
| 我的 | pages/my/my | 个人中心 | 🚧 待开发 |

## TabBar 配置

底部导航栏包含 5 个入口：

- **首页** - 主页面入口
- **分类** - 商品分类浏览
- **米圈** - 社区互动
- **购物车** - 购物车管理
- **我的** - 个人中心

## 开发环境

### 前置要求

- HBuilderX (推荐最新版)
- 微信开发者工具
- Node.js

### 运行项目

1. 使用 HBuilderX 打开项目目录
2. 点击 `运行` -> `运行到小程序模拟器` -> `微信开发者工具`
3. 在微信开发者工具中预览效果

### 发布体验版

1. 点击 `发行` -> `小程序-微信`
2. 填写版本号和项目描述
3. 上传代码到微信后台
4. 在微信公众平台设置为体验版

## 技术要点

- 使用 **Vue 3** 组合式 API
- 采用 **rpx** 响应式单位，适配不同屏幕尺寸
- 自定义导航栏样式 (`navigationStyle: custom`)
- 支持 Vue 2 和 Vue 3 兼容写法

## 学习要点

1. 小程序基础概念与申请流程
2. uni-app 项目结构理解
3. 页面布局与样式编写
4. TabBar 配置与导航
5. 微信小程序体验版发布流程

## 注意事项

- 提示词关键词：`uni-app`、`HBuilderX`、`微信小程序`
- 图片资源建议使用 CDN 链接或本地 static 目录
- 发布前需在 `manifest.json` 中配置正确的 AppID



完成购物车的静态页面布局
完成米圈的静态页面布局



分类这个页面的效果