# 小程序测试项目

**Repository Path**: bxb-l/ces

## Basic Information

- **Project Name**: 小程序测试项目
- **Description**: 微信小程序测试项目。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-29
- **Last Updated**: 2026-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序示例项目

这是一个功能完整的微信小程序示例项目，包含基础页面导航、数据请求和用户认证功能。

## 项目结构

```
WeChatMiniApp/
├── pages/                  # 页面目录
│   ├── index/             # 首页
│   │   ├── index.wxml     # 页面结构
│   │   ├── index.wxss     # 页面样式
│   │   ├── index.js       # 页面逻辑
│   │   └── index.json     # 页面配置
│   ├── list/              # 列表页
│   ├── detail/            # 详情页
│   └── profile/           # 个人中心
├── utils/                 # 工具类
│   ├── request.js         # 网络请求封装
│   └── api.js             # API接口定义
├── images/                # 图片资源
├── app.js                 # 小程序入口
├── app.json               # 全局配置
├── app.wxss               # 全局样式
├── project.config.json    # 项目配置
└── sitemap.json           # 搜索索引配置
```

## 功能特性

### ✅ 已实现功能

1. **底部导航栏 (TabBar)**
   - 首页
   - 列表
   - 我的

2. **首页**
   - 轮播图展示
   - 功能入口网格
   - 热门推荐列表
   - 下拉刷新

3. **列表页**
   - 搜索功能
   - 分类筛选
   - 列表展示
   - 下拉刷新
   - 上拉加载更多

4. **详情页**
   - 详情内容展示
   - 点赞功能
   - 收藏功能
   - 分享功能
   - 标签展示

5. **个人中心**
   - 微信登录授权
   - 用户信息展示
   - 统计数据
   - 功能菜单
   - 退出登录

6. **网络请求封装**
   - 统一的请求方法
   - 自动添加Token
   - 错误处理
   - 加载提示
   - GET/POST/PUT/DELETE支持
   - 文件上传支持

## 快速开始

### 1. 安装微信开发者工具

前往 [微信公众平台](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) 下载并安装微信开发者工具。

### 2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录: `WeChatMiniApp`
4. AppID 可以选择"测试号"或使用自己的AppID
5. 点击"导入"

### 3. 运行项目

导入后项目会自动编译，你可以在模拟器中预览效果。

### 4. 真机预览

1. 点击工具栏的"预览"按钮
2. 使用微信扫描二维码
3. 在手机上查看效果

## 配置说明

### 修改 AppID

在 `project.config.json` 中修改 `appid` 字段：

```json
{
  "appid": "你的AppID"
}
```

### 修改 API 地址

在 `app.js` 中修改 `baseUrl`：

```javascript
globalData: {
  baseUrl: 'https://your-api-domain.com'
}
```

### 自定义 TabBar 图标

将以下图标文件放入 `images/` 目录：

- `home.png` / `home-active.png` - 首页图标
- `list.png` / `list-active.png` - 列表图标
- `profile.png` / `profile-active.png` - 个人中心图标

建议尺寸: 81x81px

## 开发指南

### 添加新页面

1. 在 `pages/` 目录下创建页面文件夹
2. 创建四个文件: `.wxml`, `.wxss`, `.js`, `.json`
3. 在 `app.json` 的 `pages` 数组中添加页面路径

### 调用 API

```javascript
const API = require('../../utils/api')

// GET 请求
API.getList({ page: 1 }).then(data => {
  console.log(data)
})

// POST 请求
API.login(code).then(data => {
  console.log(data)
})
```

### 页面跳转

```javascript
// 普通跳转
wx.navigateTo({
  url: '/pages/detail/detail?id=1'
})

// 带参数跳转
wx.navigateTo({
  url: `/pages/detail/detail?id=${id}&type=news`
})

// 跳转到 TabBar 页面
wx.switchTab({
  url: '/pages/index/index'
})
```

## 技术栈

- WXML - 小程序标记语言
- WXSS - 小程序样式语言
- JavaScript - 逻辑层
- JSON - 配置文件

## 注意事项

1. 本项目使用模拟数据，实际使用时需要替换为真实的API接口
2. 微信登录需要在微信公众平台配置合法域名
3. 部分API需要在微信公众平台申请权限
4. 上传图片大小不能超过限制

## 相关资源

- [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)
- [微信小程序设计指南](https://developers.weixin.qq.com/miniprogram/design/)
- [微信开放社区](https://developers.weixin.qq.com/community/)

## License

MIT