mui技術問題總結

1. 跳轉問題關閉原頁面會閃一下的問題：

在進行頁面關閉時，一般採用plus.webview.currentWebview().close()來進行當前頁面的關閉，這個時候會出問題，就是頁面沒法正常跳轉，會一直顯示加載。解決方法就是增長延時函數進行頁面的延時關閉，這是就會成功的來到新頁面，但又會出現一個新的問題，關閉老頁面時，會在新頁面閃一下，這樣的體驗是很很差的。而後通過查閱，能夠經過先hide也就是隱藏，再進行close關閉，這裏要注意的就是延時的時間設置，隱藏的延時必須比關閉的延時短，否則就起不到隱藏的效果，也沒法解決關閉時老頁面閃一下的問題。這裏還得注意的是延時的時間必須合理設置不能過長也不能太短，太短就沒法解決老頁面關閉閃一下的問題，過長的話若是用戶很快的來回去兩個頁面，那麼就會出現老頁面尚未關閉又來到了老頁面，這樣就會出問題，因此延時的時間設置很是的重要。

2.Mui.openwindow打開已經打開的頁面：

經過openwindow打開已經打開的但沒有關閉的頁面，mui.plusReady是不會就行運行的，因此會致使頁面沒有刷新。因此打開的頁面跳轉到其餘頁面時須要進行頁面關閉。

3.Text內容加n不能換行的問題：

這個問題就是在設計協議樣式時碰見的，開始在百度搜索text內容怎麼換行，回答都是用n或者rn等等，當進行使用時發現依舊沒有達到換行的目的，可是也沒有n顯示，因此n應該是能夠進行做用的，可是這裏沒有進行換行，而後繼續進行百度。最後發現是css的white-space屬性的問題，這裏默認關閉了換行，因此在更改white-space的屬性後n就能進行換行了，如下是white-space的屬性值：

normal：忽略多餘的空白，只保留一個空白（默認）；

pre：保留空白(行爲方式相似於html中的pre標籤)；

nowrap：只保留一個空白，文本不會換行，會在在同一行上繼續，直到遇到br標籤爲止。

pre-wrap：保留空白符序列，正常地進行換行；

pre-line：合併空白符序列，保留換行符；

inherit：從父元素繼承white-space屬性的值。

咱們此次的設置就是white-space:pre-wrap，就解決了n不能換行的問題。

具體詳情可參考：https://blog.csdn.net/weixin_38055381/article/details/86003034

4.圖片沒法加載的問題：

在有些地方發現本身的圖片會沒法顯示出來，最開始覺得是網絡的問題致使圖片沒法正常的加載。在後面發現不是網絡的問題，而後經過百度發現若是圖片的命名帶有了中文，那麼圖片就沒法加載出來，因此圖片命名必定不要帶有中文字。

5.彈出菜單的關閉問題：

在使用彈出菜單進行頁面跳轉後，再返回來時發現菜單沒有關閉，這樣就致使了用戶體驗上存在必定的問題，這裏的解決辦法是給彈出菜單裏面的點擊事件里加上mui('#popover').popover('toggle');這句話，而後就能夠解決彈出菜單點擊跳轉後再返回頁面時，菜單沒有關閉的問題。但這個mui('#popover').popover('toggle');須要當心使用，由於mui.popover的做用不只僅是進行彈出菜單的關閉，它也能夠打開彈出菜單。因此一旦你在邏輯上錯誤的使用了mui('#popover').popover('toggle');那麼不只不能起到關閉彈出菜單的做用，還會致使彈出菜單胡亂開啓。

6.引入阿里圖標庫圖標：

由於mui自己的圖標庫是很是有限的，通常都不能知足一個項目的所需圖標，那麼就須要進行外部圖標的引入，最經常使用的就是阿里圖標（具體網址：https://www.iconfont.cn/）

進入圖標庫後先選取咱們所須要的圖標加入購物車，而後進入購物車進行代碼的下載，下載後將只須要將iconfont.ttf文件放到mui框架的font文件夾裏，iconfont.css放到css的文件夾裏就能夠進行圖標使用了，調用方法class="mui-icon iconfont 圖標名字"這裏須要引入前面的iconfont.css文件。

7.手機物理返回鍵設置：

在mui裏，手機的物理返回鍵默認的是返回上一個父頁面，因此在有點狀況下須要進行修改來保證邏輯的正確性，具體的修改就是對mui.back進行修改，在內部加上你要跳轉的頁面，從而實現對手機物理返回鍵的控制。

8.預加載問題：

預加載就是在本頁面對子頁面進行加載，這樣作的目的就是防止下一個頁面加載時間過長，致使體驗上會出現問題。可是進行預加載會出現一個問題，就是當你父頁面進行帶參跳轉時，若是下一個頁面已經進行了預加載，那麼你的預加載頁面的plusready是不會進行渲染的，也就是你經過var self = plus.webview.currentWebview();這種方式是沒法獲取到上一個頁面的傳參的，那麼這裏就會致使錯誤發生，因此在進行預加載時就必須考慮其餘的傳參方式而不能使用openwindow來進行傳參和plus.webview.currentWebview()進行參數獲取的方式，目前個人解決思路是採用原生的localStorage來進行傳遞。

9.特殊圖標顏色處理：

此次的進度條徹底是用圖標來進行構成的，特別是顏色處理上是一個比較難的難題。由於對於數字圖標的顏色，你改變color只能是改變的外面那一圈的顏色並不能對那個數字顏色進行修改，這裏有兩種方法第一種就是在阿里巴巴圖標庫將圖標顏色進行修改後才下載，這樣作就不能用上面第六點提到的方法進行引入，由於這樣引入的圖標仍是沒有通過修改的圖標，這裏你就得用symbol引用，這樣才能引入本身修改顏色後的圖標。另外一個方法就是能夠經過修改background-color來進行修改文字顏色，而後把背景弄成和圖片同樣的形狀。可是這裏會有一個問題就是圖標會有一層陰影，這樣致使了和設計圖產生了差別，那麼如何來解決呢（這裏我弄了幾天仍是沒有成功解決這個問題，最後是另外一個同窗解決了這個問題），就是背景顏色採用漸進色來進行，這樣就是隻要文字的地方有顏色而後接近圖標邊沿的地方又和大的背景顏色同樣，這樣就解決了圖標有陰影的問題，也成功修改了圖標內部文字的顏色。