UniApp（小程序 / H5/App） ≠ 直接连接物联网设备 / MQTT

UniApp ↔ SpringBoot 业务后端 ↔ OneNET 物联网中台 ↔ NB-IoT / 雷达硬件

鉴权、设备协议、消息转发全部放在后端，前端只做业务展示与指令下发，杜绝密钥暴露、安全漏洞。

一、整体开发架构分层

1. 感知层：毫米波雷达、NB-SOS、智能床垫（设备上报数据至 OneNET）
2. 物联中台：中国移动 OneNET，接收设备 MQTT 消息，北向 API 对外开放
3. 业务服务层：自研 SpringBoot
   • 调用 OneNET 北向 API 拉取设备状态
   • WebSocket 长连接向前端推送实时告警
   • 业务逻辑：长者档案、工单、权限、告警分级
4. 前端层：UniApp（家属小程序、护理员小程序、管理 H5）
   • HTTP：查询档案、历史曲线、工单操作
   • WebSocket：接收实时告警事件

二、环境准备

1. 开发工具

IDE：HBuilderX（官方）

新项目选择：Vue3 + Vite（放弃 Vue2，停止维护）

2. 技术组件选型（物联网项目标准组合）

• UI 库：uView UI 3.x（Vue3）
• 状态管理：Pinia
• 图表：uCharts（时序曲线、统计报表，适配小程序）
• 网络：uni.request 封装 Http；uni.connectSocket 实现 WebSocket

3. 项目目录规范

plaintext

src
├── api            // 所有后端接口封装（设备、告警、工单、老人档案）
├── components     // 通用组件：设备状态卡片、告警弹窗、曲线图
├── pages
│   ├── family     // 家属端页面
│   ├── worker     // 护理员/网格员页面
├── static         // 图片图标
├── store          // Pinia token、用户权限
├── utils
│   ├── request.js     // Http请求封装
│   ├── websocket.js   // 实时告警长连接
│   ├── common.js      // 时间格式化、状态转换
├── App.vue
├── pages.json     // 路由、导航栏

三、四大核心模块开发步骤

模块 1：Http 请求封装（查询静态数据、历史数据、提交表单）

utils/request.js

js

运行

const baseUrl = "https://你的后端域名/api";
export default function request(options) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl + options.url,
			method: options.method || "GET",
			data: options.data || {},
			header: {
				Authorization: uni.getStorageSync("token") || "",
			},
			success: (res) => {
				const data = res.data;
				if (data.code === 200) {
					resolve(data);
				} else if (data.code === 401) {
					uni.reLaunch({ url: "/pages/login/login" });
				} else {
					uni.showToast({ title: data.msg, icon: "none" });
					reject(data);
				}
			},
			fail: () => {
				uni.showToast({ title: "网络连接失败", icon: "none" });
				reject();
			},
		});
	});
}

api/device.js 接口示例

js

运行

import request from "@/utils/request";
// 获取绑定的设备列表
export function getDeviceList() {
	return request({ url: "/device/list" });
}
// 获取历史活动曲线数据
export function getDeviceData(deviceId, startTime, endTime) {
	return request({
		url: "/device/data",
		method: "GET",
		data: { deviceId, startTime, endTime },
	});
}

模块 2：WebSocket 实时消息（物联网核心：接收告警、设备上下线通知）

作用：后端 SpringBoot 收到 OneNET 推送的跌倒 / SOS 告警，通过 WebSocket 实时推送到 UniApp 前端。

utils/websocket.js

js

运行

let socketTask = null;
let reconnectTimer = null;
const WS_URL = "wss://你的后端域名/ws/alert";

// 初始化连接
export function initWs(token) {
	closeWs();
	socketTask = uni.connectSocket({
		url: `${WS_URL}?token=${token}`,
	});
	// 连接成功
	socketTask.onOpen(() => {
		clearInterval(reconnectTimer);
		console.log("WebSocket 告警通道已建立");
	});
	// 接收后端推送消息
	socketTask.onMessage((res) => {
		const msg = JSON.parse(res.data);
		// 紧急告警
		if (msg.type === "ALERT") {
			uni.vibrateLong(); // 手机震动提醒
			uni.showModal({
				title: "紧急告警",
				content: msg.content,
			});
		}
	});
	// 连接关闭，自动重连
	socketTask.onClose(() => {
		reconnectTimer = setInterval(() => {
			initWs(uni.getStorageSync("token"));
		}, 3000);
	});
}

// 关闭连接
export function closeWs() {
	if (socketTask) socketTask.close();
	clearInterval(reconnectTimer);
}

使用时机：用户登录成功后调用 initWs(token)；退出登录调用closeWs()

模块 3：时序图表展示（老人活动、呼吸数据曲线 uCharts）

物联网项目高频场景：展示雷达采集的连续活动数据

1. 安装 uCharts；
2. 页面初始化请求后端聚合后的历史数据；

⚠️重要：前端禁止拉取秒级原始海量传感数据！后端按小时 / 日聚合，减少流量、避免页面卡顿。

模块 4：扫码绑定设备（NB 雷达、SOS 按钮绑定老人）

js

运行

uni.scanCode({
	success: async (res) => {
		const sn = res.result;
		// 将SN传给后端完成绑定，所有校验逻辑在后端执行
		const result = await request({
			url: "/device/bind",
			method: "POST",
			data: { sn, elderId },
		});
	},
});

四、关键配置（微信小程序重点）

1. 域名白名单【上线必备】 小程序后台 - 开发管理 - 开发设置：

• request 合法域名：后端 https 域名
• socket 合法域名：后端 wss 域名 开发阶段：HBuilderX 模拟器可勾选「不校验域名」

2. 离线告警方案 WebSocket 仅处理APP / 小程序在线场景； 用户退出小程序依靠后端调用微信订阅消息 / 服务通知推送告警。

五、绝对禁止的错误方案（大量物联网开发者踩坑）

❌错误方式：UniApp 前端直接 MQTT 连接 OneNET

1. 小程序代码可以被逆向抓取，产品密钥、设备密钥泄露；
2. 微信小程序 WebSocket 数量限制，大批量设备场景连接不稳定；
3. 无法实现统一权限控制（家属只能看自家老人）。

✅标准方案

所有 MQTT 通信仅存在于 SpringBoot <-> OneNET；前端永远不直连物联平台。

六、开发阶段完整实施流程

阶段 1：后端先行（优先完成）

1. SpringBoot 对接 OneNET 北向 API，实现设备拉取、指令下发；
2. 开发 WebSocket 告警推送服务；
3. 定义全套接口文档（设备、告警、工单、长者档案）

阶段 2：UniApp 基础脚手架搭建

1. 创建 Vue3 项目，引入 uView、Pinia、uCharts；
2. 封装 request、websocket 基础工具；
3. 完成登录、权限拦截

阶段 3：业务页面开发

1. 护理员端：工单列表、告警处置、巡访打卡
2. 家属端：老人状态、历史曲线、告警消息

阶段 4：联调测试

1. 使用真实硬件产生数据，测试告警实时推送；
2. 测试断网、重连、离线通知场景；

阶段 5：打包发布

• 微信小程序：直接上传代码
• 需要 APP：HBuilder 云端打包安卓 /iOS

七、智慧养老项目专属优化建议

1. UI 设计：加大按钮字号，适配中老年家属操作习惯；
2. 告警分级展示：一级紧急告警（跌倒 / SOS）置顶；
3. 流量优化：历史曲线做分页、数据后端聚合；
4. 权限隔离：家属只能查看绑定的老人，权限全部由后端控制，前端仅做展示。

八、拓展可选功能

1. uni.uploadFile：工单现场拍照上传；
2. 消息本地缓存：未读告警持久化；
3. 条件编译：一套代码区分【家属端】和【护理员端】，分别打包两个小程序。