小程序项目之填坑小记

时间 2019-11-08

标签程序项目繁體版

原文原文链接

做者：首席填坑官∙苏南
公众号： honeyBadger8，本文原创，著做权归做者全部，转载请注明原连接及出处。

简诉

　　是的，真的，你没有看错，我就是上次那个加薪的，可是如今问题来了，最近又搞了个小程序的需求，又填了很多坑，其中的辛酸就不说了，说多了都是泪🤪😭，此处省略三千字 ………^……，说重点吧，反正最后就是差点这让老板叫走人了，你说优秀不优秀～。css

　　前段时间网上一直说的“<u>你能够骂那些中年人，尤为是有车有房的……</u>”，虽然我没有房、也没有车，但也坚定不作那个能够随便骂的中年人（人到中年不如狗？？），不存在的啦，这个仇宝宝已经记下了🤫，先分享一下最近遇到的几个坑吧。 —— 我是首席填坑官——苏南，早上好，新的一周加油。前端

填坑一，canvas遮挡问题：

随着小程序的API调整，不少东西都要用户手动受权，不能直接调用后，toast、弹窗这种提示的场景愈来愈多了，
下图就是公司活动的canvas合成，如今微信API不让直接调用受权了，某些场景要多一个弹窗来提示用户开启设置，但当赶上canvas API这个大佬后,一切都变了，谁都只能站在它后面，
场景一 ：如以前拒绝受权了，后续引导用户打开设置页，即 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调整一下，改了赶忙发上去，嗯，最好今天就发了审核吧；react

　　这话，是你会怎么接呢？？小明说要一天，产品就惊呆了🤒，这家伙没有发烧吧？？小明后来通过半天的努力，终于让产品知道了小程序API更新后，再发布的相关流程都要改的；android

　　有谁能理解小明的痛苦？有谁能理解小程序的API更新机制？更新过的API没有向下兼容的余地，已经发布过的就放过你了，可是你再改动，全部它改过的流程，你都要改一遍。git

结尾

　　开心一笑，给本身找点乐，为今天的分享画上圆满的句号，以上就是我最近的一次小小填坑记整理，但愿能给其余同窗带来些许帮助，文中若有理解不足之处，请指正👇。github