手把手教你用ThinkPHP6和Uniapp从零搭建一个物业设备巡检小程序（附完整源码）

从零构建物业设备巡检系统ThinkPHP6与Uniapp全栈实战指南物业设备巡检是保障设施安全运行的关键环节传统纸质记录方式效率低下且难以追溯。本教程将带您从零开始基于ThinkPHP6后端框架与Uniapp跨端方案构建一个功能完整的移动巡检系统。系统支持微信小程序部署包含巡检点管理、电子围栏校验、工单流转等核心功能模块特别适合中小型物业公司低成本实现数字化管理转型。1. 开发环境与项目初始化在开始编码前需要搭建完整的本地开发环境。后端采用PHPStudy集成环境前端使用HBuilderX作为IDE两者配合可实现高效的全栈开发流程。1.1 后端环境配置首先安装PHPStudy 8.1版本该版本默认包含PHP 7.4运行环境MySQL 5.7数据库Apache/Nginx服务器Composer依赖管理工具安装完成后通过命令行创建ThinkPHP6项目composer create-project topthink/think tp6-inspection cd tp6-inspection php think run关键配置文件说明.env数据库连接配置config/app.php应用基础设置config/database.php数据库详细参数提示开发阶段建议开启APP_DEBUG模式便于问题排查1.2 前端环境准备Uniapp项目创建步骤打开HBuilderX选择新建项目选择uni-app模板设置项目名称为inspection-app勾选微信小程序编译目标安装必要插件uView UI组件库uni-request网络请求库dayjs日期处理库项目目录结构说明├── pages # 页面文件 ├── static # 静态资源 ├── components # 自定义组件 ├── store # 状态管理 └── api # 接口封装2. 后端API设计与实现2.1 数据库建模根据物业巡检业务需求设计主要数据表结构表名字段示例说明inspection_pointid,name,location,geofence_radius巡检点基础信息inspection_itemid,point_id,name,check_type检查项配置inspection_routeid,name,point_ids巡检路线定义inspection_taskid,route_id,assignee,status巡检任务实例work_orderid,task_id,creator,handler工单管理表使用ThinkPHP迁移工具创建数据表// 生成巡检点迁移文件 php think make:migration CreateInspectionPointTable // 迁移文件内容示例 public function up() { Schema::create(inspection_point, function (Blueprint $table) { $table-id(); $table-string(name, 100); $table-point(location); // 空间数据类型存储坐标 $table-decimal(geofence_radius, 5, 2); $table-timestamps(); }); }2.2 核心API开发采用RESTful风格设计接口主要端点包括POST /api/login员工工号登录GET /api/points获取巡检点列表POST /api/tasks创建巡检任务PUT /api/tasks/:id更新任务状态GET /api/work-orders工单查询接口示例路由配置route/app.phpRoute::group(api, function(){ Route::post(login, Auth/login); Route::resource(points, InspectionPoint); })-middleware([AuthCheck]);控制器方法实现示例public function createTask(Request $request) { $data $request-only([route_id, assignee_id]); $validator Validate::rule([ route_id|路线 require|number, assignee_id|负责人 require|number ]); if (!$validator-check($data)) { return json([code 400, msg $validator-getError()]); } try { $task InspectionTask::create($data); return json([code 200, data $task]); } catch (\Exception $e) { return json([code 500, msg 任务创建失败]); } }3. 前端功能模块开发3.1 登录与权限控制实现员工工号登录流程创建登录页面pages/login/index.vue封装API请求方法api/auth.js配置Vuex状态管理store/modules/user.js关键代码示例// 登录逻辑 async handleLogin() { if (!this.form.empNo || !this.password) { return uni.showToast({ title: 请输入工号和密码, icon: none }); } try { const res await loginApi(this.form); this.$store.commit(user/SET_TOKEN, res.token); uni.reLaunch({ url: /pages/task/index }); } catch (e) { uni.showToast({ title: e.message, icon: none }); } }3.2 巡检任务模块任务列表页面核心功能点分页加载任务数据按状态筛选待执行/进行中/已完成下拉刷新与上拉加载更多电子围栏校验实现// utils/geolocation.js export function checkInGeofence(current, target, radius) { const distance getDistance(current.lat, current.lng, target.lat, target.lng); return distance radius; } // 实际调用 watchEffect(() { if (currentPosition.value currentPoint.value) { const inRange checkInGeofence( currentPosition.value, currentPoint.value.location, currentPoint.value.geofence_radius ); isInGeofence.value inRange; } });3.3 工单管理组件工单创建表单关键字段问题类型下拉选择紧急程度单选按钮问题描述多行文本现场照片多图上传使用uView组件实现表单u-form :modelform :rulesrules refformRef u-form-item label问题类型 proptype u-select v-modelform.type :optionstypeOptions / /u-form-item u-form-item label现场照片 u-upload :fileListimages afterReadonUpload / /u-form-item /u-form4. 系统集成与部署4.1 前后端联调配置解决跨域问题后端中间件// app/middleware/Cors.php public function handle($request, \Closure $next) { $response $next($request); $response-header([ Access-Control-Allow-Origin *, Access-Control-Allow-Methods GET,POST,PUT,DELETE, Access-Control-Allow-Headers Content-Type,Authorization ]); return $response; }前端请求封装api/request.jsconst request (options) { return new Promise((resolve, reject) { uni.request({ url: baseURL options.url, method: options.method || GET, data: options.data || {}, header: { Content-Type: application/json, Authorization: store.state.user.token }, success: (res) { if (res.data.code ! 200) { return reject(res.data.msg); } resolve(res.data.data); }, fail: (err) { reject(err.errMsg); } }); }); };4.2 微信小程序发布编译打包步骤在HBuilderX中选择发行-小程序-微信填写AppID需提前注册小程序账号勾选ES6转ES5、压缩代码选项点击发行生成小程序包常见发布问题解决方案包体积过大启用分包加载静态资源走CDN白屏问题检查基础库版本兼容性接口调用失败确认小程序域名白名单配置4.3 性能优化技巧后端缓存策略示例// 使用Redis缓存巡检点数据 public function getPoints() { $cacheKey inspection_points; if (Redis::has($cacheKey)) { return json_decode(Redis::get($cacheKey), true); } $points InspectionPoint::select()-toArray(); Redis::set($cacheKey, json_encode($points), 3600); return $points; }前端图片懒加载实现image v-forimg in imageList :srcimg.thumbnail :data-srcimg.original lazy-load loadonImageLoad /5. 业务扩展与进阶功能5.1 数据统计分析使用ECharts实现巡检数据可视化安装uni-app版本的ECharts组件封装数据统计接口如按完成率、异常类型等设计管理看板页面示例统计SQLSELECT DATE_FORMAT(created_at, %Y-%m-%d) AS date, COUNT(*) AS total, SUM(CASE WHEN status 3 THEN 1 ELSE 0 END) AS completed FROM inspection_task GROUP BY date ORDER BY date DESC LIMIT 7;5.2 消息推送集成微信模板消息配置流程申请消息模板如巡检任务提醒获取formId前端提交表单时收集后端调用微信API发送消息关键发送代码$wechat new WeChatTemplateMessage(); $wechat-send([ touser $openid, template_id TEMPLATE_ID, form_id $formId, data [ keyword1 [value $taskNo], keyword2 [value $deadline] ] ]);5.3 离线操作支持实现离线数据同步方案前端使用localStorage暂存未提交数据监听网络状态变化uni.onNetworkStatusChange网络恢复后自动同步到服务器核心同步逻辑// 检查待同步数据 const pendingData uni.getStorageSync(pendingTasks) || []; if (pendingData.length 0 networkConnected) { pendingData.forEach(async task { try { await syncTaskToServer(task); removeFromPending(task.id); } catch (e) { console.error(同步失败:, e); } }); }