保险端微信小程序 - 开发指南
项目概述
这是一个基于 Vue.js 3.x + uni-app 开发的保险服务微信小程序，后端完全动态调用现有的 insurance_backend 接口，实现了用户登录、产品浏览、在线投保、保单管理、理赔申请等核心功能。
技术栈
- 前端框架: Vue.js 3.x (Composition API)
- 小程序框架: uni-app
- 状态管理: Pinia
- UI组件: 自定义组件 + uni-app内置组件
- 网络请求: 基于uni.request()封装
- 后端API: 动态调用 c:\nxxmdata\insurance_backend 的所有接口
环境要求
- Node.js: 严格要求 16.20.2
- npm: >= 8.0.0
- 微信开发者工具: 最新稳定版
快速开始
1. 安装依赖
# 进入项目目录
cd c:\nxxmdata\insurance_mini_program
# 检查Node.js版本（必须是16.20.2）
node -v
# 安装依赖
npm install
2. 启动后端服务
# 启动保险端后端服务
cd c:\nxxmdata\insurance_backend
npm run dev
确保后端服务运行在 http://localhost:3000
3. 配置小程序
- 修改
utils/request.js中的 BASE_URL，确保指向正确的后端地址 - 在微信开发者工具中配置合法域名（开发时可关闭域名校验）
4. 编译运行
# 开发模式编译到微信小程序
npm run dev:mp-weixin
# 或使用
npm run serve
5. 在微信开发者工具中预览
- 打开微信开发者工具
- 导入项目，选择
dist/dev/mp-weixin目录 - 配置AppID（或使用测试号）
- 预览调试
项目结构
insurance_mini_program/
├── components/ # 公共组件
│ ├── ProductCard.vue # 产品卡片组件
│ ├── StatusBadge.vue # 状态标签组件
│ ├── LoadingSpinner.vue # 加载组件
│ └── PolicyCard.vue # 保单卡片组件
├── pages/ # 页面
│ ├── index/ # 首页
│ ├── login/ # 登录页
│ ├── products/ # 产品列表
│ ├── application/ # 投保申请
│ └── my/ # 个人中心
├── store/ # Pinia状态管理
│ ├── index.js # Store入口
│ ├── user.js # 用户状态
│ └── insurance.js # 保险业务状态
├── utils/ # 工具类
│ ├── api.js # API接口封装
│ ├── auth.js # 认证工具
│ ├── request.js # 请求封装
│ └── constants.js # 常量定义
├── static/ # 静态资源
├── App.vue # 应用入口组件
├── main.js # 应用入口文件
├── manifest.json # 应用配置
├── pages.json # 页面配置
├── uni.scss # 全局样式
└── package.json # 项目配置
核心功能模块
1. 用户认证模块
- 微信一键登录: 集成微信小程序授权登录
- 账号密码登录: 支持传统用户名密码登录
- 登录状态管理: 基于Pinia的用户状态管理
- Token管理: JWT token自动管理和刷新
2. 产品浏览模块
- 产品列表: 动态加载保险产品，支持分类筛选
- 产品搜索: 实时搜索，防抖优化
- 产品详情: 展示详细的产品信息和条款
3. 投保申请模块
- 在线申请: 完整的投保表单，支持表单验证
- 实时保费计算: 根据保额动态计算保费
- 材料上传: 支持身份证等材料上传
4. 保单管理模块
- 保单列表: 查看个人所有保单
- 保单详情: 详细的保单信息展示
- 保单状态: 实时同步保单状态
5. 理赔申请模块
- 理赔申请: 在线提交理赔申请
- 材料上传: 支持理赔材料上传
- 进度查询: 实时查看理赔进度
API接口说明
本项目所有API接口都动态调用 c:\nxxmdata\insurance_backend 的接口：
认证接口
POST /api/auth/wx-login- 微信登录（需后端扩展）POST /api/auth/login- 账号密码登录GET /api/auth/profile- 获取用户信息
产品接口
GET /api/insurance-types- 获取产品列表GET /api/insurance-types/:id- 获取产品详情
申请接口
POST /api/insurance/applications- 提交投保申请GET /api/miniprogram/my-applications- 获取我的申请（需后端扩展）
保单接口
GET /api/miniprogram/my-policies- 获取我的保单（需后端扩展）GET /api/policies/:id- 获取保单详情
理赔接口
POST /api/claims- 提交理赔申请GET /api/miniprogram/my-claims- 获取我的理赔（需后端扩展）
后端扩展要求
为了支持小程序的完整功能，需要在 insurance_backend 中扩展以下接口：
- 微信登录接口:
POST /api/auth/wx-login - 小程序专用路由:
GET /api/miniprogram/* - 用户关联: 在相关模型中添加
user_id字段
详细的后端扩展代码已在开发文档中提供。
开发规范
1. 代码规范
- 使用 Vue 3 Composition API
- 组件使用 PascalCase 命名
- 文件使用 kebab-case 命名
- 遵循 ESLint 规则
2. 状态管理
- 使用 Pinia 进行状态管理
- 按业务模块划分 Store
- 异步操作统一在 actions 中处理
3. API调用
- 统一使用封装的 request 方法
- 错误处理统一在请求拦截器中
- 支持请求缓存和防抖
4. 组件开发
- 组件职责单一，高内聚低耦合
- 合理使用 props 和 emit
- 样式使用 scoped，避免污染
调试指南
1. 网络调试
- 在微信开发者工具中查看网络请求
- 检查后端服务是否正常运行
- 确认API接口返回格式正确
2. 状态调试
- 使用 Vue DevTools 调试状态
- 在控制台查看 Pinia store 数据
- 检查本地存储数据
3. 常见问题
- 登录失败: 检查后端微信登录接口是否实现
- API调用失败: 确认后端服务运行状态
- 页面跳转失败: 检查页面路径配置
部署上线
1. 小程序发布
- 执行
npm run build:mp-weixin构建生产版本 - 在微信开发者工具中上传代码
- 在微信公众平台提交审核
- 审核通过后发布上线
2. 后端配置
- 配置生产环境的数据库
- 设置正确的微信小程序配置
- 配置HTTPS域名和SSL证书
注意事项
- 版本兼容: 严格使用 Node.js 16.20.2，避免版本冲突
- 接口调用: 所有数据都从后端动态获取，禁止硬编码
- 错误处理: 完善的错误提示和用户反馈
- 性能优化: 合理使用分页加载和图片懒加载
- 安全考虑: 敏感信息加密传输，Token安全管理
技术支持
如有问题，请参考：