aiotagro/xlxumu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
xlxumu/mini_program/README.md

6.0 KiB
Raw Permalink Blame History

智慧畜牧业小程序矩阵

项目简介

基于uni-app框架开发的智慧畜牧业小程序矩阵，包含5个独立的小程序应用，为畜牧业生态链提供全方位的数字化解决方案。

小程序列表

1. 养殖管理小程序 (farming-manager)

  • AppID: wx1234567890abcdef
  • 功能: 牲畜档案管理、健康监测、饲料管理、数据统计
  • 目标用户: 养殖户、养殖场管理员

2. 牛只交易小程序 (cattle-trading)

  • AppID: wx2345678901bcdefg
  • 功能: 牛只交易、价格行情、交易撮合、信用评估
  • 目标用户: 养殖户、经销商、交易商

3. 牛肉商城小程序 (beef-mall)

  • AppID: wx3456789012cdefgh
  • 功能: 商品销售、订单管理、支付结算、物流跟踪
  • 目标用户: 消费者、零售商

4. 银行监管小程序 (bank-supervision)

  • AppID: wx4567890123defghi
  • 功能: 贷款管理、信用评估、风险监控、监管报告
  • 目标用户: 银行工作人员、监管机构

5. 保险监管小程序 (insurance-supervision)

  • AppID: wx5678901234efghij
  • 功能: 保险管理、理赔处理、风险评估、合规监管
  • 目标用户: 保险公司、监管机构

技术架构

核心技术

  • 开发框架: uni-app (Vue 3 + Composition API)
  • 状态管理: Pinia
  • 样式处理: SCSS
  • 构建工具: HBuilderX / Vite
  • 目标平台: 微信小程序

项目结构

mini_program/
├── common/                 # 公共资源
│   ├── components/         # 共享组件
│   ├── store/             # 状态管理
│   ├── api/               # API接口
│   ├── utils/             # 工具函数
│   └── styles/            # 公共样式
├── farming-manager/       # 养殖管理小程序
├── cattle-trading/        # 牛只交易小程序
├── beef-mall/            # 牛肉商城小程序
├── bank-supervision/     # 银行监管小程序
├── insurance-supervision/ # 保险监管小程序
└── README.md             # 项目说明

共享组件

基础组件

  • Picker: 多功能选择器组件
  • Search: 智能搜索组件
  • Tabs: 多样式标签页组件
  • Swiper: 轮播图组件
  • Card: 卡片容器组件

业务组件

  • Chart: 数据图表组件
  • Upload: 文件上传组件
  • Form: 表单验证组件

开发环境

环境要求

  • Node.js >= 14.0.0
  • HBuilderX >= 3.0.0
  • 微信开发者工具

安装依赖

# 进入项目目录
cd mini_program

# 安装依赖
npm install

开发调试

  1. 使用HBuilderX打开项目
  2. 选择对应的小程序目录
  3. 点击运行到微信小程序
  4. 在微信开发者工具中预览

构建发布

  1. 在HBuilderX中选择发行
  2. 选择微信小程序平台
  3. 配置小程序信息
  4. 生成发布包
  5. 上传到微信公众平台

配置说明

manifest.json

每个小程序都有独立的manifest.json配置文件，包含：

  • 小程序基本信息
  • 权限配置
  • 平台特定设置

pages.json

页面路由配置，包含：

  • 页面路径定义
  • 导航栏样式
  • 底部标签栏配置

API接口

接口规范

  • 统一的请求/响应格式
  • Token认证机制
  • 错误码标准化
  • 接口版本管理

环境配置

// 开发环境
const DEV_API = 'https://dev-api.example.com'

// 测试环境
const TEST_API = 'https://test-api.example.com'

// 生产环境
const PROD_API = 'https://api.example.com'

状态管理

Store模块

  • user: 用户信息管理
  • app: 应用全局状态
  • livestock: 牲畜数据管理
  • trading: 交易数据管理
  • mall: 商城数据管理

使用示例

import { useUserStore } from '@/common/store/modules/user'

const userStore = useUserStore()
userStore.login(userInfo)

样式规范

设计规范

  • 主色调: #007aff (蓝色)
  • 辅助色: #4cd964 (绿色)
  • 警告色: #f0ad4e (橙色)
  • 错误色: #dd524d (红色)

尺寸规范

  • 基础字号: 28rpx
  • 行高: 1.4
  • 圆角: 8rpx
  • 间距: 10rpx, 20rpx, 30rpx, 40rpx

开发规范

命名规范

  • 组件名: PascalCase (如: UserProfile)
  • 文件名: kebab-case (如: user-profile.vue)
  • 变量名: camelCase (如: userName)

代码规范

  • 使用ESLint进行代码检查
  • 使用Prettier进行代码格式化
  • 遵循Vue 3 Composition API规范

提交规范

  • feat: 新功能
  • fix: 修复问题
  • docs: 文档更新
  • style: 代码格式
  • refactor: 代码重构

测试

测试类型

  • 单元测试: 组件和工具函数测试
  • 集成测试: 页面流程测试
  • 端到端测试: 完整业务流程测试

测试工具

  • Jest: 单元测试框架
  • Vue Test Utils: Vue组件测试
  • Cypress: 端到端测试

部署

构建配置

  • 开发环境: 开启调试模式
  • 测试环境: 启用测试API
  • 生产环境: 代码压缩优化

发布流程

  1. 代码审查
  2. 自动化测试
  3. 构建打包
  4. 小程序上传
  5. 版本发布

性能优化

优化策略

  • 代码分割和懒加载
  • 图片压缩和懒加载
  • 接口数据缓存
  • 静态资源CDN

监控指标

  • 页面加载时间
  • 接口响应时间
  • 内存使用情况
  • 用户操作流畅度

常见问题

Q: 如何添加新的小程序？

A: 复制现有小程序目录，修改manifest.json和pages.json配置，更新AppID。

Q: 如何共享组件？

A: 将组件放在common/components目录下，在需要的页面中引入使用。

Q: 如何处理跨小程序数据共享？

A: 使用uni.setStorageSync和uni.getStorageSync进行本地存储，或通过后端API同步数据。

联系方式

更新日志

v1.0.0 (2025-09-21)

  • 完成5个小程序的基础架构
  • 实现共享组件库
  • 完成状态管理和API接口
  • 完成核心业务页面开发

最后更新: 2025-09-21
版本: v1.0.0