2021年前端小白的小程序踩坑日記（持續更新ing）

2021年1月14日 晴 關於web-view

​ 今天測試提了個bug，ios端小程序內嵌的H5頁面的樣式不對。通過一段時間排查發現是H5的css樣式緩存沒有被清除。試過了不少辦法，刪除小程序從新加載、從新登錄微信都沒有用，只能卸載從新安裝微信才能徹底清除H5的緩存。害，這不是坑人嗎。最後想了個辦法，在webview跳轉的url後面加了一個時間戳，讓小程序每一次跳轉到不一樣URL得以解決。

2021年1月21日 晴 關於flex佈局

​ 今天測試又提了個bug，使用紅米手機測試小程序時發現組件的樣式不對。本應該平均分佈顯示的item所有擠到了一塊，像極了一團糊在鍋裏水餃，剛到飯點飢腸轆轆的我瞬間沒有了胃口。真機調試後發現 justify-content:space-around這一屬性沒有生效，將他換成justify-content:space-around仍然沒有效果，這顯然又是微信小程序的兼容性問題。折騰一番後，將代碼替換成了如下代碼得以解決。

display: flex;  
align-items: center;  
justify-content: space-between;  
&:before,  
&:after {
    content: '';  
    isplay: block; 
} 
複製代碼

2021年1月28日 陰 關於over-flow：hidden

​ 今天測試雙提了個bug，爲甚麼border-radius和over-flow：hidden兩個很正經的代碼在一塊兒就不行了？好傢伙，給父組件設置了溢出隱藏後，子元素仍是會在父元素的圓角部分若隱若現。遇事不決問百度，在父元素添加如下代碼後問題得以解決。

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
複製代碼

2021年1月30日 晴 關於wx.switchTab的跳轉問題

​ 終於捱到了發版的這一天，晚上11點多準備下班了，測試叒給咱們提了個bug，通過團隊大佬們分析後發現，在二級首頁使用wx.switchTab跳轉頁面時，頁面會在跳轉的過程當中跑一遍一級首頁的生命週期函數致使頁面出現紊亂。查了一微信官方文檔

​ 那麼會不會是由於在跳轉時，先關閉了其餘非tabBar頁面，可是tabBar頁面還保留在頁面棧裏面，在成功跳轉新頁面前的一瞬間暴露了棧底的一級首頁而致使出現bug。那麼若是是這樣的話，將wx.switchTab換成**wx.reLaunch**應該就能夠解決了。

​ 果不其然，一次深夜危機得以解決！

2021年2月22日 多雲 關於小程序圖片着色

​ 最近接到一個需求，某一個png標籤須要根據不一樣的業務需求展現不一樣的顏色。我也是今天才知道，原來小程序還能實現給圖片上色的功能。在官方文檔是找不到的，我只能參考了一些民間藝人的旁門左道。概括了一下，主要能夠經過兩種渠道：

1. 利用 background-blend-mode ，在圖片下疊加多一層其餘顏色，而後經過 background-blend-mode: lighten 這個混合模式實現改變圖片主體顏色黑色爲其它顏色的目的。 這個辦法有必定的侷限性，只能實現白底黑色圖案的着色。
2. 使用drop-shadow，給圖案添加一個帶顏色的陰影，而後經過位置調整，將主圖移動到可視範圍外，再將陰影部分移動到主圖位置便可，這種方法適用於透明背景的純色圖案。原本這種方法相對於個人需求而言是一套完美的解決方案，可是通過測試發現，在ios測試機上，添加了drop-shadow的元素會出現很嚴重的顯示bug，看來兼容性是一道過不去的坎。

一番折騰仍然沒有找到合適的方法，最後仍是厚着臉皮找UI要了幾套不一樣顏色的圖案，害，這真不是我想偷懶。

2021年2月26日 雨 元宵節