2021年前端小白的小程序踩坑日记（持续更新ing）

2021年1月14日 晴 关于web-view

​ 今天测试提了个bug，ios端小程序内嵌的H5页面的样式不对。通过一段时间排查发现是H5的css样式缓存没有被清除。试过了不少办法，删除小程序从新加载、从新登录微信都没有用，只能卸载从新安装微信才能彻底清除H5的缓存。害，这不是坑人吗。最后想了个办法，在webview跳转的url后面加了一个时间戳，让小程序每一次跳转到不一样URL得以解决。

2021年1月21日 晴 关于flex布局

​ 今天测试又提了个bug，使用红米手机测试小程序时发现组件的样式不对。本应该平均分布显示的item所有挤到了一块，像极了一团糊在锅里水饺，刚到饭点饥肠辘辘的我瞬间没有了胃口。真机调试后发现 justify-content:space-around这一属性没有生效，将他换成justify-content:space-around仍然没有效果，这显然又是微信小程序的兼容性问题。折腾一番后，将代码替换成了如下代码得以解决。

display: flex;  
align-items: center;  
justify-content: space-between;  
&:before,  
&:after {
    content: '';  
    isplay: block; 
} 
复制代码

2021年1月28日 阴 关于over-flow：hidden

​ 今天测试双提了个bug，为甚么border-radius和over-flow：hidden两个很正经的代码在一块儿就不行了？好家伙，给父组件设置了溢出隐藏后，子元素仍是会在父元素的圆角部分若隐若现。遇事不决问百度，在父元素添加如下代码后问题得以解决。

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
复制代码

2021年1月30日 晴 关于wx.switchTab的跳转问题

​ 终于捱到了发版的这一天，晚上11点多准备下班了，测试叒给咱们提了个bug，通过团队大佬们分析后发现，在二级首页使用wx.switchTab跳转页面时，页面会在跳转的过程当中跑一遍一级首页的生命周期函数致使页面出现紊乱。查了一微信官方文档

​ 那么会不会是由于在跳转时，先关闭了其余非tabBar页面，可是tabBar页面还保留在页面栈里面，在成功跳转新页面前的一瞬间暴露了栈底的一级首页而致使出现bug。那么若是是这样的话，将wx.switchTab换成**wx.reLaunch**应该就能够解决了。

​ 果不其然，一次深夜危机得以解决！

2021年2月22日 多云 关于小程序图片着色

​ 最近接到一个需求，某一个png标签须要根据不一样的业务需求展现不一样的颜色。我也是今天才知道，原来小程序还能实现给图片上色的功能。在官方文档是找不到的，我只能参考了一些民间艺人的旁门左道。概括了一下，主要能够经过两种渠道：

1. 利用 background-blend-mode ，在图片下叠加多一层其余颜色，而后经过 background-blend-mode: lighten 这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。 这个办法有必定的局限性，只能实现白底黑色图案的着色。
2. 使用drop-shadow，给图案添加一个带颜色的阴影，而后经过位置调整，将主图移动到可视范围外，再将阴影部分移动到主图位置便可，这种方法适用于透明背景的纯色图案。原本这种方法相对于个人需求而言是一套完美的解决方案，可是通过测试发现，在ios测试机上，添加了drop-shadow的元素会出现很严重的显示bug，看来兼容性是一道过不去的坎。

一番折腾仍然没有找到合适的方法，最后仍是厚着脸皮找UI要了几套不一样颜色的图案，害，这真不是我想偷懒。

2021年2月26日 雨 元宵节