小程序项目之再填坑——有 N+1 的风险

[southSu]

简诉

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

前段时间网上一直说的“<你可以骂那些中年人，尤其是有车有房的……>”，虽然我没有房、也没有车，但也坚决不做那个可以随便骂的中年人（人到中年不如狗？？），不存在的啦，这个仇宝宝已经记下了🤫，先分享一下最近遇到的几个坑吧。

早安，这里是@IT·平头哥联盟，我是首席填坑官∙苏南，用心分享 做有温度的攻城狮。
公众号：honeyBadger8，群：912594095

填坑一，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 调整一下，改了赶紧发上去，嗯，最好今天就发了审核吧；

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

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

结尾

开心一笑，给自己找点乐，为今天的分享画上圆满的句号，以上就是我最近的一次小小填坑记整理，希望能给其他同学带来些许帮助，文中如有理解不足之处，请指正👇。

更多文章：

• easy-mock 最好的备胎没有之一
• immutability 因 React 官方出镜之使用总结分享！
• 面试踩过的坑，都在这里了～
• 你应该做的前端性能优化之总结大全！
• 如何给 localStorage 设置一个过期时间？
• 动画一点点 - 如何用 CSS3 画出懂你的 3D 魔方？

作者：苏南 - 首席填坑官
交流群：912594095、公众号：honeyBadger8
链接： https://blog.csdn.net/weixin_43254766/article/details/83662686
本文原创，著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权，非商业转载请注明原链接及出处。

[southSu]

今夜，远去了兰舟，远去了芳草；
不想柳舞，不忆花飞。
云断，疏影横斜；雁过，栖息无声。
此时，只想与你，共婵娟。—— 我是苏南，早安！

[Wolfpancake]

毕竟小程序里面的 canvas 是原生组件，通过计算位置之后盖在 webview 上层的...不过没把 visibility 属性解析一下扔给原生组件微信也是有点偷懒了

[cctv1005s927]

为啥你说技术文章总要念两句诗呢，莫非是..🤓

[leefly]

canvasToTempFilePath 是有回调的呀

[sujin190]

@leefly #4 其实他的意思的，调用完 draw 立刻调用 canvasToTempFilePath 然后通过回调拿到的图片也是空吧
微信自己实现的这个 canvas 真实弱爆了，bug 一堆，现在经常在不确定情况下会遇到重设画笔了，绘制的文字颜色还是之前的，找了很多方法都没办法解决，坑死了

[Exia]

那个 canvas 的问题解决办法就是在屏幕外画好再改 left，且没有的时候使用一张图片来代替显示。

[leefly]

@sujin190 draw 方法也是有回调的呀，`在 draw() 回调里调用该方法才能保证图片导出成功。`
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
这一点开发者工具和真机有点区别。

[southSu]

@leefly
晚上好，是有回调的呢，跟回调没有关系，在里面处理也一样。

[southSu]

@Exia
晚上好，感谢大佬指点，现在就是这么干的，但这种使用方式，也有业务场景限制，不能完全适用。

[southSu]

@cctv1005s927
晚上好，是的，大佬，你没有猜错，我装 B 用的哦，哈哈～

[southSu]

@Wolfpancake
晚上好，嗯，大佬理解的很到位，网上也看到过很多人反馈，但是它就是死性不改！

[southSu]

@leefly
嗯，是有回调。但在部分手机还是有问题，android 的，性能如果差些，还是要在 canvas 后加个延时，调用它！

[leefly]

@southSu 好吧Σ<(=⊙▽⊙)"

[quietjosen]

本来想了解下小程序开发，看完吓得一哆嗦…

[Exia]

@southSu 互相学习 🤝

[southSu]

@quietjosen
愿你独立美好，
无惧时光，
做自己喜欢做的事，
成为最好的自己！——早上好，周末愉快，别慌，踩的多了，跟也就平了，加油

[quietjosen]

@southSu 哈哈，原来是位诗人！

[southSu]

@quietjosen 让大佬见笑了，早安

[tanszhe]

段子手