步步安

Yd Wen2026/3/11大约 6 分钟

步步安，步步平安

步步安（SafeStep）

步步安是一款专为独居老人设计的跌倒检测与安全防护移动应用。通过与智能硬件设备配合，实时监测老人活动状态，检测跌倒等异常行为，并及时通知紧急联系人，为独居老人提供全天候的安全守护。

本项目为客户端部分，基于 UniApp 跨平台框架开发，一套代码可同时发布到 Android、iOS 以及微信小程序等多个平台。

仓库地址：
- https://gitee.com/yindong-wen/SafeStep-Client
- https://github.com/Yd-Wen/SafeStep-Client
项目截图：
- 基本功能：注册、登录、密码、查看设备/联系人、查看活动/报警历史
  基本功能
- 核心功能：管理设备/联系人、报警反馈
  核心功能

技术栈

前端客户端

技术	版本	说明
UniApp	3.x	跨平台应用开发框架
Vue.js	3.x	渐进式 JavaScript 框架
SCSS	-	CSS 预处理器
moment-timezone	^0.5.46	日期时间处理库

后端服务

技术	说明
Spring Boot	Java 企业级应用框架
MySQL	关系型数据库，存储用户数据、设备信息、活动记录
Redis	缓存数据库，用于会话管理、实时数据处理
WebSocket	实时通信协议，用于设备状态实时推送

开发工具

HBuilderX - UniApp 官方推荐 IDE
Git - 版本控制

功能特性

核心功能

实时活动监测 - 通过 WebSocket 连接，实时查看老人活动状态（正常/风险/跌倒）
跌倒检测报警 - 自动检测跌倒行为，触发报警并记录
设备管理 - 绑定/解绑检测设备，管理设备位置与状态
紧急联系人 - 添加紧急联系人，报警时自动通知
活动历史 - 查看老人活动记录，分析日常行为模式
报警反馈 - 支持漏报反馈，优化检测算法

用户功能

用户注册/登录 - 手机号注册，支持密码找回
个人资料 - 头像上传、昵称修改、个人简介
多设备支持 - 一个账户可绑定多台检测设备
实时切换 - 多设备间快速切换查看

UI 特性

响应式设计 - 适配各种屏幕尺寸
自定义组件 - 统一的组件库（ssc-* 系列）
实时状态展示 - 动态活动状态图标与颜色提示
数据可视化 - 集成图表展示活动统计数据

项目结构

SafeStep-Client/
├── App.vue                      # 应用根组件
├── main.js                      # 应用入口
├── manifest.json                # 应用配置（平台、权限等）
├── pages.json                   # 页面路由、导航栏、TabBar 配置
├── uni.scss                     # 全局 SCSS 变量
├── package.json                 # 依赖配置
│
├── pages/                       # 页面目录
│   ├── launch/                  # 启动页
│   ├── login/                   # 登录页
│   ├── register/                # 注册页
│   ├── pwd-reset/               # 密码重置
│   ├── pwd-update/              # 密码修改
│   ├── home/                    # 首页（监控、统计、快捷入口）
│   ├── status/                  # 状态页（实时监测）
│   ├── user/                    # 用户中心
│   ├── profile/                 # 个人资料
│   ├── list-device/             # 设备列表
│   ├── detail-device/           # 设备详情
│   ├── register-device/         # 添加设备
│   ├── list-contact/            # 联系人列表
│   ├── detail-contact/          # 联系人详情
│   ├── register-contact/        # 添加联系人
│   ├── history-activity/        # 活动历史
│   ├── list-alarm/              # 报警记录
│   ├── detail-alarm/            # 报警详情
│   └── omission-alarm/          # 漏报反馈
│
├── components/                  # 自定义组件（ssc-* 系列）
│   ├── ssc-button-primary/      # 主按钮
│   ├── ssc-button-default/      # 默认按钮
│   ├── ssc-button-warn/         # 警告按钮
│   ├── ssc-title/               # 标题栏
│   ├── ssc-banner/              # 轮播图
│   ├── ssc-profile/             # 用户信息卡片
│   ├── ssc-item-card/           # 通用卡片项
│   ├── ssc-item-device/         # 设备列表项
│   ├── ssc-item-contact/        # 联系人列表项
│   ├── ssc-item-alarm/          # 报警列表项
│   ├── ssc-icon/                # 图标组件
│   └── ssc-logo/                # Logo 组件
│
├── utils/                       # 工具函数
│   ├── httpUtil.js              # HTTP 请求封装
│   ├── timeUtil.js              # 时间日期处理
│   ├── stringUtil.js            # 字符串验证
│   └── imageUtil.js             # 图片处理
│
├── common/                      # 公共样式
│   ├── scss/self.scss           # 自定义 SCSS 变量
│   └── css/self.css             # 全局 CSS
│
├── static/                      # 静态资源
│   └── image/                   # 图片资源
│       ├── app/                 # 应用图标
│       ├── avatar/              # 头像
│       ├── banner/              # 轮播图
│       ├── activity/            # 活动状态图
│       ├── option/              # 操作图标
│       ├── setting/             # 设置图标
│       ├── tabbar/              # TabBar 图标
│       └── alarm/               # 报警相关图标
│
└── uni_modules/                 # UniApp 插件
    ├── uni-icons/               # 图标库
    ├── uni-list/                # 列表组件
    ├── uni-badge/               # 徽章组件
    └── qiun-data-charts/        # 图表组件

快速开始

环境要求

HBuilderX 3.0+
Node.js 14+
后端服务已启动（Spring Boot 项目）

安装运行

克隆项目

git clone https://github.com/Yd-Wen/SafeStep-Client.git
cd SafeStep-Client

安装依赖

npm install

配置后端地址

修改 utils/httpUtil.js 中的 baseUrl：

const baseUrl = "http://localhost:8080"  // 改为你的后端地址

同时修改 pages/status/status.vue 中的 WebSocket 地址：

uni.connectSocket({
    url: 'ws://localhost:8080/wsserver/' + userCode.value
});

HBuilderX 运行

使用 HBuilderX 打开项目
点击菜单栏运行 → 运行到浏览器 或 运行到手机/模拟器
首次运行需要安装插件，按提示操作即可

打包发布

App 打包（Android/iOS）

HBuilderX 中点击发行 → 原生App-云打包
配置应用证书（Android 需要.keystore 文件）
等待云端打包完成，下载安装包

微信小程序

HBuilderX 中点击发行 → 小程序-微信
在微信开发者工具中导入生成的 unpackage/dist/build/mp-weixin
上传代码并提交审核

API 接口

接口规范

基础 URL: http://localhost:8080
认证方式: Header 中携带 token
响应格式: { code: number, msg: string, data: any }
- code: 1 - 成功
- code: 0 - 失败
- code: 900 - 登录过期

主要接口

模块	接口	方法	说明
用户	`/user/login`	POST	用户登录
用户	`/user/detail`	GET	获取用户信息
设备	`/device/find-ava`	GET	获取可用设备列表
设备	`/device/add`	POST	添加设备
设备	`/device/update`	POST	更新设备
设备	`/device/delete`	POST	删除设备
联系人	`/contact/add`	POST	添加联系人
联系人	`/contact/update`	POST	更新联系人
联系人	`/contact/delete`	POST	删除联系人
活动	`/activity/history`	GET	获取活动历史
报警	`/alarm/list`	GET	获取报警列表
报警	`/alarm/feedback`	POST	漏报反馈
文件	`/upload/avatar`	POST	上传头像