谈谈最近业务遇到的奇葩bug及成长

241 阅读2分钟

1.场景:安卓webview input框,未直接显示在页面,输入验证码场景,input focus事件只是手动trigger. A页面存在前面的场景,跳转B页面,有输入框,点击返回,竟然获取不到input输入值,即input事件没触发,😂。理应安卓返回页面也是刷新的,但是却出现这个奇怪的问题。 soso监听pageonshow吧,主动reload,之前一般只在ios处理(返回页面不刷新),如下

 window.addEventListener('pageshow', function (e) {
    // eslint-disable-next-line eqeqeq
        if (e.persisted) {
          location.reload()
      }
    })

but, 安卓webview返回竟然没触发,经度娘,查到这句

if (e.persisted || (window.performance && window.performance.navigation.type === 2)) {
      location.reload()
    }

不懂就查

performance.navigation.type(该属性返回一个整数值,表示网页的加载来源,可能有以下4种情况):
  0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATE。
  1:网页通过“重新加载”按钮或者location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。
  2:网页通过“前进”或“后退”按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。
  255:任何其他来源的加载,相当于常数performance.navigation.TYPE_RESERVED。
 performance.navigation.redirectCount:表示网页经过重定向的次数。

2.场景:部分安卓webview里1px像素竟然不显示。。。尴尬,换切图了,欢迎评论留下你的答案 3.场景:一个scss写的关键帧动画,拿去直接用

/**
 * @description: 背景动画
 * @param {string} $name - animation name
 * @param {string} $path - background-image basePath
 * @param {number} $count - image count
 
 @include bgAnimate(
  "img-default",
  "https://xxxx/xh_",
  23
 );
.test {
 animation: img-default step-end 2.5s infinite both;
 }
 */


@mixin bgAnimate($name, $path, $count) {
  @keyframes #{$name} {
    $end: 100;
    $stepCount: $count - 1;
    $step: $end / $stepCount;
      @for $i from 0 to $stepCount {
        #{$i * $step}% {
          $index: $i + 1;
          background-image: url(#{$path}#{$index}.png);
        }
      }
      100% {
        background-image: url(#{$path}#{$stepCount}.png);
      }
    }
}

近期感悟: 新人开发的一定要有自己对业务流程的理解,并熟练掌握开发语言,不能随意被测试及产品引导,否则经常会导致未知的bug。 近期清空了自己看不懂的小盘垃圾股,为了弥补他的亏损,卖了些手头盈利的绩优股,小赚,定投了恒生指数基金,国庆节假日好好研究自己看好的公司,未节后投资做准备。 有需要生活理财交友技术相关需求的朋友,可以关注我的公众号(慢慢rich的coder),最近打算想更新,把自己的成长记录下来。