基于MQTT通讯UNIapp程序解析JSON数据

1、解析函数无法解析{"ligh":0010}不规范的JSON数

//解析函数无法解析{"ligh":0010}不规范的JSON数据

if (e.method === 'receive') {//e 是 MQTT 事件对象,e.method 表示事件类型。当接收到 MQTT 消息时,method 的值是 'receive'

try {//try 语句开始一个错误处理块。如果块内的代码出现错误,会跳转到 catch 块,防止程序崩溃。

const data = typeof e.data === 'string'//检查 e.data 的数据类型是否是字符串,

? JSON.parse(e.data)//是字符串,使用 JSON.parse() 将其解析为 JavaScript 对象

: e.data//如果不是字符串(可能已经是对象),直接使用原值

if (data.ligh !== undefined) this.ligh = Number(data.ligh)//符串 "0010" → 数字 10(自动去掉前导0)

if (data.mode !== undefined) this.mode = Number(data.mode)

} catch (err) {//如果 try 块中的代码出现错误(比如 JSON 格式错误),会跳转到这里

console.error('JSON 解析失败', err)

}

}

2、修改:这个方案能稳定处理 {"ligh":0010} 这种格式,并且有很好的兼容性

if (e.method === 'receive') {

console.log('收到数据:', e.data)

// 将数据转为字符串处理

const rawData = String(e.data)

// 专用解析函数

const parseHardwareFormat = (str) => {

const result = {}

// 匹配 ligh:0010 或 "ligh":0010

const lighMatch = str.match(/ligh["]?\s*[:=]\s*0*(\d+)/i)// (只支持整数)

if (lighMatch) {

result.ligh = parseInt(lighMatch[1], 10)

}

// 匹配 mode:1 或 "mode":1

const modeMatch = str.match(/mode["]?\s*[:=]\s*0*(\d)/i)// (只支持整数)

if (modeMatch) {

result.mode = parseInt(modeMatch[1], 10)

}

return result

}

// 解析数据

const data = parseHardwareFormat(rawData)

console.log('解析结果:', data)

// 更新到组件

if (data.ligh !== undefined) this.ligh = data.ligh

if (data.mode !== undefined) this.mode = data.mode

}

程序解析:

const lighMatch = str.match(/ligh["]?\s*[:=]\s*0*(\d+)/i)解释下

1. //i

  • /:正则表达式的开始和结束分隔符

  • /i:忽略大小写标志,ligh 可以匹配 lighLIGHLigh

2. ligh

  • 匹配字面字符串 "ligh"

  • 因为 /i 标志,也匹配 LIGHLigh

3. ["]?

  • ["]:匹配一个双引号字符 "

  • ?:表示前面的字符可选(0次或1次)

  • 作用:匹配可能有引号也可能没有的情况

  • 示例:

    • "ligh" ✓(有引号)

    • ligh ✓(没有引号)

4. \s*

  • \s:匹配任意空白字符(空格、制表符、换行等)

  • *:表示前面的字符出现0次或多次

  • 作用:匹配键值对之间的空白

  • 示例:

    • ligh:0010 ✓(没有空格)

    • ligh :0010 ✓(有空格)

    • ligh :0010 ✓(多个空格)

5. [:=]

  • [:=]:字符集合,匹配 :=

  • 作用:匹配分隔符

  • 示例:

    • ligh:0010 ✓(使用冒号)

    • ligh=0010 ✓(使用等号)

6. \s*

  • 再次匹配可能的空白字符

  • 示例:

    • ligh: 0010 ✓(分隔符后有空格)

    • ligh:0010 ✓(没有空格)

7. 0*

  • 0:匹配数字0

  • *:0次或多次

  • 作用:匹配前导零

  • 示例:

    • 0010 → 匹配 00

    • 10 → 匹配空(没有前导0)

    • 0 → 匹配 0

8. (\d+)

  • \d:匹配数字(0-9)

  • +:1次或多次

  • ():捕获分组,提取匹配的内容

  • 作用:捕获实际的数值部分(去掉前导0后的数字)

  • 示例:

    • 0010 → 捕获 10

    • 4100 → 捕获 4100

    • 0 → 捕获 0

测试结果:

复制代码
"{"ligh":0010}" → 匹配组: "10" → 数值: 10
"{ligh:0020}" → 匹配组: "20" → 数值: 20
""ligh":0030" → 匹配组: "30" → 数值: 30
"ligh=0040" → 匹配组: "40" → 数值: 40
"ligh : 0050" → 匹配组: "50" → 数值: 50
"LIGH:0060" → 匹配组: "60" → 数值: 60
""LIGH" = 0070" → 匹配组: "70" → 数值: 70
"ligh:0" → 匹配组: "0" → 数值: 0
"ligh:100" → 匹配组: "100" → 数值: 100

3、如果要增加解析{"ligh":0.12}在这种浮点数呢

//支持不规则JSON整数与浮点数

if (e.method === 'receive') {

console.log('收到数据:', e.data)

// 将数据转为字符串处理

const rawData = String(e.data)

// 专用解析函数

const parseHardwareFormat = (str) => {

const result = {}

// 匹配 ligh:0010 或 "ligh":00.10

const lighMatch = str.match(/ligh["]?\s*[:=]\s*(\d*\.?\d+)/i)// (支持整数和小数)

if (lighMatch) {

// 使用 parseFloat 自动处理整数和小数

this.ligh = parseFloat(lighMatch[1])

console.log('光照值:', this.ligh)

}

// 匹配 mode:1 或 "mode":1

// mode 通常用整数

const modeMatch = rawData.match(/mode["]?\s*[:=]\s*(\d+)/i)

if (modeMatch) {

this.mode = parseInt(modeMatch[1], 10)

}

return result

}

// 解析数据

const data = parseHardwareFormat(rawData)

console.log('解析结果:', data)

// 更新到组件

if (data.ligh !== undefined) this.ligh = data.ligh

if (data.mode !== undefined) this.mode = data.mode

}

相关推荐
weixin_436525072 小时前
若依多租户版: 页面新增菜单, 执行菜单SQL
前端·数据库·sql
FITA阿泽要努力2 小时前
Agent Engineer-Day 1 初始智能体与大语言模型基础
java·前端·javascript
霸王蟹2 小时前
Uni-app 跨端开发框架Unibest快速体验
前端·笔记·微信·uni-app·unibest
zihan03212 小时前
element-plus, el-table 表头按照指定字段升降序的功能实现
前端·vue.js·状态模式
三翼鸟数字化技术团队2 小时前
watchEffect的两种错误用法
前端·javascript·vue.js
局外人LZ2 小时前
Decimal.js 完全指南:解决前端数值精度痛点的核心方案
开发语言·前端·javascript
郑州光合科技余经理3 小时前
同城配送调度系统实战:JAVA微服务
java·开发语言·前端·后端·微服务·中间件·php
一只小bit3 小时前
Qt 绘图核心教程:从基础绘制到图像操作全解析
前端·c++·qt·gui
乾元3 小时前
绕过艺术:使用 GANs 对抗 Web 防火墙(WAF)
前端·网络·人工智能·深度学习·安全·架构