作者：首席填坑官∙蘇南
公眾號：honeyBadger8，本文原創，著作權歸作者所有，轉載請注明原鏈接及出處。
簡訴
是的，真的，你沒有看錯，我就是上次那個加薪的，但是現在問題來了，最近又搞了個小程序的需求，又填了不少坑，其中的辛酸就不說了，說多了都是淚🤪😭，此處省略三千字 ………^……，說重點吧，反正最后就是差點這讓老板叫走人了，你說優秀不優秀～。
前段時間網上一直說的“你可以罵那些中年人，尤其是有車有房的……”，雖然我沒有房、也沒有車，但也堅決不做那個可以隨便罵的中年人（人到中年不如狗？？），不存在的啦，這個仇寶寶已經記下了🤫，先分享一下最近遇到的幾個坑吧。 —— 我是首席填坑官——蘇南，早上好，新的一周加油。
填坑一，canvas遮擋問題：
- 隨着小程序的API調整，很多東西都要用戶
手動授權，不能直接調用后，toast、彈窗這種提示的場景越來越多了， - 下圖就是公司活動的canvas合成，現在微信API不讓直接調用授權了，某些場景要多一個彈窗來提示用戶開啟設置，但當遇上
canvasAPI這個大佬后,一切都變了，誰都只能站在它后面， - 場景一 ：如之前拒絕授權了，后續引導用戶打開設置頁，即
wx.openSetting,下圖就是：
坑一 小結 ：當遇上這種情況，我的第一思路是 設置樣式：
visibility: hidden;opacity:0;，但是結果是讓人失望的，canvas大佬就是大佬，這兩屬性在手機上失效了,該顯示還是顯示，你阻擋不了它的光輝，真的，不信可以去測試！
解決思路：
- canvas 圖片合成，獲取到圖片的地址后，隱藏canvas,改用image標簽顯示，這種場景有局限性，如果你的需求是
echart交互的,顯示掛了；- cover-view 貌似也是有局限，
<cover-view /> 內只能嵌套 <cover-view /> 和 <cover-image />，view 標簽的子節點樹在真機上都會被忽略，這是我測試后的瀏覽器給出的警告，如果自定modal，要加button按鈕讓用戶點擊后授權某功能，肯定也就掛了 ；- 當彈窗出現的時候，隱藏canvas，這種比較暴力，但覆蓋面廣，任何場景都能照顧到，卻也影響體驗；
- 把
canvas定位移動到屏幕之外繪制內容；- 有同學可能說直接使用原生的
wx.showModal,但官方目前，button還不支持設置open-type屬性；- 等微信小程序官方修復😫，好吧，看到這里你肯定笑了～，這不是一個方法，估計還沒等到老板真叫你走人了，歡迎大佬們補充！！！
填坑二，Maximum call stack size exceeded
- 發現這個bug，要從最近換了個手機說起，用了3年的5S終於歇菜了(再也買不起iphone了～)，換了個android vivo x23, 以為從此走上人生巔峰了，現實卻給了我一個響亮的耳光，又是一個記憶深刻的梗～，被組里的同事笑話好久！！
- 話說，堆棧溢出，是怎么造成的呢？——
循環引用； - 同時我又有些疑惑了，為什么其他手機都正常，就vivo 報了這個錯，同樣的代碼，希望有大神看到能給於解惑！
- 先來看個示例,簡單演示一下 ：
let sum = 20; (function test(){ sum--; console.log(sum); test(); /* if( sum > 0 ){ test(); }*/ })()
- # 而項目中的報錯是這樣的 #：
//fetch.js import wepy from 'wepy' import _login_ from './login'; ……省略N行 //login.js import {fetch} from "./fetch.js"; import Storage from "./storage.js"; ……省略N行 //更改后 login.js ,避免了循環引用 loginFn = ()=>{ require("./fetch.js").fetch({ url:"/wabApi/login/login", }); }
坑二 小結 ：循環引用，可以理解為 a.js內調用了b.js，b.js里又引用了a.js，所以在項目開發中要注意一下，看了下網上的討論，這個問題需要等官方解決，貌似h5里是可以這樣寫的。
填坑三，canvasGetImageData、canvasToTempFilePath
- 這兩個方法，之間的調用，要做一定的延時，不明白是為什么，如果不做延時，也不會報錯，也不提示，方法執行完，canvas上還是空白的;
- 但是讓人尷尬的是，此在寫總結的我，又驗證了一下，不加
setTimeout，調試器上可以，真機掛了！目測跟繪制的目標對象大小有關系！
其他
- 微信API的調整，如：「 wx.getUserInfo」「 wx.getSetting」「 wx.openSetting」「 wx.getPhoneNumber」等這些現在需要添加按鈕，用戶手動來點擊，帶來的不便大家都知道了，就不再多說；
字體文件,加載報錯，但也能正常顯示，而且只有第一次報錯哦；- 其他還有待發現的坑……
@font-face { font-family: 'test'; src: url("https://cdn-xx.xxx.com/common/font/font.ttf") format('truetype'); font-weight: normal; font-style: normal; }
扯淡段子
小明公司之前上線的小程序項目，好久沒有迭代了，產品說有個需求要改一下，很快，就一點點東西，比如一個按鈕UI調整一下，改了趕緊發上去，嗯，最好今天就發了審核吧；
這話，是你會怎么接呢？？小明說要一天，產品就驚呆了🤒，這家伙沒有發燒吧？？小明后來經過半天的努力，終於讓產品知道了小程序API更新后，再發布的相關流程都要改的；
有誰能理解小明的痛苦？有誰能理解小程序的API更新機制？更新過的API沒有向下兼容的余地，已經發布過的就放過你了，但是你再改動，所有它改過的流程，你都要改一遍。
結尾
開心一笑，給自己找點樂，為今天的分享畫上圓滿的句號，以上就是我最近的一次小小填坑記整理，希望能給其他同學帶來些許幫助，文中如有理解不足之處，請指正👇。
更多文章：
做完小程序項目、老板給我加了6k薪資～
面試踩過的坑，都在這里了～
你應該做的前端性能優化之總結大全！
如何給localStorage設置一個過期時間？
手把手教你如何繪制一輛會跑車
如何用CSS3畫出懂你的3D魔方？
SVG Sprites Icon的使用技巧
immutability因React官方出鏡之使用總結分享！
作者：蘇南 - 首席填坑官
鏈接：https://honeybadger8.github.io/blog/
交流群：912594095、公眾號：
honeyBadger8本文原創，著作權歸作者所有。商業轉載請聯系
@IT·平頭哥聯盟獲得授權，非商業轉載請注明原鏈接及出處。