小程序项目之再填坑记

小程序项目之再填坑记

简诉

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

  前段时间网上一直说的“[你可以骂那些中年人,尤其是有车有房的……](https://blog.csdn.net/weixin_43254766/article/details/82811714)”,虽然我没有房、也没有车,但也坚决不做那个可以随便骂的中年人(人到中年不如狗??),不存在的啦,这个仇宝宝已经记下了🤫,先分享一下最近遇到的几个坑吧。 —— 我是首席填坑官——苏南,早上好,新的一周加油。

早安,这里是@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 貌似也是有局限,<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",

		});
	}
小程序的 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·平头哥联盟获得授权,非商业转载请注明原链接及出处。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静晴轩

如何写一手漂亮的 Vue

前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:“90后,你的中年危机已经杀到”。这令我很受触动。显然,这有些夸张了,但就目前这日复一日的庸碌下...

7526
来自专栏程序员叨叨叨

【8】如何写出一篇登得上大雅之堂的技术博客

写博客之前,一定要在心里好好地问自己:我为什么要写博客?我记得自己初入简书是受学长李响同學引导,因其奇佳的段子手天赋引来了诸多粉丝,尤其是《李响同學 #你的包里...

661
来自专栏ATYUN订阅号

Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣

Medium网友Peter Weinberg开发了一款名叫CS-Playground-React的应用程序,可以使大家更有意思、也更加轻松地学习算法和数据结构。...

4625
来自专栏互联网杂技

JavaScript就要统治世界了?

" JavaScript 可以……" "嘛,不就是操作一下 DOM,可以让元素飞来飞去吗" "JavaScript 是……" "不就是用 jQuery 让网页动...

3276
来自专栏携程技术中心

干货 | Qreact,去哪儿网的迷你react方案

作者简介 钟钦成,网名司徒正美,著名的JavaScript专家,去哪儿网前端架构师。在GITHUB拥有复数个著名的轮子,著有《javascript框架设计》一书...

4018
来自专栏编程微刊

进阶攻略|前端最全的框架总结

2083
来自专栏hightopo

从IE6到IE11上运行WebGL 3D遇到的各种坑

1603
来自专栏phodal

我的职业是前端工程师【三】:学习前端只需要三个月【语言篇】

过去,我一直无法相信:一个新人在三个月里可以学好前端。后来,我信了。因为三个月后,我又是一个前端的新人,我又需要重新入门前端。 前端领域好似也有一个“摩尔定律”...

2029
来自专栏顶级程序员

Android学习路上会遇到的各种瓶颈总结

前言 对于大多数大三学生来说,这个暑假是人生最后一个暑假。对于IT专业的学生来说,开学后就要面对各大IT企业的秋招,很多人会成为从0开始的An...

4828
来自专栏编程微刊

经典小程序源码及其下载地址

6105

扫码关注云+社区

领取腾讯云代金券