# Iot-pd

**Repository Path**: jayEntp/iot

## Basic Information

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

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Uni-App 通用开发模板

这是一个基于 uni-app 框架的通用开发模板，提供了完整的项目结构和常用功能组件，可以快速开始新项目的开发。

## 🚀 特性

- ✅ 完整的项目结构和配置
- ✅ 多环境配置支持（开发/测试/生产）
- ✅ 统一的 API 请求封装
- ✅ 通用工具函数和混入
- ✅ 响应式布局和现代化 UI
- ✅ 示例页面和组件
- ✅ 完善的错误处理机制

## 📁 项目结构

```
├── api/                    # API 接口
│   ├── config.js          # API 配置
│   └── rs.js              # 请求方法
├── common/                # 公共资源
│   ├── config.js          # 全局配置
│   └── request.js         # 请求封装
├── components/            # 自定义组件
├── mixins/               # 混入
│   └── mixins.js         # 通用混入
├── pages/                # 主要页面
│   ├── index/            # 首页
│   └── mine/             # 个人中心
├── static/               # 静态资源
├── subPages/             # 子页面
│   ├── example/          # 示例页面
│   ├── setting/          # 设置页面
│   └── webview/          # 网页视图
├── utils/                # 工具函数
├── App.vue               # 应用入口
├── main.js               # 主入口文件
├── manifest.json         # 应用配置
├── pages.json            # 页面配置
└── uni.scss              # 全局样式
```

## 🛠️ 快速开始

### 1. 环境准备

确保已安装以下工具：
- [HBuilderX](https://www.dcloud.io/hbuilderx.html) 或 [VS Code](https://code.visualstudio.com/)
- [Node.js](https://nodejs.org/) (推荐 v14+)

### 2. 项目配置

1. **修改应用信息**
   编辑 `manifest.json` 文件，更新应用名称、appid 等信息：
   ```json
   {
     "name": "你的应用名称",
     "appid": "你的应用ID",
     "description": "应用描述"
   }
   ```

2. **配置 API 地址**
   编辑 `common/config.js` 文件，设置不同环境的 API 地址：
   ```javascript
   const config = {
     development: {
       baseUrl: 'https://dev-api.example.com'
     },
     production: {
       baseUrl: 'https://api.example.com'
     }
   }
   ```

3. **更新页面配置**
   根据需要修改 `pages.json` 文件中的页面路由和 tabBar 配置。

### 3. 开发指南

#### API 请求

使用封装好的 API 方法：

```javascript
// 在页面中使用
import { getUserInfo, getDataList } from '@/api/rs.js'

export default {
  async onLoad() {
    try {
      const userInfo = await getUserInfo()
      const dataList = await getDataList({ page: 1 })
    } catch (error) {
      console.error('请求失败:', error)
    }
  }
}
```

#### 使用混入

在页面中使用通用混入：

```javascript
import mixins from '@/mixins/mixins.js'

export default {
  mixins: [mixins],
  methods: {
    handleUpload() {
      // 使用混入中的文件上传方法
      this.uploadFileApi({
        filePath: 'path/to/file',
        success: (res) => {
          console.log('上传成功:', res)
        }
      })
    }
  }
}
```

#### 页面导航

```javascript
// 跳转到普通页面
this.navigateTo('/subPages/example/detail?id=123')

// 跳转到 tabBar 页面
this.switchTab('/pages/index/index')

// 跳转到网页
this.navigateTo('/subPages/webview/webview?url=https://example.com&title=网页标题')
```

## 📱 示例页面

模板包含以下示例页面：

- **首页** (`pages/index/index.vue`)
  - 轮播图展示
  - 通知公告
  - 功能菜单网格
  - 内容列表

- **个人中心** (`pages/mine/mine.vue`)
  - 用户信息展示
  - 功能菜单
  - 登录/退出功能

- **列表页面** (`subPages/example/list.vue`)
  - 搜索功能
  - 分类筛选
  - 下拉刷新
  - 上拉加载更多

- **详情页面** (`subPages/example/detail.vue`)
  - 内容展示
  - 图片预览
  - 操作按钮
  - 相关推荐

## 🎨 样式规范

### 尺寸单位
- 使用 `rpx` 作为主要尺寸单位
- 字体大小推荐：标题 32-36rpx，正文 28-30rpx，辅助文字 24-26rpx

### 颜色规范
```scss
// 主色调
$primary-color: #007aff;
$success-color: #4cd964;
$warning-color: #f0ad4e;
$error-color: #dd524d;

// 文字颜色
$text-color: #333;
$text-light: #666;
$text-lighter: #999;

// 背景颜色
$bg-color: #f8f9fa;
$bg-white: #fff;
```

### 布局规范
- 页面边距：30rpx
- 组件间距：20rpx
- 圆角：8-12rpx
- 阴影：使用 box-shadow 增加层次感

## 🔧 配置说明

### 环境配置

在 `common/config.js` 中配置不同环境：

```javascript
const config = {
  // 开发环境
  development: {
    baseUrl: 'https://dev-api.example.com',
    debug: true
  },
  // 生产环境
  production: {
    baseUrl: 'https://api.example.com',
    debug: false
  }
}
```

### 请求配置

在 `common/request.js` 中可以配置：
- 请求超时时间
- 请求拦截器
- 响应拦截器
- 错误处理

## 📝 开发建议

1. **组件化开发**
   - 将可复用的 UI 组件放在 `components` 目录
   - 使用 props 和 events 进行组件通信

2. **状态管理**
   - 简单状态使用 `uni.setStorageSync/getStorageSync`
   - 复杂状态可以考虑使用 Vuex

3. **性能优化**
   - 合理使用图片懒加载
   - 避免在 onShow 中执行重复请求
   - 使用节流防抖优化用户交互

4. **兼容性**
   - 注意不同平台的 API 差异
   - 使用条件编译处理平台特定代码

## 🐛 常见问题

### Q: 如何添加新页面？
A: 1. 在对应目录创建 .vue 文件
   2. 在 pages.json 中添加页面路由配置

### Q: 如何自定义 tabBar？
A: 在 pages.json 的 tabBar 配置中修改图标、文字和页面路径

### Q: 如何处理跨域问题？
A: 在 manifest.json 中配置 h5 的 devServer proxy

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个模板。

## 📚 更多文档

- [快速开始](./docs/QUICK_START.md) - 5分钟快速上手指南
- [模板配置](./docs/TEMPLATE_SETUP.md) - 模板配置和定制指南
- [开发指南](./docs/DEVELOPMENT.md) - 详细的开发说明
- [API 文档](./docs/API.md) - API 接口说明
- [组件文档](./docs/COMPONENTS.md) - 组件使用说明
- [部署指南](./docs/DEPLOYMENT.md) - 项目部署说明

---

**注意**: 这是一个通用模板，请根据具体项目需求进行调整和扩展。