个人技术总结--MUI框架的h5+前端开发 一、技术概述，描述这个技术是做什么？学习该技术的原因，技术的难点在哪里。 二、技术详述。 三、技术使用中遇到的问题和解决过程。要求问题的描述和解决有一定的内容，不能草草概括。要让遇到相关问题的人看了你的博客之后能够解决该问题。 四、总结。 五、参考文献、参考博客。
1.MUI的定位是：
最接近原生体验的移动App的UI框架。MUI这套APP解决方案，核心在于研发者对于webview的二次开发。webview通过H5+的相关接口与APP进行数据及硬件交互。
2.学习原因：
主要还是项目需要吧，技术选择研讨时决定采用这个框架来开发我们的团队项目，所以就进行了学习。
3.技术难点：
相关资料十分缺乏，不好处理细节问题。ide（hbuilderx)经常会进行bug修复更新，感觉让人不踏实。官方群的问答交流很少，问题多是得靠自己摸索解决。
二、技术详述。
总述：
我习惯于学习新技术遵循三步走的路子。第一步，找个入门介绍的教程+官方文档，粗看个大概（有时间的话就写一写，看看效果），了解这个技术是干啥用的，有啥东西和小技巧，脑海里形成一个“带标记的地图”；第二步，看实际开发项目的教程，看实际项目中怎么使用（时间紧迫的话这一步时间就会缩短）；第三步，实际开发使用，遇到问题或者不懂的地方就顺着脑海中的“地图”去找答案，同时边用边熟悉和掌握技术细节知识。
1.第一步
首先，找到官网，官网的文档永远是最优先考虑的。找到后大致浏览一下，了解有哪些内容，方便后面查询细节。我大致看完后，考虑到我本就有html+css+js的基础，上手这个框架不难。（但是后续我才明白，看做MUI，实际上更多的时候，还是应该得会h5+的知识）
其次，找到一个入门教程，我希望的是，能从中看到死板的文档中所不能展现的、或者不够全的东西（例如使用技巧）。其实，说白了就是借鉴前人的经验，减少后面踩坑或者晕头转向的可能。
像这个，官方文档中没有说明，但是能很大程度上提高编程速度的自动补充，我就是从上面的视频中学到的
只是看的话，很难记住，甚至印象也可能很浅，为了避免遗忘，我就去用MUI写了写一些简单的东西，查看效果的同时也是在记忆
2.第二步
找实际项目中MUI的应用。这里团队中的队友给了一个链接，就省去了我去寻找的耗时，另外，这个教程还有对应的github源码链接，可以说学习起来很舒服。（下方有链接）
3.第三步
实际开发与资料查找
三、技术使用中遇到的问题和解决过程。要求问题的描述和解决有一定的内容，不能草草概括。要让遇到相关问题的人看了你的博客之后能够解决该问题。
1.plusReady无限加载的问题
2.evalJS的传值问题
3.websocket加心跳后仍旧自断开的问题（后端使用的是netty构建）
起初，这个问题是我在对alpha阶段的websocket进行重构抽离后产生的，研究了很久一直没查出原因，甚至与后端进行沟通数次也没结果。后来，借着前后端接口二次确认细节的时候，与后端人员进行了详细地研讨，从各个角度进行分析，并考虑重构前后的区别与websocket的特性流程。
最后发现，由于最初alpha阶段心跳包只是为了保持连接而存在，并不涉及任何操作内容，所以后端也仅仅当做心跳处理，没有多余的操作。
图中可以看到，心跳包内只有一个表示心跳的字段，别无他物
而被我注释掉的内容里，原本有一个方法，是放在心跳里用于加载未签收的聊天数据的
而恰恰是这一句，在我看来是多余的操作，使得后端的对前端的存活状态判断出了问题。（少了一个读写操作）
（在后端，除了心跳，还有写操作间隔超时、读操作间隔超时、操作间隔超时的判定，当没有任何一个间隔是不超时的时候，后端就会自动将websocket的链接断掉，这使得我前端的错误码一直是1006）
于是，我与后端进行了研讨，前端加入一个用于实时监测用户状态（是否被封禁）的定时执行操作，用于进行一次读操作，避免了后端等待操作超时的问题，也就避免了链接的异常自断开
四、总结。
学习一门新技术，除了要有耐心以外，其实学习的方向与道路也很重要，因为你不应该去傻乎乎地造*，而遗忘了使用框架的目的；也不应该横冲直撞，徒增各种踩坑。我始终认为，在学新技术前，先了解技术的背景，不仅仅是知道它为何诞生又适用于什么场景，而且也是让我去确认使用这门技术是否真的适合自己要做的东西，它又会与什么技术相关联，我应该提前准备好什么方面的基础知识。像MUI，我在学习的时候，确认了适合团队要做的项目的前端开发，又关注到我已经具备html+css+js的基础，所以觉得还行，但是因为忽略了很重要的H5+的相关知识自己基本不熟悉，使得后续开发时，需要花费大量的精力去额外重点补充，着实有些手忙脚乱。
五、参考文献、参考博客。
1.MUI官方文档
标题：MUI
作者：DCloud
链接：https://dev.dcloud.net.cn/mui/ui/
2.入门介绍教程
标题：【前端移动端开发】MUI视频教程（移动端开发神器）
作者：8m88
链接：https://www.bilibili.com/video/BV1TW41147zn/
（注：应该是搬运视频，此作者不一定是原作者）
3.项目开发教程
标题：springBoot+netty入门最佳实战项目,学完就是大神!
作者：道木熙
链接：https://www.bilibili.com/video/BV1DJ411979X/
github链接：https://github.com/ShimmerPig/PigChat
（注：应该是搬运视频，此作者不一定是原作者。另外，这个项目包含前后端内容，我只看了前端的MUI相关内容）
4.h5+ API相关文档
标题：HTML5+ API Reference
作者：DCloud
链接：https://www.dcloud.io/docs/api/zh_cn/webview.html
5.websocket详情资料参考
标题：websocket接口参考
作者：mozilla
链接：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket