修改小程序
This commit is contained in:
@@ -1,197 +1,157 @@
|
||||
# 政府端小程序
|
||||
# 政府端微信小程序
|
||||
|
||||
基于Vue.js和uni-app开发的政府管理系统微信小程序,提供完整的政府监管、审批、人员管理等功能。
|
||||
## 项目简介
|
||||
|
||||
这是一个基于微信小程序开发的政府端管理系统,主要用于政府部门的养殖户管理和相关业务处理。
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 核心功能
|
||||
- **数据看板**: 实时展示各类统计数据和分析图表
|
||||
- **监管管理**: 监管记录管理、检查任务分配、结果跟踪
|
||||
- **审批管理**: 各类申请审批流程管理
|
||||
- **人员管理**: 政府工作人员信息管理
|
||||
- **疫情监控**: 疫情数据监控和预警
|
||||
- **服务管理**: 政府服务项目管理
|
||||
- **仓库管理**: 物资仓库管理
|
||||
### 🏠 首页
|
||||
- **智能硬件设备管理**
|
||||
- 项圈仓库
|
||||
- 耳标仓库
|
||||
- 脚环仓库
|
||||
- 主机仓库
|
||||
|
||||
### 技术特性
|
||||
- 基于Vue 2.6 + uni-app框架
|
||||
- 支持微信小程序、H5、App多端发布
|
||||
- 响应式设计,适配各种屏幕尺寸
|
||||
- 模块化组件设计,易于维护和扩展
|
||||
- 完整的API接口集成
|
||||
- 用户认证和权限管理
|
||||
- **其它功能模块**
|
||||
- 牲畜身份认证
|
||||
- 无纸化检疫
|
||||
- 检疫证查询
|
||||
- 金融保险监管
|
||||
- 屠宰场监管
|
||||
- 检疫站监管
|
||||
- 无纸化防疫
|
||||
- 防疫站监管
|
||||
|
||||
### 👥 养殖户管理
|
||||
- 养殖户信息列表
|
||||
- 搜索功能(按姓名、手机号)
|
||||
- 添加/编辑/删除养殖户
|
||||
- 分页加载
|
||||
- 下拉刷新
|
||||
|
||||
### 👤 我的
|
||||
- 个人信息展示
|
||||
- 系统设置
|
||||
- 帮助中心
|
||||
- 关于我们
|
||||
- 退出登录
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **框架**:微信小程序原生开发
|
||||
- **语言**:JavaScript、WXML、WXSS
|
||||
- **工具**:微信开发者工具
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
government-mini-program/
|
||||
├── src/
|
||||
│ ├── components/ # 组件目录
|
||||
│ │ ├── Home.vue # 首页组件
|
||||
│ │ ├── Login.vue # 登录组件
|
||||
│ │ ├── Dashboard.vue # 数据看板
|
||||
│ │ ├── Supervision.vue # 监管管理
|
||||
│ │ ├── Approval.vue # 审批管理
|
||||
│ │ ├── Personnel.vue # 人员管理
|
||||
│ │ ├── Epidemic.vue # 疫情监控
|
||||
│ │ ├── Service.vue # 服务管理
|
||||
│ │ ├── Warehouse.vue # 仓库管理
|
||||
│ │ └── Profile.vue # 个人中心
|
||||
│ ├── pages/ # 页面目录
|
||||
│ ├── services/ # API服务
|
||||
│ ├── utils/ # 工具类
|
||||
│ ├── styles/ # 样式文件
|
||||
│ ├── router/ # 路由配置
|
||||
│ ├── App.vue # 根组件
|
||||
│ └── main.js # 入口文件
|
||||
├── public/ # 静态资源
|
||||
├── package.json # 项目配置
|
||||
├── pages.json # 页面配置
|
||||
├── manifest.json # 应用配置
|
||||
└── vue.config.js # Vue配置
|
||||
├── app.js # 小程序入口文件
|
||||
├── app.json # 全局配置
|
||||
├── app.wxss # 全局样式
|
||||
├── pages/ # 页面目录
|
||||
│ ├── index/ # 首页
|
||||
│ │ ├── index.js
|
||||
│ │ ├── index.json
|
||||
│ │ ├── index.wxml
|
||||
│ │ └── index.wxss
|
||||
│ ├── farmer/ # 养殖户管理
|
||||
│ │ ├── farmer.js
|
||||
│ │ ├── farmer.json
|
||||
│ │ ├── farmer.wxml
|
||||
│ │ └── farmer.wxss
|
||||
│ └── profile/ # 我的
|
||||
│ ├── profile.js
|
||||
│ ├── profile.json
|
||||
│ ├── profile.wxml
|
||||
│ └── profile.wxss
|
||||
├── images/ # 图片资源
|
||||
├── sitemap.json # 站点地图
|
||||
├── project.config.json # 项目配置
|
||||
└── package.json # 包管理文件
|
||||
```
|
||||
|
||||
## 开发环境
|
||||
## 快速开始
|
||||
|
||||
### 环境要求
|
||||
- Node.js 16.20.2+
|
||||
- npm 8.0.0+
|
||||
- 微信开发者工具
|
||||
### 1. 环境准备
|
||||
- 安装微信开发者工具
|
||||
- 注册微信小程序账号
|
||||
|
||||
### 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
### 2. 导入项目
|
||||
1. 打开微信开发者工具
|
||||
2. 选择"导入项目"
|
||||
3. 选择项目根目录
|
||||
4. 填写AppID(测试可使用测试号)
|
||||
5. 点击"确定"
|
||||
|
||||
### 开发模式
|
||||
```bash
|
||||
# H5开发
|
||||
npm run dev:h5
|
||||
### 3. 运行项目
|
||||
- 在微信开发者工具中点击"编译"
|
||||
- 在模拟器中查看效果
|
||||
- 使用真机调试测试实际效果
|
||||
|
||||
# 微信小程序开发
|
||||
npm run dev:mp-weixin
|
||||
```
|
||||
## 设计说明
|
||||
|
||||
### 构建生产版本
|
||||
```bash
|
||||
# H5构建
|
||||
npm run build:h5
|
||||
### 视觉设计
|
||||
- **主色调**:绿色 (#4CAF50)
|
||||
- **背景色**:浅灰色 (#f5f5f5)
|
||||
- **卡片样式**:圆角、阴影效果
|
||||
- **图标设计**:圆形背景、彩色配色
|
||||
|
||||
# 微信小程序构建
|
||||
npm run build:mp-weixin
|
||||
```
|
||||
### 布局特点
|
||||
- **顶部导航**:绿色背景,白色文字
|
||||
- **功能区域**:卡片式布局,网格排列
|
||||
- **底部导航**:3个标签页,图标+文字
|
||||
- **响应式**:适配不同屏幕尺寸
|
||||
|
||||
## API接口
|
||||
## 开发说明
|
||||
|
||||
### 认证接口
|
||||
- `POST /api/auth/login` - 用户登录
|
||||
- `GET /api/auth/userinfo` - 获取用户信息
|
||||
### 页面配置
|
||||
每个页面包含4个文件:
|
||||
- `.js` - 页面逻辑
|
||||
- `.json` - 页面配置
|
||||
- `.wxml` - 页面结构
|
||||
- `.wxss` - 页面样式
|
||||
|
||||
### 数据看板接口
|
||||
- `GET /api/visualization/data` - 获取可视化数据
|
||||
- `GET /api/supervision/stats` - 获取监管统计
|
||||
- `GET /api/approval/stats` - 获取审批统计
|
||||
### 数据管理
|
||||
- 使用Page的data属性管理页面数据
|
||||
- 通过setData方法更新数据
|
||||
- 支持下拉刷新和上拉加载
|
||||
|
||||
### 监管管理接口
|
||||
- `GET /api/supervision/list` - 获取监管列表
|
||||
- `POST /api/supervision` - 创建监管记录
|
||||
- `PUT /api/supervision/:id` - 更新监管记录
|
||||
- `DELETE /api/supervision/:id` - 删除监管记录
|
||||
|
||||
### 审批管理接口
|
||||
- `GET /api/approval/list` - 获取审批列表
|
||||
- `POST /api/approval` - 创建审批
|
||||
- `POST /api/approval/:id/approve` - 审批通过
|
||||
- `POST /api/approval/:id/reject` - 审批拒绝
|
||||
|
||||
### 人员管理接口
|
||||
- `GET /api/personnel/list` - 获取人员列表
|
||||
- `POST /api/personnel` - 创建人员
|
||||
- `PUT /api/personnel/:id` - 更新人员
|
||||
- `DELETE /api/personnel/:id` - 删除人员
|
||||
|
||||
### 疫情监控接口
|
||||
- `GET /api/epidemic/list` - 获取疫情列表
|
||||
- `POST /api/epidemic` - 创建疫情记录
|
||||
- `GET /api/epidemic/stats` - 获取疫情统计
|
||||
|
||||
### 服务管理接口
|
||||
- `GET /api/service/list` - 获取服务列表
|
||||
- `POST /api/service` - 创建服务
|
||||
- `PUT /api/service/:id` - 更新服务
|
||||
- `DELETE /api/service/:id` - 删除服务
|
||||
|
||||
### 仓库管理接口
|
||||
- `GET /api/warehouse/list` - 获取仓库列表
|
||||
- `POST /api/warehouse` - 创建仓库
|
||||
- `PUT /api/warehouse/:id` - 更新仓库
|
||||
- `DELETE /api/warehouse/:id` - 删除仓库
|
||||
|
||||
## 配置说明
|
||||
|
||||
### 环境配置
|
||||
在项目根目录创建 `.env` 文件(或复制 `config.env` 为 `.env`):
|
||||
```
|
||||
# API基础地址
|
||||
VUE_APP_API_BASE_URL=http://localhost:5352/api
|
||||
|
||||
# 应用配置
|
||||
VUE_APP_TITLE=政府管理系统
|
||||
VUE_APP_VERSION=1.0.0
|
||||
```
|
||||
|
||||
### 微信小程序配置
|
||||
在 `manifest.json` 中配置小程序信息:
|
||||
```json
|
||||
{
|
||||
"mp-weixin": {
|
||||
"appid": "your-wechat-appid",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"minified": true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 部署说明
|
||||
|
||||
### 微信小程序部署
|
||||
1. 使用微信开发者工具打开项目
|
||||
2. 配置小程序AppID
|
||||
3. 点击上传,提交审核
|
||||
4. 审核通过后发布
|
||||
|
||||
### H5部署
|
||||
1. 执行 `npm run build:h5`
|
||||
2. 将 `dist` 目录上传到服务器
|
||||
3. 配置nginx或其他web服务器
|
||||
|
||||
## 开发指南
|
||||
|
||||
### 添加新页面
|
||||
1. 在 `src/pages` 目录下创建页面文件夹
|
||||
2. 在 `pages.json` 中注册页面
|
||||
3. 在 `src/router/index.js` 中添加路由
|
||||
|
||||
### 添加新组件
|
||||
1. 在 `src/components` 目录下创建组件文件
|
||||
2. 在需要使用的页面中导入并使用
|
||||
|
||||
### 添加新API
|
||||
1. 在 `src/services` 目录下创建服务文件
|
||||
2. 在 `src/utils/request.js` 中添加请求方法
|
||||
3. 在组件中调用API
|
||||
### 事件处理
|
||||
- 使用bindtap绑定点击事件
|
||||
- 使用catchtap阻止事件冒泡
|
||||
- 支持表单输入和数据提交
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 确保后端API服务正常运行
|
||||
2. 检查网络请求配置和跨域设置
|
||||
3. 微信小程序需要配置合法域名
|
||||
4. 生产环境需要配置HTTPS
|
||||
1. **图标资源**:当前使用占位符图标,建议替换为实际设计图标
|
||||
2. **API接口**:功能模块目前显示"开发中"提示,需要对接实际后端API
|
||||
3. **权限控制**:根据实际需求添加用户权限验证
|
||||
4. **错误处理**:完善网络请求和异常情况的处理
|
||||
5. **性能优化**:图片压缩、代码分包等优化措施
|
||||
|
||||
## 许可证
|
||||
## 后续开发
|
||||
|
||||
MIT License
|
||||
### 功能完善
|
||||
- [ ] 对接后端API接口
|
||||
- [ ] 添加用户登录认证
|
||||
- [ ] 完善权限管理系统
|
||||
- [ ] 添加数据统计功能
|
||||
- [ ] 实现消息推送
|
||||
|
||||
### 体验优化
|
||||
- [ ] 添加加载动画
|
||||
- [ ] 优化页面切换效果
|
||||
- [ ] 完善错误提示
|
||||
- [ ] 添加操作反馈
|
||||
- [ ] 支持暗色模式
|
||||
|
||||
## 联系方式
|
||||
|
||||
如有问题或建议,请联系开发团队。
|
||||
|
||||
---
|
||||
|
||||
**版本**:v1.0.0
|
||||
**更新时间**:2024年1月
|
||||
|
||||
Reference in New Issue
Block a user