# uni-base

**Repository Path**: li160405103/uni-base

## Basic Information

- **Project Name**: uni-base
- **Description**: 测试原生uni的功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-06
- **Last Updated**: 2025-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UniApp Base 项目

这是一个基于 UniApp 框架的基础项目，集成了 wot-design-uni 组件库。

## 项目简介

本项目使用 wot-design-uni 组件库实现了底部导航栏（TabBar）功能，包含三个主要页面：
- 首页
- 社区
- 我的

## 技术栈

- **框架**: UniApp
- **UI组件库**: wot-design-uni
- **开发语言**: Vue 3 + JavaScript

## 项目结构

```
uniapp-base/
├── App.vue                 # 应用入口文件，包含TabBar组件
├── pages/
│   ├── index/
│   │   └── index.vue      # 首页
│   ├── community/
│   │   └── community.vue  # 社区页面
│   └── mine/
│       └── mine.vue       # 我的页面
├── pages.json             # 页面路由配置
├── manifest.json          # 应用配置
└── uni_modules/
    └── wot-design-uni/    # wot-design-uni组件库
```

## 功能说明

### TabBar 导航

项目使用 `wd-tabbar` 和 `wd-tabbar-item` 组件实现了底部导航栏，包含以下特性：

- **固定底部**: TabBar固定在页面底部
- **安全区域适配**: 支持iPhone X等机型的安全区域适配
- **占位空间**: 自动为TabBar预留占位空间，避免内容被遮挡
- **页面切换**: 点击TabBar项可以切换对应的页面

### 页面说明

#### 首页 (pages/index/index)
- 显示应用Logo和欢迎信息
- 作为应用的启动页面

#### 社区页面 (pages/community/community)
- 社区内容展示页面
- 预留后续功能扩展

#### 我的页面 (pages/mine/mine)
- 个人中心页面
- 预留后续功能扩展

## 使用方法

### 开发环境

1. 使用 HBuilderX 打开项目
2. 选择运行到浏览器/小程序/APP等平台
3. 开始开发

### TabBar配置

TabBar配置在 `App.vue` 文件中，主要配置项：

```vue
<wd-tabbar 
  :model-value="currentTab" 
  fixed 
  placeholder 
  safe-area-inset-bottom
  @change="handleTabChange"
>
  <wd-tabbar-item name="0" title="首页" icon="home" />
  <wd-tabbar-item name="1" title="社区" icon="chat" />
  <wd-tabbar-item name="2" title="我的" icon="user" />
</wd-tabbar>
```

**参数说明**:
- `model-value`: 当前选中的Tab索引（0、1、2）
- `fixed`: 固定在底部
- `placeholder`: 是否显示占位空间
- `safe-area-inset-bottom`: 是否适配底部安全区域
- `@change`: Tab切换事件处理

**TabBar项配置**:
- `name`: Tab的唯一标识（对应索引）
- `title`: Tab显示的文字
- `icon`: Tab显示的图标名称（使用wot-design-uni内置图标）

### 添加新页面

1. 在 `pages` 目录下创建新的页面文件夹和vue文件
2. 在 `pages.json` 中添加页面配置
3. 如需添加到TabBar，在 `App.vue` 中添加对应的 `wd-tabbar-item`

### 页面路由

页面路由配置在 `pages.json` 中，`pages` 数组的第一项为应用启动页。

页面切换使用 `uni.reLaunch()` 方法，确保页面栈清空，避免返回按钮问题。

## 组件库文档

wot-design-uni 组件库文档：
- [官方文档](https://wot-ui.cn)
- [GitHub](https://github.com/Moonofweisheng/wot-design-uni)

## 注意事项

1. **页面底部间距**: 所有TabBar页面都需要添加 `padding-bottom: 120rpx` 以避免内容被TabBar遮挡
2. **页面切换**: 使用 `uni.reLaunch()` 切换TabBar页面，会清空页面栈
3. **图标使用**: TabBar图标使用wot-design-uni内置图标，图标名称参考组件库文档
4. **安全区域**: TabBar已配置安全区域适配，在iPhone X等机型上会自动适配

## 后续优化建议

1. 添加页面加载状态
2. 优化页面切换动画
3. 添加TabBar徽标功能（如消息数量提示）
4. 实现页面懒加载优化性能
5. 添加页面缓存机制

## 开发说明

本项目适用于：
- 微信小程序
- 支付宝小程序
- H5
- APP（iOS/Android）

开发时请注意各平台的差异，使用条件编译处理平台特定代码。