- 跳轉問題關閉原頁面會閃一下的問題:
在進行頁面關閉時,通常採用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來進行修改文字顏色,然後把背景弄成和圖片一樣的形狀。但是這裏會有一個問題就是圖標會有一層陰影,這樣導致了和設計圖產生了差異,那麼如何來解決呢(這裏我弄了幾天還是沒有成功解決這個問題,最後是另一個同學解決了這個問題),就是背景顏色採用漸進色來進行,這樣就是隻要文字的地方有顏色然後接近圖標邊沿的地方又和大的背景顏色一樣,這樣就解決了圖標有陰影的問題,也成功修改了圖標內部文字的顏色。