原始记录：

2025-11-01：

【修复】 针对需要退出页面重进，配置项才生效的问题，进行了修复。具体方法为：在mqttConnect函数体内，每次调用都重新从缓存中读取最新值，弃用原本的updateDeviceInfo逻辑，将其改为仅控制popup弹出层。
【修改】 修改了配置项的数据结构，将一维数组改为对象，方便mqttConnect函数的引用。
【修复】 通过在逻辑中增加返回值，并将其中的异步读缓存改为同步。在判断deviceInfo为空对象之后，可以返回true，阻止mqttConnect函数执行。有效避免需要将对象赋值为null的问题，同时解决了为空数组时仍然可以连接MQTT服务器的BUG。

值得注意的是，wx.getStorage是异步的，会导致直接得到错误的返回值初始值。所以此时应该是同步的。

下面指出一种判断对象为空的办法：
1
isEmpty = Object.values(data).some(item => !item || !item.trim());
当数组为空字符串，空格，0，null，undefined时，都会返回true。

原理为：通过Object.values()将所有属性值提出，拼成数组。然后用some进行判断，当得到第一个符合条件（元素为空，或者去除空格后元素为空）的值，就会返回对它取反的值，也就是true。

2025-11-02：

【更新】 通过学习mqtt.min.js的用法，通过调用mqttClient.on('error', (error) => { }，实现了对连接失败状态的反馈。
【更新】 进行了部分函数、常量、配置项的模块化，将代码从660行缩减到440行。
【更新】 在setDeviceState函数内集成了对按钮外显文本的更新。当设备连接成功状态更新时，自动将按钮文本替换为‘断开’。但断开连接功能还未实装。

为什么在这个函数内更新，而不是在mqttConnect呢？因为MQTT连接是通过异步回调实现的，会先一步return错误的值而不是根据“是否连接上”这一结果进行返回。
【更新】 在所有WXML引用的for循环中加入了wx:key。用以提高性能。
【更新】 重写了deviceInfo的数据结构，并将WXML中的设备状态/增氧设备状态指示卡片改为循环结构，缩短代码长度。

2025-11-03：

今天因为下午有课，故更新内容较少。

【更新】 新增了断开连接功能。当连接成功后再按下按钮，可以结束连接并回到’未连接‘状态。
【BUG】 在退出连接时，可以触发对应的函数，但无法通过.end()方法退出连接。也无法监听到断开连接的状态。

2025-11-04：

下午焊完板子，尝试了很多办法，包括更mqtt.min.js为mqtt.js；从3.0.0到4.2.0，更换能支持的版本；尝试监听end,close,offline事件；尝试在执行后手动关闭socket连接，均无效。此外，在bing上并没有查到很多类似的案例，唯一有相似情况且有回复的如下：uni-app mqtt.js在H5可以正常，但是在APP和微信小程序调用end关闭mqtt不正常

晚上将继续根据上面的论坛内容尝试修复。

2025-11-05：

【更新】 小程序新增了用于发送on和off命令的函数，在消息监听方法中，加入了对启用成功与否所返回标志位的读取和判断，同时在按钮处理函数中，加入了超时判断。实现了用户未连接设备/连接设备但设备编号错误等情况的灵活反馈。
【更新】 修改了ESP8266的部分代码。在串口部分，新增了对FLAG_FRAME标志位帧的读取，当2560执行成功后会向8266发送指令，8266根据指令判断向云平台推送的消息并发出onSuccess或者offSuccess的消息。小程序根据收到的消息，判断是否启动成功/关闭成功，否则进入超时状态。
【更新】 修改了2560的部分代码，使其在执行开关指令之后能够发送标志位给8266。

2025-11-06：

【更新】 将原来的mqttConnect函数模块化，进一步缩短主代码长度。

在使封装过程中，出现了由于MQTT连接为异步过程，返回对象为undefined的情况。对此，学习了Promise的用法。

简单概括为，先return new Promise((resolve, reject) => {}，new一个Promise容器，在结果处resolve()或者reject()

然后，主函数里，在需要等待的函数那里，先用async声明此函数返回Promise容器，在声明的函数用await修饰，再利用JS的异常捕获机制try/catch接收reject。
【BUG】 值得注意的是，MQTT连接并未在退出页面后关闭，这个问题需要解决。

2025-11-07：

【更新】 优化了部分元素的样式，增大了按钮的字体。
【更新】 将原本模拟数据接收的定时触发的代码封装为pushCurrentData函数，通过回调的办法，在client收到传感器数据时自动调用，并传入收到的data，实现数据和图表实时更新。至此，基本完成了小程序端的所有功能。
【BUG】 尚未解决MQTT连接在退出页面后无法关闭，仍然接收来自云平台的数据的问题。

2025-11-08：

针对增氧启动功能进行了测试，小程序端表现良好。接下来仅需要针对单片机代码做出修改。

【更新】 通过hover-class，给index页面的微应用增加了点击态。采取的办法如下

.tool-card-pressed {
  transform: scale(0.97); /* 控制变换 */
  opacity: 0.8; /* 控制透明度 */
}

【更新】 烧录了2560的代码，并无明显异常，能够实现预期的功能。
【更新】 删除了8266回调函数中用于测试的代码，即收到on/off，延时3秒自动发送onSuccess/offSuccess。改为由2560串口向8266发送0x0A/0x0B指令码，然后根据收到的指令码发送。
【修改】 小程序启用设备超时由5秒改为8秒。
【更新】 在小程序引入了marked.min.js组件，使项目介绍页面可以渲染markdown文本。
【更新】 在mqttHelper.js里加入了end方法。虽然无法彻底断开连接，触发end或者off回调，但可以终止消息的接收。
【更新】 在微信开发者平台完善了小程序信息，并上线了体验版，添加了几个体验用户。

2025-11-09：

【更新】 完成了项目介绍和使用指南的文字部分。并上传至体验版。
购买了electro-dragon.site域名3年。并通过七牛云初步了解了图床和域名的使用，成功配置了HTTP协议下的图床，并成功访问。只是微信不支持HTTP协议，后续可能无法通过这个访问。另外，小程序访问HTTPS或许还需要额外的配置。

2025-11-10：

进行了paypal卡号绑定，学会了cloudflare的用法，成功将阿里云的域名代理至cloudflare，并使用PicList成功上传图片到对应的bucket，更新为https协议，成功在微信小程序中引用这些图片，将代码包缩小到1026kb。

2025-11-11：

在cloudflare上新建了一个桶，用来存储博客网站素材。重新启动博客网站建站计划。经过微信小程序的捶打，对CSS的理解更加深入，配置一些样式也更加轻松。
学习了ID选择器的用法，配合类选择器可以达到不错的效果。

2025-11-12：

想明白了小程序状态切换的BUG的产生原因。

现象：在链接设备成功之后，尝试启用增氧设备。启用成功后，快速点击“关闭”按钮，如果顺利关闭，且上述过程在8秒内完成，就会又进入错误的“链接失败”状态。

原因：在处理按钮按下的函数内，写了一个setTimeOut函数，预想的功能是，在一定时间后根据是否返回链接成功的状态，判断是否将状态切换为“连接失败”。但是如果用户操作较快，在连接后又按了关闭按钮，就会导致这个函数执行时，错误地读取状态，认为在8秒内没有启动设备。

解法：将定时器赋给一个变量，在启动设备成功时清除定时器。
【修复】 修复了启动设备成功后点击关闭设备，会出现“启用失败”这一错误状态的问题。
进一步修改了一些博客页面的样式，初步了解了hexo框架下的博客页面创建流程，补全了tags、categories等页面

2025-11-13：

今天下午上完课，回宿舍充电，然后理发去了。
晚上得知项目创新点修改，思考了一下可能的实现方案。
尝试修改加载动画，引入gif图片。但还没搞清楚pug和styl代码要如何修改。

2025-11-14：

发现其实styl和css是类似的。尝试修改了一些样式。
成功引入了gif图片，更换了默认的加载样式。但对于文字有显示的bug，总会在加载结束之后才缓慢消失。
【BUG】 当同时引入加载样式和pace之后，会出现加载样式丢失的问题。
尝试引入自定义图片作为进度条，但是似乎并没有什么效果，可能是哪里出问题了。

2025-11-15：

下载pace,js，将pace.pug引用的CDN替换，并找到核心部分（控制百分比修改的样式）源代码。替换为如下语句：
1
transform = "inset(0 " + (100 - this.progress) + "% 0 0)";
因为不需要 transform，注释掉下面语句：
1
2
3
4
5
_ref2 = ['webkitTransform', 'msTransform', 'transform'];
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
key = _ref2[_j];
el.children[0].style[key] = transform;
}
实现了遮罩加载的效果。

但由于这效果是异步的，所以没法和页面加载的 show 效果一同离场。

2025-11-16：

下午写了一部分信号与系统的作业。
晚上在研究butterfly的preloader。找到了配置进场动画时长和关键帧的代码。但是总是设计不出想要的样式。重新设计了背景图，但不太好看。

2025-11-17：

完成微信小程序代码的拆分，并研究了git，然后成功将代码push到GitHub repository上。并在GPT的帮助下学了一些表达，写了一份全英文的README.md。
对于preloader页面设计有了一点新想法。为了避免图片拉伸的问题。背景依旧用纯色的，然后把刻晴立绘固定在某个位置，就可以了。

2025-11-18：

继续优化了一下README.md。新增了一个仓库用来放profile。在编写profile的时候学会了使用shields.io。
预习了一下传感器原理部分。但是没有重点还是难以下手。
遇到了 cloudflare 崩溃的罕见情况。

2025-11-19：

终于把样式改到了我比较理想的情况。回顾一下，具体操作如下：

换掉原来的pace.js CDN 源，改为本地引入。在pace.js内，修改下面部分代码

// 将body替换为.image-container，以使注入的pace元素收到.image-container控制，能随着图片够同时淡出
target: 'body',
    elements: {
        checkInterval: 100,
        selectors: ['body']
    },

1
2

//意图实现遮罩加载进度条，故将原来的transform值替换为下面的内容，删掉transform相关的循环，由下面语句直接赋值
transform = "inset(0 " + (100 - this.progress) + "% 0 0)";

抄了一种网上的pace样式，并做出一点修改，调整相关的距离。例如删掉了下面的代码，以取消加载完成动画：
1
2
3
4
5
.pace.pace-inactive {
opacity: 0;
transition: .5s;
bottom: 35vh;
}
照着fullpage-loading，抄了一版image-loading，修改了元素结构如下，并把原来.loading-bg的50%宽度改为100，运动方向改为向下。
1
2
3
4
#image-loading-box
.loading-bg
.image-container
img.load-image(src=url_for(loadimage) alt='')
在function.styl里修改对应动画样式，包含入场动画持续时间、关键帧、卡片出现动画样式等。整体上让动画更慢，同时契合preloader-bg的移动。
在注入的css内，修改了preloader-bg的颜色。

2025-11-20：

花费一番努力，把blog的仓库代理到cloudflare了。其实操作很简单，凭借直觉就可以完成。

cloudflare的代理还可以实现自动拉取仓库的更新，然后再转发，这非常好。

还解决了使用GitHub Pages在国内无法裸连的问题。
上传了一些图片和字体到R2存储桶，解决了存在本地加载较慢的问题。
添加了友链页面的配置文件
【问题】 目前不推荐手机使用，因为加载页面是给PC设计的，之后可能需要针对手机做一些适配。

2025-11-21：

今天做了信号与系统实验，我们小组是最快做完的
对手机/窄屏移动设备进行了适配。在宽度小于1000px时，将不显示刻晴图片，只显示pace加载动画。
【问题】 加载字体时，由于使用的域名是blog.material，这与博客网站域名冲突，触发了CORS。所以还需要进一步的适配。

2025-11-22：

针对移动端进一步适配了preloader效果：当页面宽度小于1000px和700px，分别对应缩小pace大小，然后取消刻晴立绘显示。

通过在cloudflare配置CORS、用pip install fonttools brotli引入fonttools库，然后用pyftsubset实现子集化，把字体文件从3M压缩到650kb。

下面是使用的代码：

1
2

pyftsubset {字体路径} --text-file={精简字符集路径} --output-file={输出文件路径} --flavor={转换后的格式}
# 输出文件路径应当精确到要输出的文件名，例如 D:\pycharm\font-manage\target\gi-font.woff2

整理了一些微信小程序的踩坑记录，发布了第一篇文章，旨在介绍一些用得上的JS技巧。

2025-11-23：

优化了不同宽度的屏幕下标题的适配情况。设置了更多的挡位。分别是700px以内，700px-1000px的范围。以及其他。
因为中文问号在字库内缺失，所以无法显示，现在已经修复了这个问题，在字库内添加中文问号，重新制作subset。
制作了网站的favicon，并完成了配置。
增加了一句subtitle，配置了打字效果。
花了很多时间在CSS微调、字体压缩、加载动画（Pace.js + 刻晴立绘）上。虽然这体现了匠心，但在商业或大型工程中，这可能被视为“优先级管理不当”。未来需要学会权衡ROI（投入产出比），有时候“能用”也是一种智慧。

2025-11-24：

复习好无聊哦。可不复习也不行，但是复习了也不一定争得过他们呢。
让GPT和DeepSeek帮忙润色了一下我的About文档。
发现字库缺失中文字“嗯”，明天修复。
更新了文章“好吃的JS技巧”。

2025-11-25：

传感器考完了。。。冒出了1个很明显的错误，我居然记错线性度的定义了，居然以为是越靠近1越好。就导致填空题错了。
还有好多事。。。
新增了一篇关于微信小程序开发的博文，写了一点内容。
重新做了字体子集，上传到R2。
正在考虑小程序上线的事情，但是还没有分包，包体有点大，超出限制。正在尝试重新整理项目结构。

2025-11-26：

【更新】 完成了小程序分包，缩小主包体积，通过了代码检查对主包的要求。
【更新】 对小程序的README文档进行了更新，加入了Features部分对使用R2服务的描述。
字库缺失“渲染”的“渲”，已添加。
完成了小程序备案的申请。

2025-11-27：

小程序备案被驳回了，由于身份证不清晰和小程序名称与商标冲突。
做出了对应的修改，并重新上传。
尝试用nano banana模型或者GPT绘制小程序头像，发现AI味太重，画图像抽奖，不好。
做实验还挺快的。不过还得是大家一起思考力量比较大。也是，有时候一个人看不出问题。但是找得到信任的人也好难。

2025-11-28：

打算了解一下后端了，但是还没有付诸实践。
继续了解了一下考研的方向，我如果想去上海的话，考上海大学可能会是一个不错的选择。但是目前还不知道这所学校的实力如何。
小程序备案又被驳回了，计划明天问一下客服，应当怎么命名，通过的可能性才会大一些。

2025-11-29：

将名称改为“可爱银龙的轻量化工具集”，小程序备案初审通过了。
博客网站新增了一篇文章，用于介绍小程序备案的常见问题。
和家里沟通了一下，这是每天都进行的。家里依旧很支持我的想法，我得进一步付诸实践了。
明天需要评估一下考上海大学的难度，以及考西南交大的目的。
明天还需要重写一下项目创新点。

2025-11-29：

重新写了一下项目的创新点，在Ai的帮助下，学习了利用位图，把图形二值化映射为矩阵中离散点，然后通过点的数量求和，能够得知大约面积的方法。
还是不知道怎么判断一个大学的研究生专业的好坏。感觉上大的081000和我专业课用书重合度很高，只有电路是不相同的。
大概看了一下量子力学的整体框架，虽然还是有很多地方看不明白。但是翻书应该能快一些。

2025-11-30：

继续研究了一下考研院校。

处理过程：

2025.11.01 - 11.04：MQTT连接逻辑重构与配置生效问题

遇到问题 ：配置项修改后必须退出页面重进才生效；异步读取缓存导致连接逻辑判断失效；对象为空时仍然可以触发MQTT连接；断开连接功能无法正常实现。
如何解决 ：
1. 在mqttConnect函数中每次调用时重新从缓存读取配置，废弃原有的更新逻辑。
2. 将配置数据结构由数组改为对象，便于按字段读取。
3. 将缓存读取由异步改为同步，并在检测为空对象时直接返回中断连接流程。
4. 尝试监听end/close/offline事件及更换不同版本mqtt.js排查断连问题。
解决原理 ：
1. 异步函数会先返回初始值，导致判断失效，同步读取可以保证逻辑时序正确。
2. Object.values + some可以快速检测对象中是否存在无效字段。
总结复用 ：配置类数据应避免缓存滞留，关键路径中应实时读取；涉及连接状态的逻辑必须保证时序一致性；对于第三方库问题，应优先验证版本与运行环境兼容性，而不是局限于单点修改。

2025.11.05 - 11.08：设备控制链路打通与状态反馈机制

遇到问题 ：设备启停缺乏明确反馈；用户操作与设备实际状态不同步；无法判断指令是否执行成功。
如何解决 ：
1. 在小程序中增加on/off指令发送函数，并在监听中解析返回标志位。
2. 在ESP8266与2560之间增加标志位通信，由硬件侧返回执行结果。
3. 在前端加入超时机制，对异常情况进行兜底提示。
4. 将按钮状态更新逻辑放入状态回调函数中，而非连接函数。
解决原理 ：通过建立“请求—执行—反馈”闭环链路，使状态由设备端驱动，而非前端假设。
总结复用 ：任何涉及硬件控制的系统都应具备明确的状态回传机制；前端状态不应基于操作行为，而应基于实际反馈；超时机制是处理不可靠链路的必要补充。

2025.11.06 - 11.07：异步流程控制与Promise引入

遇到问题 ：MQTT连接为异步过程，函数返回值无法反映真实连接状态；模块化过程中出现返回undefined问题。
如何解决 ：
1. 使用Promise封装MQTT连接过程，在成功或失败时分别调用resolve/reject。
2. 在调用侧使用async/await配合try/catch处理结果。
解决原理 ：Promise提供状态容器，使异步操作可以以同步形式编排执行流程。
总结复用 ：所有需要“等待结果”的异步操作都应显式封装为Promise；模块化时必须明确函数的返回契约，否则容易出现隐式错误。

2025.11.07 - 11.08：数据驱动与界面联动优化

遇到问题 ：传感器数据更新依赖定时器，无法做到实时响应；界面代码冗余，维护成本高。
如何解决 ：
1. 将数据处理封装为pushCurrentData函数，通过MQTT回调触发更新。
2. 重构WXML结构，使用循环渲染统一设备状态卡片。
3. 在循环中加入wx:key优化渲染性能。
总结复用 ：应优先采用事件驱动而非轮询机制；结构重复的UI应抽象为数据驱动渲染；性能优化应从渲染机制入手，而非单纯减少代码量。

2025.11.08 - 11.12：交互细节完善与状态竞争问题

遇到问题 ：快速操作导致状态错乱（定时器误判）；用户操作体验缺乏反馈；按钮状态与实际流程存在竞争关系。
如何解决 ：
1. 为按钮增加hover-class实现点击态反馈。
2. 在启用设备时设置定时器，并在成功回调中清除定时器，避免误判。
3. 延长超时时间，提高容错性。
解决原理 ：通过控制定时器生命周期，避免异步任务对共享状态的错误覆盖。
总结复用 ：涉及异步+用户操作的场景，本质是“状态竞争问题”；所有定时器都应可控、可清理；用户体验优化应覆盖视觉反馈与逻辑反馈两个层面。

2025.11.08 - 11.10：工程完善与发布准备

遇到问题 ：资源加载与体积限制；小程序对协议与资源有额外限制；需要上线测试环境。
如何解决 ：
1. 引入marked.min.js支持Markdown渲染。
2. 使用图床与CDN（R2 + cloudflare）托管资源并升级为HTTPS。
3. 精简代码包体积并发布体验版。
总结复用 ：前端工程不仅是功能实现，还包括资源管理与部署策略；协议（HTTP/HTTPS）在不同平台有严格限制，需要提前规划。

2025.11.11 - 11.15：博客系统与加载动画机制探索

遇到问题 ：加载动画效果与页面渲染不同步；默认加载样式不满足需求；多种加载机制冲突。
如何解决 ：
1. 本地化pace.js并修改核心进度计算逻辑。
2. 重写加载DOM结构，引入自定义图片与遮罩动画。
3. 调整CSS动画参数与关键帧，使整体节奏统一。
解决原理 ：通过直接修改库源码与渲染逻辑，实现对加载过程的完全控制。
总结复用 ：当第三方库无法满足需求时，可以通过“本地化+裁剪源码”方式深度定制；动画系统本质是时间函数与状态同步问题。

2025.11.16 - 11.20：样式系统重构与部署链路打通

遇到问题 ：动画效果难以统一；GitHub Pages访问受限；本地资源加载效率低。
如何解决 ：
1. 重构preloader动画体系，统一动画节奏与视觉风格。
2. 使用cloudflare代理GitHub仓库，实现加速访问。
3. 将图片与字体迁移至R2存储桶。
总结复用 ：前端性能问题往往来源于资源分发；CDN与代理是基础设施级优化手段；视觉系统需要统一设计语言，而非零散调整。

2025.11.21 - 11.23：多端适配与字体优化

遇到问题 ：移动端显示异常；字体文件体积过大；跨域加载失败（CORS）。
如何解决 ：
1. 针对不同屏幕宽度设置断点，动态调整UI元素。
2. 使用pyftsubset对字体进行子集化压缩。
3. 在cloudflare中配置CORS策略解决跨域问题。
解决原理 ：字体子集化通过仅保留使用字符，大幅降低资源体积。
总结复用 ：移动端适配应在设计阶段考虑；字体优化是前端性能优化的重要部分；跨域问题本质是浏览器安全策略，需要从服务端配置解决。

2025.11.24 - 11.26：工程收尾与体积控制

遇到问题 ：小程序包体超限；字体缺字影响显示；文档不完善。
如何解决 ：
1. 实现小程序分包，降低主包体积。
2. 修复字体缺失字符并重新生成子集。
3. 完善README与功能说明。
总结复用 ：工程收尾阶段重点在“可交付性”；体积控制需要结构优化而非简单删除；文档是项目的重要组成部分。

2025.11.27 - 11.30：备案流程与考研方向探索

遇到问题 ：小程序备案被驳回；命名与材料不符合规范；对考研与技术方向存在不确定性。
如何解决 ：
1. 修改身份证材料与小程序名称，重新提交审核。
2. 调整命名策略以规避商标冲突。
3. 调研院校与专业方向，并尝试构思项目创新点。
总结复用 ：非技术流程同样影响项目推进；合规性问题需要反复试错与经验积累；技术成长与方向选择需要长期探索，而非短期决策。

归纳总结：

近期我围绕一套基于 MQTT 的物联网小程序与个人博客进行了持续迭代，逐步打通了设备控制链路，完善了前端状态管理，并推进了资源部署与上线流程。

在这一过程中，我逐步理清了一些关键实践路径：

例如围绕 MQTT 异步通信，引入 Promise + async/await 重构流程控制；通过“设备执行—标志位回传—前端判定”的链路设计，使状态更新从“前端驱动”转为“硬件反馈驱动”；在数据处理上，将定时轮询改为基于回调的事件驱动；在工程层面，尝试了小程序分包、R2 + cloudflare 资源托管、字体子集化（pyftsubset）等优化手段。同时，在界面与体验方面，也实践了 hover-class 交互反馈、CSS 动画与 pace.js 加载机制的定制，以及多端适配与 CORS 问题处理。