记录在一个webapp中遇到的坑

最新推荐文章于 2021-11-10 18:54:40 发布

初见时你最美

最新推荐文章于 2021-11-10 18:54:40 发布

阅读量630

点赞数

CC 4.0 BY-SA版权

文章标签： vue移动端 h5

本文链接：https://blog.youkuaiyun.com/qq_40650146/article/details/83506139

本文分享了在移动端Vue项目中遇到的兼容性问题及解决方案，包括滚动卡顿、文字溢出显示、日期格式转换、滑动穿透、底部固定定位调整、图片上传处理等，覆盖iOS、安卓及不同浏览器特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做了一个移动端项目,使用了vue脚手架，在这里记录一下在里面遇到的坑吧

主要是在ios或者安卓上兼容性问题

1页面上头部有菜单，底部有菜单，中间有菜单的时候选择头部底部固定定位，中间绝对定位，然后超出部门overflow：scroll,在ios手机上滚动的时候会出现十分卡顿的情况，这时候需要在ios上加

/*使得在ios手机上滑动起来更加书顺畅*/
-webkit-overflow-scrolling:touch;

2 底部采用固定定位的时候在ios上滑动的时候会把底部固定定位的也拉起来，这个是属于ios的webview弹性效果。由于我这个是嵌套在钉钉app内，找到api将其禁用掉了

3 使得一段文字在页面中最多显示二行，超出部分变为省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

要加上注释的这段话，否则在本地运行没有问题，打包完以后就不会出现省略号了

4 使用new Date('2016-01-01 00:00:00')转换时候在火狐和ie上会出问题，是字符串格式不被某些浏览器支持

var date="2016-12-12 10:10:10";
date=date.replace(new RegExp(/-/gm) ,"/"); 　　//将所有的'-'转为'/'即可
Date d=new Date(date);

5 解决移动端滑动穿透问题

在一个父页面上弹出一个子页面，在子页面上进行手指滑动的时候，如果父页面也可以滚动的话会导致父页面也跟着滚动

因为是在vue项目里，解决办法是是在watch里监测子页面是否显示，显示的话给body为固定定位，且overflow:hidden

如果没有显示，就静态定位，overflow:auto就好了

6当底部有个固定定位，页面上有个input框的时候,点击input框的时候，在安卓上会把底部固定定位的顶起来，非常不友好，

也是通过watch来进行监听来判断，先定义一个变量a,当窗口变化触发onresize事件的时候，这个变量a高度等于窗口高度，在定义一个常量b为窗口高度，如果a<b.说明有键盘弹出了，这个时候将底部固定定位的隐藏，否则显示

showHeight:function(){
   if(this.showHeight < this.old){
     document.querySelector('#footer').style.display = 'none';
   }
   else{
     document.querySelector('#footer').style.display = 'block';
   }
 }

window.onresize = function(){
  _this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
};

考虑到兼容性问题 document.documentElement.clientHeight || document.body.clientHeight; 获取页面高度的时候这二个都写上

7图片上传最开始用的一个ui组件提供的，但是后来由于需求变化，压缩，旋转，，后来自己写了

首先使得input框的类型为file类型，原生样式比较难看给给外面加个父元素相对定位，这二绝对定位他透明度设置为0，然后加一个和他一样大小的图片，或者写一个方形div，总之会比原来原生好看

点击图片上传，input框触发change时间的时候获取到文件，采用h5提供的api,new FileReader();每次点击完要使得input框值为空否则不能继续上传相同的图片。没有触发change事件了就，。然后将文件转换为base64格式，之后通过onload事件获取到src,这个时候图片比较大需要压缩，用画布将其进行压缩。由于是移动端在手机拍照的话可能会导致旋转，这个时候需要引入一下exif。js对其进行纠正，这个时候基本就完成了，但是上传传给后端需要通过formdata，现在的文件数ibase64格式的，需要再将base64转为文件对象，然后通过formdata传给后台、大致思路是这样的,下面贴下代码

par.loadingShow = true;
  var ipt = document.querySelector('#upFile');
  var Orientation;
  var file = ipt.files[0],
    reader = new FileReader(),
    image = new Image();
  //  每次选择完照片以后清空input框的值  否则再次选择相同的图片无法选择
  ipt.value = '';
  console.log(file);
  if (file) {
    EXIF.getData(file, function () {
      Orientation = EXIF.getTag(this, 'Orientation');
      });
    //将图片2将转成 base64 格式
    reader.readAsDataURL(file);
    // 文件读取成功后的回调
    reader.onload = function (ev) {
      image.src = ev.target.result;
      // 读取图片成功后将图片进行压缩处理
      image.onload = function () {
        let imgWidth = image.width;
        let imgHeight = image.height;
        let quality = 0.3;
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");

        // 对图片尺寸进行压缩  如果宽度大于750
        if(imgWidth >= imgHeight && imgWidth > 750){
          imgWidth = 750;
          imgHeight = Math.ceil(750 * this.height / this.width);
        }else if(imgWidth < imgHeight && imgHeight > 1334){
          imgWidth = Math.ceil(1334 * this.width / this.height);
          imgHeight = 1334;
        }
        canvas.width = imgWidth;
        canvas.height = imgHeight;

        //  根据拍摄的照片的角度进行判断旋转
        if (Orientation && Orientation != 1) {
          switch (Orientation) {
            case 6:
              canvas.width = imgHeight;
              canvas.height = imgWidth;
              ctx.rotate(Math.PI / 2);
              ctx.drawImage(image, 0, -imgHeight, imgWidth, imgHeight);
              break;
            case 3:
              ctx.rotate(Math.PI);
              ctx.drawImage(image, -imgWidth, -imgHeight, imgWidth, imgHeight);
              break;
            case 8:
              canvas.width = imgHeight;
              canvas.height = imgWidth;
              ctx.rotate(3 * Math.PI / 2);
              ctx.drawImage(image, -imgWidth, 0, imgWidth, imgHeight);
              break;
          }
        } else {
          ctx.drawImage(image,0,0,imgWidth, imgHeight);
        }
        let cdata = canvas.toDataURL("image/jpeg",quality);
        //  将base64文件转化为图片文件
        var arr = cdata.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        let upfile = new File([u8arr],file.name,{type: mime});
        let fd = new FormData();
        fd.append('file',upfile);
        let config = {
          headers: {'Content-Type':'multipart/form-data'}
        };
        axios.post(process.env.API_host+'/aftersales/tool/upload',fd,config)
          .then((res)=>{
            // alert(1);
            par.imgUrl.push(res.data.data);
            par.loadingShow = false;
            par.imgNub = `(${par.imgUrl.length}/9)`;
            if(par.imgUrl.length == 9) {
              par.addIconShow = false;
              par.loadingShow = false;
              return;
            }
          })
          .catch(function(error){
            Toast(`图片上传失败,请重新上传!`);
          });
      }
    }
  }
}，

这是在移动端中遇到一些坑以及解决方法，有些可能不是最优的，在这记录一下，后续遇到还会继续更新的。

对了由于引入了一个vue图片预览插件导致打包后在某些浏览器打开直接白屏，不兼容,打包文件出错