MUI学习新技术遵循三步走的路子，找个入门介绍介绍

天外神坛丶清

一、技术概述，描述一下这个技术是做什么的？学习技术的原因，技术的难点在哪里。1.MUI的定位是：

最接近原生体验的移动应用 UI 框架。MUI APP解决方案的核心在于开发者的二次开发。通过H5+的相关接口与APP进行数据和硬件交互。

2.学习理由：

主要是项目的需求。在技​​术选型研讨会上，我们决定使用这个框架来开发我们的团队项目，所以我们研究了它。

3.技术难点：

相关信息非常缺乏，细节处理也很困难。ide() 经常进行错误修复和更新，感觉不可靠。官方群里的问答交流很少，大部分问题都得摸索解决。

二、技术细节。概述：

我习惯于按照三步法学习新技术。第一步，找个入门教程+官方文档，粗略看一下（有时间就写，看看效果），明白这个技术是干什么用的，脑子里有什么东西和tips形成一个“标记地图”；第二步，看实际开发项目的教程，看看在实际项目中如何使用（如果时间紧，这一步的时间会缩短）；第三步，实际开发使用，遇到问题或者不明白的地方，可以跟着脑海中的“地图”寻找答案，同时熟悉和掌握技术细节。

1.第一步，找到官网。官方网站上的文件永远是重中之重。找到后，大致浏览一下，了解里面有什么，方便以后查看详情。粗略看了下，考虑到我已经有html+css+js的基础，上手这个框架也不是什么难事。（但后来我意识到，作为MUI，其实更多时候，你应该具备h5+的知识）

其次，找个入门教程，希望能从中看到一些死板的文档无法展示的东西，或者不够全面（比如使用技巧）。其实说白了就是借鉴前人的经验，减少踩坑或者头晕的可能性。

像这样，官方文档中没有解释，但是自动添加可以大大提高编程速度h5前端开发主要做什么，我从上面的视频中了解到

如果只是看，很难记住，甚至可能印象很浅。为了避免忘记，我就去用MUI写了一些简单的东西，看到效果也想起了效果。

2.第二步，找到MUI在实际项目中的应用。这里队里的队友给了一个链接，省去了我费时的搜索。另外，本教程还有对应的源码链接，可以说学起来很舒服。（下方链接）

3.实际开发第三步，资料搜索

三、技术使用中遇到的问题及解决方法。问题的描述和解决方法要求有一定的内容，不能草率地总结。确保有相关问题的人看到您的博客并可以解决该问题。1.无限加载的问题

博客地址

2. 的传值问题

3.添加心跳后自断线的问题（后端用netty搭建）

起初，这个问题是我重构并提取了alpha阶段后产生的。研究了半天也没找到原因，甚至跟后端沟通了好几次都没有结果。后来在通过前后端接口确认细节的时候，我和后端人员进行了详细的讨论，从各个角度进行了分析，考虑了重构前后的差异和特色流程。

最后发现，由于初始 alpha 阶段的心跳包只是为了维持连接而存在，不涉及任何操作内容，所以后端只作为心跳处理，没有多余的操作。

图中可以看到，心跳包中只有一个字段代表心跳，没有别的。

在被我注释掉的内容中天外神坛，原来有一个方法，放在心跳中，用来加载未签名的聊天数据。

而正是这句话，在我看来是多余的操作，让前端生存状态的后端判断出了问题。（少一个读写操作）

（在后端，除了心跳之外，还有写操作间隔超时、读操作间隔超时、操作间隔超时的判断。当没有间隔没有超时时，后端会自动断开链接，这使得我前端的错误代码总是 1006）

于是，我和后端商量，前端加了一个定时执行操作，用于实时监控用户状态（是否被ban）h5前端开发主要做什么，用来执行一个读操作，避免了等待后端超时操作，从而避免了链接的异常自断开

四、总结。

在学习一门新技术的过程中，除了要有耐心，学习的方向和路径也很重要，因为不要傻傻地造轮子，忘记了用车架的目的；也不应横冲直撞，增加各种踩坑。我一直认为，在学习一项新技术之前，首先要了解该技术的背景，不仅要知道它为什么诞生，适合什么场景，还要让我确认使用这项技术是否真的适合我想要做。会和什么技术相关联，需要提前准备什么基础知识。和MUI一样，我在学习的时候确认项目的前端开发适合团队做，并且注意到自己已经有了html+css+js的基础，所以觉得还可以，

五、参考资料，参考博客。

1.MUI 官方文档

作品名称：MUI