小程序項目之填坑小記

時間 2019-12-01

標籤程序項目简体版

原文原文鏈接

做者：首席填坑官∙蘇南
公衆號：honeyBadger8，本文原創，著做權歸做者全部，轉載請註明原連接及出處。前端

簡訴

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

前段時間網上一直說的「你能夠罵那些中年人，尤爲是有車有房的……」，雖然我沒有房、也沒有車，但也堅定不作那個能夠隨便罵的中年人（人到中年不如狗？？），不存在的啦，這個仇寶寶已經記下了🤫，先分享一下最近遇到的幾個坑吧。 —— 我是首席填坑官——蘇南，早上好，新的一週加油。git

填坑一，canvas遮擋問題：

隨着小程序的API調整，不少東西都要用戶手動受權，不能直接調用後，toast、彈窗這種提示的場景愈來愈多了，
下圖就是公司活動的canvas合成，如今微信API不讓直接調用受權了，某些場景要多一個彈窗來提示用戶開啓設置，但當趕上canvas API這個大佬後,一切都變了，誰都只能站在它後面，
場景一 ：如以前拒絕受權了，後續引導用戶打開設置頁，即 wx.openSetting,下圖就是：

坑一小結：當趕上這種狀況，個人第一思路是設置樣式：visibility: hidden;opacity:0;，可是結果是讓人失望的，canvas 大佬就是大佬，這兩屬性在手機上失效了,該顯示仍是顯示，你阻擋不了它的光輝，真的，不信能夠去測試！github

解決思路：

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調整一下，改了趕忙發上去，嗯，最好今天就發了審覈吧；canvas

這話，是你會怎麼接呢？？小明說要一天，產品就驚呆了🤒，這傢伙沒有發燒吧？？小明後來通過半天的努力，終於讓產品知道了小程序API更新後，再發布的相關流程都要改的；小程序

有誰能理解小明的痛苦？有誰能理解小程序的API更新機制？更新過的API沒有向下兼容的餘地，已經發布過的就放過你了，可是你再改動，全部它改過的流程，你都要改一遍。微信小程序

結尾

開心一笑，給本身找點樂，爲今天的分享畫上圓滿的句號，以上就是我最近的一次小小填坑記整理，但願能給其餘同窗帶來些許幫助，文中若有理解不足之處，請指正👇。瀏覽器