Fork me on GitHub

Bug第一弹

发表于 | 更新于: | 分类于
字数统计: 2,114 | 阅读时长 ≈ 10
记录几个2017年项目中遇到的几个小问题，主要是安卓ios兼容，web以及移动端之间的问题

SSO拦截登陆后页面报错

功能场景

校验登录通过cookie中特定cookie，如果没有，所有请求会报403，通过axios的钩子函数检测异常跳转到指定登录页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 请求后的钩子函数
HTTP.interceptors.response.use(function (config) {
    // console.log(location.href.split('?')[0] + '?' + encodeURIComponent(location.href.split('?')[1]))
    return config;
}, function (error) {
    if (error.response.status === 401) {
        Cookie.remove('userData')
        localStorage.clear();
        sessionStorage.clear();
        console.log(location.href)
        if (error.response.data.indexOf('jumpto') === -1) {
                location.href = error.response.data + '&jumpto=' + location.href
        } else {
            location.href = error.response.data
        }

    }
    return Promise.reject(error)
})

问题原因

在指定jumpto跳转，后天未将参数中&符号后面的参数带来，导致页面参数不足报错

解决方法

解析url路径？参数，通过incode方法解析，去除&符号，页面在通过decode方法解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 请求后的钩子函数
HTTP.interceptors.response.use(function (config) {
    // console.log(location.href.split('?')[0] + '?' + encodeURIComponent(location.href.split('?')[1]))
    return config;
}, function (error) {
    if (error.response.status === 401) {
        Cookie.remove('userData')
        localStorage.clear();
        sessionStorage.clear();
        console.log(location.href)
        if (error.response.data.indexOf('jumpto') === -1) {
            if (location.href.indexOf('/approval') >= 0) {
                location.href = error.response.data + '&jumpto=' + location.href.split('?')[0] + '?' + encodeURIComponent(location.href.split('?')[1]);
            } else {
                location.href = error.response.data + '&jumpto=' + location.href
            }
        } else {
            location.href = error.response.data
        }

    }
    return Promise.reject(error)
})

web和app共有页面无法区分设备

功能场景

移动端和app端有相同功能页面，需要判断当前设备，并打开相应页面

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
common.judegWebOrApp = () => {
    var userAgentInfo = navigator.userAgent.toLowerCase();
    var Agents = ["zhushou", "android", "iphone", "symbianos", "windows phone", "ipad", "ipod"];
    var flag = true;
    for (var i = 0; i < Agents.length; i++) {
        if (userAgentInfo.indexOf(Agents[i]) > 0) {
            flag = false;
            break;
        }
    }
    var params = location.href.split('?')[1];
    var nowPage = location.href.indexOf('app');
    console.log(flag,nowPage)
    if (flag && nowPage >= 0) {//web端
        location.href = "/web/approval?"+params;
    } else if (!flag && nowPage < 0) {//app端
        location.href = "/app/approval?" + params;
    }
}

通过app的webview加载H5页面在iphone6s和iphoneSE中吸底偶尔不出现

bug原因

在浏览器中测试没有问题，经过测试，在webview中，获取的高度iphone6s和iphoneSE获取的页面高度比真实高度高64px，导致吸底消失

解决措施

判断是否是iphone手机，并判断宽度，符合iphone6s以及iphonese尺寸的，采取设置top值而不是botom值

1
2
3
4
5
6
7
8
9
10
11
12
13
var docEl = document.clientWidth ? document : document.documentElement;
var height = docEl.clientHeight;
var width = docEl.clientWidth;
var reduce = 98 / 30 * width / 25;
setTimeout(() => {
    this.xiBot = this.$refs.botTab;
    if(!this.xiBot) return;
    if (width == 320) {
        this.xiBot.style.top = 548 - reduce + 'px';
    } else if (width == 375 && height < 690) {
        this.xiBot.style.top = 647 - reduce + 'px';
    }
}, 500);

webview中ios系统页面不出现

具体场景

在app中内嵌网页，安卓端没问题，在ios上会出现偶数次打开页面空白现象，但是页面中去除本身app头部的方法已经执行，也就是说页面正常加载，但是页面呈现空白；

bug原因

在vue的router.beforeEach钩子函数中调用了函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* 路由拦截（钩子）*/
router.beforeEach((to, from, next) => {
  //重置到页面顶端
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
  //去除桔子堆头部
  api.appDelHeader();
  //判断路径是否是403和选择地址页面
  if (to.path === '/403' || to.path === '/FoodAddress') {
    next();
    return;
  }
  //判断是否校验checkCode
  if (api.mall.on) {
    login.checkLogin(() => {//失败时候的回调
      next('/403');
      return;
    }, () => {//成功的回调
      if (!api.checkUA() && api.mall.isCheckUA) {
        next('/403');
      } else if (localStorage.getItem('arriveAddress') && localStorage.getItem('menuId')) { // 已选择了默认区域
        next();
      } else {
        console.log('重新获取地址')
        getArea();//就是这个方法，实参未传
      }
    });
  }
})


//获得区域列表
const getArea = function (next, to) {
  api.get({
    data: { flag: 1 },
    url: "/area/queryList",
    object: Vue,
    errorIfo: "获取区域失败",
    then: (data) => {
      // data = null;
      if (data && data.menuId && data.arriveAddress) {
        localStorage.setItem('menuId', data.menuId);
        localStorage.setItem('arriveAddress', data.arriveAddress)
        localStorage.setItem('floorId', data.floorId)//localStorage保存楼层信息
        if (to.path == '/confirmPrepareMeal') {
          next();
          return;
        } else {
          next('/HomeIndex');
        }
      } else {
        next('/FoodAddress');
      }
    }
  })
}

按照上面问题应该导致报错，但是web端测试没问题，安卓没问题，ios偶尔出现，很奇怪

时间控件国际化无法重新渲染

问题场景

时间控件可以使用中英文，但是一经渲染，后期无法局部更新，导致点击切换语言按钮时候无法更改控件内容

解决措施

检测中英文切换操作，采用if重新渲染时间控件

1
2
3
4
5
6
7
8
9
watch: {
  '$i18n.locale': function (value) {
    this.dataPicker = false;
    setTimeout(() => {
      this.dataPicker = true;
      this.showData = this.$t('message.myAppoint.today');
    }, 10);
  },
},

ios时间处理失效

问题场景

提交表单需要校验时间，如果时间小于当前时间，则默认取当前时间，此时需要时间戳对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//选择时间完成
chooseTime(time) {
  this.cancelTime(time);
  this.modalData.timeModal = false;
  this.initialCache("ok");
},
//控制时间大小
cancelTime(time) {
  if (this.setTimeToSeconds(time) - this.setTimeToSeconds() > 1000) {
    this.cacheData.visitingTime = time;
  } else {
    this.cacheData.visitingTime = new Date();
  }
},
//设置时间
setTimeToSeconds(time) {
  // var seconds = this.$moment(time).format('YYYY-MM-DD HH:mm');
  // return parseInt(new Date(seconds).getTime());
  if (time) {
    return new Date(time).getTime();
  } else {
    return new Date().getTime();
  }

},

bug原因

new Date(‘时间字符串’)，ios对于时间字符串格式支持较少，不支持2018-02-02此格式的数据，支持/不支持-，导致时间戳校验失败

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//选择时间完成
chooseTime(time) {
  console.log(time)
  time = this.$moment(time).format('YYYY/MM/DD HH:mm:ss')
  console.log(time)
  this.cancelTime(time);
  this.modalData.timeModal = false;
  this.initialCache("ok");
},
//控制时间大小
cancelTime(time) {
  if (this.setTimeToSeconds(time) - this.setTimeToSeconds() > 1000) {
    this.cacheData.visitingTime = time;
  } else {
    this.cacheData.visitingTime = new Date();
  }
},
//设置时间
setTimeToSeconds(time) {
  // var seconds = this.$moment(time).format('YYYY-MM-DD HH:mm');
  // return parseInt(new Date(seconds).getTime());
  if (time) {
    return new Date(time).getTime();
  } else {
    return new Date().getTime();
  }

},

超小字符实现方式

问题场景

设计图要求一个按钮字体大小为10px，但是谷歌浏览器最小字符为12px

实现场景

1
2
3
4
5
6
7
8
9
10
.repeat-post {
    border: 1px solid #FC9153;
    border-radius: 4px;
    background-color: #fff;
    height: 25px;
    font-size: 12px;
    width: 65px;
    color: #FC9153;
    transform: scale(.8,.9);//采用缩放属性实现
    transform-origin: left;

安卓键盘遮挡输入框

问题场景

安卓在获取焦点弹起键盘会自动将也页面上滑，将input框置于可视位置，但是如果body有滚动条的情况下，则input框位置靠下就会被遮挡

解决措施

在input获取焦点的情况下现将页面上移到顶部

1
2
3
4
5
//滚动条到初始状态
scollTopZero() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
},

取餐时间内无法取餐

问题场景

正常订餐时间是00：00到下午16：30，但是在0点到8点区间无法点餐；
问题原因：后台返回的当前时间currentDate是一个日期字符串，与北京时区不同，有8个小时的时间差，前台处理的时候只是取了日期，导致当天8点之前的日期是昨天的时期

解决措施

1
2
3
4
5
6
Gray.prototype.toSeconds = function (time, currentTime) {
  time = moment(time).format('HH:mm:ss');
  currentTime = moment(currentTime).format('YYYY/MM/DD');
  var time2 = new Date(currentTime + ' ' + time).getTime();
  return time2;
}

显示时间和取餐时间不一致

问题场景

后台提示的下单时间是00：00到下午4：30 在EP部分有一个的电脑时间显示有误，其他人没有问题

1
Thu Mar 22 2018 21:21:47 GMT+0800 (中国标准时间)

解决措施

导致此问题原因为该人电脑时区设置的是美国，导致浏览器解析new Date的时候和正常时区不一致
将电脑时区调整好即可

IOS系统中div盒子内设置滚动条，偶尔会滑动失效

问题场景

在餐品页面内，有餐品列表，偶尔会出现滑动失效的问题，在苹果手机

解决措施

  • 采用body整体布局
  • 使用iscroll插件解决
  • 将此盒子设置为fixed定位

iphonx的兼容问题

问题场景

一个侧边栏，点击从右侧划出的时候iphonex底部有空白，只有这个是这样的

解决措施

布局问题，原来次侧边栏和遮挡层在一个div中，点击的时候显示此div，并给遮挡层和侧边栏加入动画效果；
现在取消外层div即可