小程式專案之填坑小記

蘇南發表於2019-02-16

前端小程式專案之填坑小記

作者：首席填坑官∙蘇南
公眾號：honeyBadger8，本文原創，著作權歸作者所有，轉載請註明原連結及出處。

簡訴

　　是的，真的，你沒有看錯，我就是上次那個加薪的，但是現在問題來了，最近又搞了個小程式的需求，又填了不少坑，其中的辛酸就不說了，說多了都是淚??，此處省略三千字 ………^……，說重點吧，反正最後就是差點這讓老闆叫走人了，你說優秀不優秀～。

　　前段時間網上一直說的“<u>你可以罵那些中年人，尤其是有車有房的……</u>”，雖然我沒有房、也沒有車，但也堅決不做那個可以隨便罵的中年人（人到中年不如狗？？），不存在的啦，這個仇寶寶已經記下了?，先分享一下最近遇到的幾個坑吧。 —— 我是首席填坑官——蘇南，早上好，新的一週加油。

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享，公眾號：honeyBadger8

填坑一，canvas遮擋問題：

隨著小程式的API調整，很多東西都要使用者手動授權，不能直接呼叫後，toast、彈窗這種提示的場景越來越多了，
下圖就是公司活動的canvas合成，現在微信API不讓直接呼叫授權了，某些場景要多一個彈窗來提示使用者開啟設定，但當遇上canvas API這個大佬後,一切都變了，誰都只能站在它後面，
場景一 ：如之前拒絕授權了，後續引導使用者開啟設定頁，即 wx.openSetting,下圖就是：

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享，公眾號：honeyBadger8，小程式提示，被遮擋

坑一小結：當遇上這種情況，我的第一思路是設定樣式：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",

        });
    }

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享，公眾號：honeyBadger8，Maximum call stack size exceeded

坑二小結：迴圈引用，可以理解為 a.js內呼叫了b.js，b.js裡又引用了a.js，所以在專案開發中要注意一下，看了下網上的討論，這個問題需要等官方解決，貌似h5裡是可以這樣寫的。

填坑三，canvasGetImageData、canvasToTempFilePath

這兩個方法，之間的呼叫，要做一定的延時，不明白是為什麼，如果不做延時，也不會報錯，也不提示，方法執行完，canvas上還是空白的;
但是讓人尷尬的是，此在寫總結的我，又驗證了一下，不加setTimeout，偵錯程式上可以，真機掛了！目測跟繪製的目標物件大小有關係！

canvasGetImageData、canvasToTempFilePath

其他

微信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;
    }

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享，公眾號：honeyBadger8