组件	技术选型
开发框架	UniApp
UI 框架	uView 2.0
状态管理	Vuex
图表	uChart 2.0（canvas2d 模式）
实时通信	MQTT over WebSocket / WXS
开发工具	HBuilderX 3.3+

MQTT 连接协议

移动端使用 WebSocket 方式连接 MQTT Broker。

协议	端口	适用场景
ws	8083	H5 / Android / iOS（未加密）
wss	8084	H5 / Android / iOS（加密）
wxs	8084	微信小程序专用

快速开始

环境准备

安装 HBuilderX 3.3 以上版本
安装 Node.js 并执行 npm install 安装依赖
部署并启动 FastBee 后端服务

配置服务器地址

编辑 env.config.js，配置后端 API 地址和 MQTT 服务器地址。

// 开发环境
const devBaseUrl = 'http://localhost:8080'
// MQTT WebSocket 地址
const devMqttUrl = 'ws://服务器IP:8083/mqtt'

// 生产环境
const prodBaseUrl = 'https://your-domain.com'
const prodMqttUrl = 'wss://your-domain.com:8084/mqtt'

运行到微信小程序

HBuilderX 中选择 运行 → 运行到小程序模拟器 → 微信开发者工具
在微信开发者工具中预览和调试
配网功能需要在真机上测试

运行到 H5

HBuilderX 中选择 运行 → 运行到浏览器
浏览器中访问即可

打包为 App

HBuilderX 中选择 发行 → 原生 App-Wap2App
分别打包 Android APK 和 iOS 安装包
Android/iOS 视频监控需使用 Wap2App 方式打包

项目结构

├─ apis/              接口管理（模块化）
├─ common/            公共工具、过滤器、MQTT 工具
├─ components/        组件库（easycom 自动引入）
├─ locale/            国际化语言文件
├─ pages/             主包页面（首页、趋势、个人中心）
├─ pagesA/            分包 A
├─ pagesB/            分包 B
├─ pages_player/      播放器页面
├─ store/             Vuex 状态管理
├─ uni_modules/       插件（含 uView UI）
├─ env.config.js      服务器地址配置
├─ manifest.json      各平台配置信息
└─ pages.json         页面路由配置

注意事项

微信小程序配网需要在 manifest.json 中启用位置接口权限，且必须真机调试
微信小程序视频功能需向微信官方申请类目权限
生产环境建议使用 wss 加密连接
多端适配时注意网络协议差异（WS/WSS/WXS）