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