管灌系统农户端微信小程序(嘉峪关应用)
编辑 | blame | 历史 | 原始文档

大禹节水灌溉系统

项目概述

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

项目结构

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. 云开发：项目可能使用了微信小程序云开发功能，用于数据存储和云函数。

API通信模块

API目录包含了项目中所有与后端通信相关的文件，提供了统一的网络请求处理机制。

文件结构

  • request.js: 网络请求核心模块，封装了微信小程序的wx.request接口
  • request(): 基础请求函数，处理请求配置、请求头设置和响应处理
  • get(): GET请求简化方法
  • post(): POST请求简化方法
  • 自动处理token验证、错误处理和loading状态

  • config.js: 配置文件，定义API基础URL和环境配置

  • 支持多项目环境：嘉峪关(JYG)、民勤(MQ)、测试环境(TEST)
  • setBaseUrl(): 动态切换项目环境的函数

  • env.js: 环境变量配置，定义当前运行环境（生产/测试）

  • statusCode.js: HTTP状态码常量定义，用于统一处理响应状态

使用方法

  1. GET请求：
    ```javascript
    const { get } = require('../../api/request')

// 获取项目列表
get({
url: '/wx/irrigation/getSimpleProjects',
isShowLoding: true
}).then(res => {
if (res.success) {
// 处理成功响应
console.log(res.content)
} else {
wx.showToast({
title: res.msg || '请求失败',
icon: 'none'
})
}
}).catch(err => {
console.error('请求失败：', err)
wx.showToast({
title: '请求失败',
icon: 'none'
})
})
```

  1. POST请求：
    ```javascript
    const { post } = require('../../api/request')

// 获取轮灌组列表
post({
url: '/wx/irrigation/getSimpleGroups',
data: {
projectId: '2025032017240700001',
planName: '2025032501',
startupMode: 1,
operatorId: 2024090516595200300,
schedules: [
{
groupId: 2025032017371700000,
duration: 5
}
]
},
isShowLoding: true
}).then(res => {
if (res.success) {
// 处理成功响应
console.log(res.content)
} else {
wx.showToast({
title: res.msg || '请求失败',
icon: 'none'
})
}
}).catch(err => {
console.error('请求失败：', err)
wx.showToast({
title: '请求失败',
icon: 'none'
})
})
```

  1. 切换项目环境：
    ```javascript
    const { setBaseUrl } = require('../../api/config')

// 切换到民勤项目
setBaseUrl('MQ')

// 切换到嘉峪关项目
setBaseUrl('JYG')

// 切换到测试环境
setBaseUrl('TEST')
```

所有网络请求会自动处理：
- token 认证（通过请求头 Authorization）
- 项目标识（通过请求头 tag）
- 应用标识（通过请求头 appId）
- 错误处理和响应解析
- 加载状态显示（通过 isShowLoding 参数控制）

代码风格和规范

  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. 在模拟器中预览效果，或使用真机调试功能在手机上预览。