一、技術概述，描述這個技術是做什么？學習該技術的原因，技術的難點在哪里。
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