1. 程式人生 > >小程式專案之再填坑

小程式專案之再填坑

小程式專案之再填坑記

簡訴

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

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

早安,這裡是@IT·平頭哥聯盟,我是首席填坑官∙蘇南,用心分享 做有溫度的攻城獅。
公眾號:honeyBadger8

,群:912594095
本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享

填坑一,canvas遮擋問題:

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

canvas遮擋問題

坑一 小結 :當遇上這種情況,我的第一思路是 設定樣式:visibility: hidden;opacity:0;

,但是結果是讓人失望的,canvas 大佬就是大佬,這兩屬性在手機上失效了,該顯示還是顯示,你阻擋不了它的光輝,真的,不信可以去測試!

解決思路:
  • canvas 圖片合成,獲取到圖片的地址後,隱藏canvas,改用image標籤顯示,這種場景有侷限性,如果你的需求是echart互動的,顯示掛了;
  • cover-view 貌似也是有侷限,&lt;cover-view /&gt; 內只能巢狀 &lt;cover-view /&gt; 和 &lt;cover-image /&gt;,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",

        });
    }

小程式的 Maximum call stack size exceeded

坑二 小結 :迴圈引用,可以理解為 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沒有向下相容的餘地,已經發布過的就放過你了,但是你再改動,所有它改過的流程,你都要改一遍。

結尾

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

寶劍鋒從磨礪出,梅花香自苦寒來,做有溫度的攻城獅!

更多文章:

easy-mock 最好的備胎沒有之一
immutability因React官方出鏡之使用總結分享!
面試踩過的坑,都在這裡了~
你應該做的前端效能優化之總結大全!
如何給localStorage設定一個過期時間?
動畫一點點 - 如何用CSS3畫出懂你的3D魔方?

作者:蘇南 - 首席填坑官
交流群:912594095、公眾號:honeyBadger8
連結:https://blog.csdn.net/weixin_43254766/article/details/83662686
本文原創,著作權歸作者所有。商業轉載請聯絡@IT·平頭哥聯盟獲得授權,非商業轉載請註明原連結及出處。