小程式專案之填坑小記

蘇南發表於2019-02-16

簡訴

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

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

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

填坑一，canvas遮擋問題：

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

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

坑一 小結 ：當遇上這種情況，我的第一思路是 設定樣式：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();
        }*/
    })()
複製程式碼

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

  • ** # 而專案中的報錯是這樣的 # **：

    //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，偵錯程式上可以，真機掛了！目測跟繪製的目標物件大小有關係！

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

其他

  • 微信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
canvasGetImageData

扯淡段子

  小明公司之前上線的小程式專案，好久沒有迭代了，產品說有個需求要改一下，很快，就一點點東西，比如一個按鈕UI調整一下，改了趕緊發上去，嗯，最好今天就發了稽核吧；

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

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

結尾

  開心一笑，給自己找點樂，為今天的分享畫上圓滿的句號，以上就是我最近的一次小小填坑記整理，希望能給其他同學帶來些許幫助，文中如有理解不足之處，請指正?。

寶劍鋒從磨礪出，梅花香自苦寒來，做有溫度的攻城獅!，公眾號：honeyBadger8
用心分享，做有溫度的攻城獅！

作者：蘇南 - 首席填坑官

連結：blog.csdn.net/weixin_4325…

交流群：912594095、公眾號：honeyBadger8

本文原創，著作權歸作者所有。商業轉載請聯絡@IT·平頭哥聯盟獲得授權，非商業轉載請註明原連結及出處。

相關文章