大禹节水灌溉系统

项目概述

大禹节水灌溉系统是一个微信小程序项目，用于管理和控制农业灌溉系统。该系统允许用户查看当前灌溉计划、创建新的灌溉计划、管理轮灌组以及监控灌溉状态等功能。

项目结构

irrigate_user/
├── api/                  # API接口相关文件
├── images/               # 图片资源文件
├── miniprogram_npm/      # 小程序NPM构建目录
│   └── tdesign-miniprogram/  # TDesign UI组件库
├── node_modules/         # 项目依赖
│   ├── dayjs/            # 日期处理库
│   └── tdesign-miniprogram/ # TDesign UI组件库源码
├── pages/                # 页面文件
│   ├── createIrrigation/ # 新建灌溉计划页面
│   ├── feedback/         # 反馈页面
│   ├── home/             # 首页
│   ├── index/            # 引导页
│   ├── irrigation/       # 灌溉计划管理页面
│   ├── login/            # 登录页面
│   ├── my/               # 个人中心页面
│   ├── openCard/         # 开卡页面
│   ├── personCharge/     # 个人充值页面
│   ├── rechargeCard/     # 充值卡页面
│   ├── rechargeList/     # 充值记录页面
│   ├── rechargeMoney/    # 充值金额页面
│   ├── valveList/        # 阀门列表页面
│   ├── wallet/           # 钱包页面
│   ├── waterIntake/      # 取水页面
│   ├── wxbind/           # 微信绑定页面
│   └── wxlogin/          # 微信登录页面
├── utils/                # 工具函数
├── .cloudbase/           # 云开发配置
├── .eslintrc.js          # ESLint配置
├── .gitignore            # Git忽略文件
├── app.js                # 小程序入口文件
├── app.json              # 小程序全局配置
├── app.wxss              # 小程序全局样式
├── package.json          # 项目依赖配置
├── package-lock.json     # 依赖版本锁定文件
├── project.config.json   # 项目配置文件
└── sitemap.json          # 小程序sitemap配置

使用的框架和库

1. 微信小程序原生框架：项目基于微信小程序原生框架开发，使用WXML、WXSS、JS和JSON文件组织代码。

2. TDesign 小程序组件库：使用腾讯TDesign UI组件库（版本1.2.8），提供了丰富的UI组件，如日期时间选择器(t-date-time-picker)等。

• 文档地址：https://tdesign.tencent.com/miniprogram/overview
• 组件使用方式：在页面JSON文件中引入所需组件，如：
  json { "usingComponents": { "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker", "t-avatar": "tdesign-miniprogram/avatar/avatar", "t-switch": "tdesign-miniprogram/switch/switch", "t-button": "tdesign-miniprogram/button/button", "t-dialog": "tdesign-miniprogram/dialog/dialog" } }

1. Day.js：轻量级的JavaScript日期处理库，用于日期格式化和操作。

• 主要用于TDesign日期时间选择器组件内部。
• 文档地址：https://day.js.org/

1. 云开发：项目可能使用了微信小程序云开发功能，用于数据存储和云函数。

代码风格和规范

1. 文件命名：

• 页面目录使用驼峰命名法，如createIrrigation
• 页面文件与目录同名，如createIrrigation.js

1. 样式规范：

• 使用WXSS编写样式
• 类名使用连字符命名法，如create-irrigation-container
• 组件样式采用BEM命名方式的变体

1. JavaScript规范：

• 使用ES6语法
• 函数采用驼峰命名法，如onPlanCodeInput
• 页面逻辑使用微信小程序Page构造器组织

1. 组件使用：

• 第三方组件使用前缀区分，如TDesign组件使用t-前缀
• 自定义组件放在对应页面目录下

页面交互模式

1. 表单交互：

• 输入框直接输入
• 时间选择使用弹出式选择器
• 表单提交前进行数据验证

1. 列表交互：

• 使用可折叠的嵌套列表
• 支持项目展开/折叠
• 支持选择/取消选择项目

1. 导航交互：

• 使用微信小程序原生导航
• 页面间通过wx.navigateTo进行跳转

1. UI风格：

• 主色调：蓝色(#1890FF)
• 背景色：浅灰色(#f5f5f5)
• 文字颜色：深色(#333)、中等(#666)、浅色(#999)
• 圆角风格：按钮使用大圆角(44rpx)，卡片使用小圆角(8rpx)

开发注意事项

1. 新增页面时，需要在app.json的pages数组中添加页面路径。

2. 使用TDesign组件时，需要在页面的JSON文件中引入对应组件。

3. 图标使用SVG格式，存放在images目录下。

4. 网络请求应统一管理，建议放在api目录下。

5. 保持与现有代码风格一致，特别是命名规范和文件组织方式。

6. 项目使用npm管理依赖，添加新依赖时使用：
   npm install 包名 --save
   然后在微信开发者工具中构建npm。

如何运行项目

1. 安装依赖：
   npm install

2. 使用微信开发者工具打开项目目录。

3. 在工具中点击"构建npm"，将npm包构建到miniprogram_npm目录。

4. 在工具中点击"编译"按钮，或使用快捷键Ctrl+B(Windows)/Cmd+B(Mac)进行编译。

5. 在模拟器中预览效果，或使用真机调试功能在手机上预览。