小程序项目之填坑小记
作者：首席填坑官∙苏南
公众号：honeyBadger8，本文原创，著作权归作者所有，转载请注明原链接及出处。
简诉
填坑一，canvas遮挡问题：
- 随着小程序的API调整，很多东西都要用户
手动授权，不能直接调用后，toast、弹窗这种提示的场景越来越多了， - 下图就是公司活动的canvas合成，现在微信API不让直接调用授权了，某些场景要多一个弹窗来提示用户开启设置，但当遇上
canvasAPI这个大佬后,一切都变了，谁都只能站在它后面， - 场景一 ：如之前拒绝授权了，后续引导用户打开设置页，即
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.jsimport wepy from 'wepy'import _login_ from './login';……省略N行//login.jsimport {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没有向下兼容的余地，已经发布过的就放过你了，但是你再改动，所有它改过的流程，你都要改一遍。
结尾
开心一笑，给自己找点乐，为今天的分享画上圆满的句号，以上就是我最近的一次小小填坑记整理，希望能给其他同学带来些许帮助，文中如有理解不足之处，请指正?。
更多文章：
作者：苏南 - 首席填坑官
链接：https://honeybadger8.github.io/blog/
交流群：912594095、公众号：
honeyBadger8本文原创，著作权归作者所有。商业转载请联系
@IT·平头哥联盟获得授权，非商业转载请注明原链接及出处。
小程序项目之填坑小记相关推荐
- 小程序textarea完美填坑
相信做微信小程序的码友们都被textarea这个原生组件坑过,什么placeholder位置错乱,穿透弹窗或遮罩层,ios上输入法弹起后换行输入内容遮挡,删除输入内容时内容被遮挡等等... 反正综上所 ...
- QQ小程序模板消息填坑——40003、40035
QQ小程序已经推出好长时间了,但是普及程度较微信小程序差了太多.实际上QQ小程序基本算是复刻了微信小程序,但是不知道是复刻的水平有限还是官方故意为之,QQ小程序也有很多和微信小程序不一样的地方,也有好 ...
- 微信小程序html2canvas,微信小程序之Canvas填坑
1用能境战求道,重件开又是正易里是了些之框.WXML-CANVAS隐藏问求圈分件圈浏第用代是水刚道.的它还题 2需朋者说上事是础一发一开程和开数的目前间.JS-CANVAS-新直能分支调二浏页器朋代说 ...
- 微信小程序项目转uniapp踩坑日记
本文目录 一.前言 二.转换方式 三.后语 四.其他:node报错 1.包默认C盘存放,而不是安装目录E盘 2.正确的环境变量添加 3.npm install 命令报错 4.npm install - ...
- 小程序 --- 项目小练手Ⅰ
1. 接口文档 2. 帮助文档 小程序开发文档 mdn 阿里巴巴字体 iconfont 3. 项目搭建 3.1 新建小程序项目 填入自己的appid: wxdbf2b5e8c2f521a3 3.2 文 ...
- 配置小程序项目的第一个页面—小程序入门与实战（五）
上一小节我们虽然构建了项目的目录,也配置了几个必要文件,但是我们的项目还是不能编译起来,我们还需要完善app.json.app.js.app.wxss这3个文件跟之前我们说的src/pages/ind ...
- 【免费开放源码】审批类小程序项目实战（活动申请页面）
第一节:什么构成了微信小程序.创建一个自己的小程序 第二节:微信开发者工具使用教程 第三节:深入了解并掌握小程序核心组件 第四节:初始化云函数和数据库 第五节:云数据库的增删改查 第六节:项目大纲以及 ...
- 小程序项目（uniapp）
1.2 开发工具 uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目.主要好处: 模板丰富 完善的智能提示 一键运行 当然,你依然可以根据自己的喜好,选择使用 VS ...
- 基于微信小程序云开发实现考研题库小程序项目（完整版）
今天手把手的带大家实现一款答题类的题库小程序,如果着急的话,可以直接去看文末源码.下载与项目部署. 考研题库小程序云开发实战,完整版提供给大家学习.题库小程序,基于云开发的微信答题小程序,软件架构是微 ...
最新文章
- 二维非稳态导热微分方程_第三章非稳态导热分析解法
- tx2 numba opencv
- 解决ecilpse插件安装速度变得很慢
- 论营销的重要性：以一个磁铁为例
- github上面图片不显示
- Elasticsearch修改字段之别名，扩展数据迁移
- 网络（5）-应用层：了解常用协议使用的端口和底层协议
- 京东取消快递员底薪引热议 官方回应：试点更有激励性的业务提成
- 【VMCloud云平台】SCDPM（四）如何保护数据库（一）
- erlang四大behaviour之四-supervisor（转载）
- 【卫星】卫星通信基本概念与知识
- huya虎牙小程序------真心话大冒险
- ModBus RTU和ModBus ASC
- mac版本markdown编辑器工具：Typora 下载
- 微信公众号消息推送服务器,微信服务号模块消息推送
- Linux | 记一次Linux服务器被入侵后的检测过程
- 开源硬件的知识产权管理
- 1001 害死人不偿命的(3n+1)猜想 (15 分) （MyFirstCSDNBlog~）
- 2022山东健博会，食疗养生与滋补健康展，健康管理与精准医学展
- 判断数字的正则表达式