V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
southSu
V2EX  ›  分享创造

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

  •  
  •   southSu ·
    meibin08 · 2018-11-15 08:08:59 +08:00 · 3798 次点击
    这是一个创建于 1961 天前的主题,其中的信息可能已经有所发展或是发生改变。

    小程序项目之再填坑记

    简诉

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

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

    早安,这里是@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 没有向下兼容的余地,已经发布过的就放过你了,但是你再改动,所有它改过的流程,你都要改一遍。

    结尾

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

    宝剑锋从磨砺出,梅花香自苦寒来,做有温度的攻城狮!

    更多文章:

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

    19 条回复    2018-11-20 09:50:09 +08:00
    southSu
        1
    southSu  
    OP
       2018-11-15 08:10:30 +08:00
    今夜,远去了兰舟,远去了芳草;
    不想柳舞,不忆花飞。
    云断,疏影横斜;雁过,栖息无声。
    此时,只想与你,共婵娟。—— 我是苏南,早安!
    Wolfpancake
        2
    Wolfpancake  
       2018-11-15 08:33:53 +08:00 via iPhone
    毕竟小程序里面的 canvas 是原生组件,通过计算位置之后盖在 webview 上层的...不过没把 visibility 属性解析一下扔给原生组件微信也是有点偷懒了
    cctv1005s927
        3
    cctv1005s927  
       2018-11-15 09:06:46 +08:00
    为啥你说技术文章总要念两句诗呢,莫非是..🤓
    leefly
        4
    leefly  
       2018-11-15 09:25:02 +08:00
    canvasToTempFilePath 是有回调的呀
    sujin190
        5
    sujin190  
       2018-11-15 09:56:10 +08:00
    @leefly #4 其实他的意思的,调用完 draw 立刻调用 canvasToTempFilePath 然后通过回调拿到的图片也是空吧
    微信自己实现的这个 canvas 真实弱爆了,bug 一堆,现在经常在不确定情况下会遇到重设画笔了,绘制的文字颜色还是之前的,找了很多方法都没办法解决,坑死了
    Exia
        6
    Exia  
       2018-11-15 10:32:17 +08:00
    那个 canvas 的问题解决办法就是在屏幕外画好再改 left,且没有的时候使用一张图片来代替显示。
    leefly
        7
    leefly  
       2018-11-15 13:46:43 +08:00
    @sujin190 draw 方法也是有回调的呀,`在 draw() 回调里调用该方法才能保证图片导出成功。`
    https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
    这一点开发者工具和真机有点区别。
    southSu
        8
    southSu  
    OP
       2018-11-15 19:03:49 +08:00
    @leefly
    晚上好,是有回调的呢,跟回调没有关系,在里面处理也一样。
    southSu
        9
    southSu  
    OP
       2018-11-15 19:05:08 +08:00
    @Exia
    晚上好,感谢大佬指点,现在就是这么干的,但这种使用方式,也有业务场景限制,不能完全适用。
    southSu
        10
    southSu  
    OP
       2018-11-15 19:05:41 +08:00
    @cctv1005s927
    晚上好,是的,大佬,你没有猜错,我装 B 用的哦,哈哈~
    southSu
        11
    southSu  
    OP
       2018-11-15 19:06:35 +08:00
    @Wolfpancake
    晚上好,嗯,大佬理解的很到位,网上也看到过很多人反馈,但是它就是死性不改!
    southSu
        12
    southSu  
    OP
       2018-11-15 19:08:09 +08:00
    @leefly
    嗯,是有回调。但在部分手机还是有问题,android 的,性能如果差些,还是要在 canvas 后加个延时,调用它!
    leefly
        13
    leefly  
       2018-11-16 09:01:16 +08:00
    @southSu 好吧Σ<(=⊙▽⊙)"
    quietjosen
        14
    quietjosen  
       2018-11-16 10:05:27 +08:00
    本来想了解下小程序开发,看完吓得一哆嗦…
    Exia
        15
    Exia  
       2018-11-16 10:08:11 +08:00
    @southSu 互相学习 🤝
    southSu
        16
    southSu  
    OP
       2018-11-17 07:22:44 +08:00
    @quietjosen
    愿你独立美好,
    无惧时光,
    做自己喜欢做的事,
    成为最好的自己!——早上好,周末愉快,别慌,踩的多了,跟也就平了,加油
    quietjosen
        17
    quietjosen  
       2018-11-17 22:34:02 +08:00
    @southSu 哈哈,原来是位诗人!
    southSu
        18
    southSu  
    OP
       2018-11-19 08:29:35 +08:00
    @quietjosen 让大佬见笑了,早安
    tanszhe
        19
    tanszhe  
       2018-11-20 09:50:09 +08:00
    段子手
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2805 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 14:44 · PVG 22:44 · LAX 07:44 · JFK 10:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.