【踩坑】h5项目在Android / ios中的常见问题总结

总结：

一、在ios上光标显示过长的问题
二、ios/android在浏览器中上下滑动一闪一闪（回弹效果）
三、display: flex 遇到white-space: nowrap;
四、让标点符号不出现在行首
五、解决ios短信验证码自动填充两遍的问题
六、h5图片上传，IOS图片会出现旋转
七、分享的带参数的链接在ios QQ中打不开的问题
八、弹出的输入法遮挡输入框的解决办法
九、关于ios input 获取焦点弹出键盘，键盘收回页面上滑无法还原的问题
十、关于日期写法的问题
十一、axios请求成功进入catch或者flyio请求成功也进入err，【检查语法是否错误】

1、在ios上光标显示过长的问题

方案1

不要给input 设置高度，用padding撑开

方案二

更改 input 的 line-height 值，让值变小些

2、ios/android在浏览器中上下滑动一闪一闪（回弹效果）

activated() {
  <!--禁止回弹-->
  document.addEventListener('touchmove', this.evt, {passive: false})
},
deactivated() {
  <!--启用回弹-->
  document.removeEventListener('touchmove', this.evt, false)
},
methods: {
    evt(e) {
      e.preventDefault()
    },
}

注意： vue中禁止回弹效果后可能会对其他页面滑动有影响，需在离开页面的时候启用回弹效果

3、display: flex 遇到white-space: nowrap;

当父级为flex布局，某一子元素超出文字需要隐藏的情况下，会导致另一元素出现被压扁的现象。

<div class="items flex">
    <div class="items-img"><img src="img.jpg" /></div>
    <div class="items-content">
        <h3>我是很多很多的文字很多很多很多很多哦把我假想成文字吧。</h3>
        <div class="text">我是个描述</div>
    </div>
</div>
.items-content{
  min-width: 0;
  .text{
    width:100%;
  }
}

4、让标点符号不出现在行首

word-break:break-all;这条语句的作用是让语句到达边界的时候自动换行，但是正是这个样式让标点符号跑到了行首。

要想标点符号不出现在行首，又能实现自动换行，只需要将样式写成如下：

word-break : normal;
word-wrap:break-word;

5、解决ios短信验证码自动填充两遍的问题

这是苹果系统的一个bug，可以通过监听input，然后截取。
maxlength 失效也可以用此方法

<input type="number" οninput="if(value.length>6) value=value.slice(0,6)"/>

6、h5图片上传，IOS图片会出现旋转

<input type="file" accept="image/jpg" @change="upload"/>

import { EXIF } from 'exif-js'
...
methods: {
  upload(e) {
     let file = e.target.files[0];
     this.fileImage(file)
  },
  fileImage(file) {
    // 处理ios下图片旋转的问题
    if (!file || !window.FileReader) return false;
    // 获取照片方向角属性，用户旋转控制
    EXIF.getData(file, function() {
        EXIF.getAllTags(this);
        Orientation = EXIF.getTag(this, 'Orientation');
    })
    let oReader = new FileReader(); // 创建一个reader
    oReader.onload = function(e) {
        var image = new Image()
         image.src = e.target.result
         image.onload = function() {
            var expectWidth = this.naturalWidth
            var expectHeight = this.naturalHeight
            if (this.naturalWidth > this.naturalHeight &&this.naturalWidth > 800) {
                expectWidth = 800
                expectHeight =(expectWidth * this.naturalHeight) / this.naturalWidth
            } else if (this.naturalHeight > this.naturalWidth &&this.naturalHeight > 1200) {
                expectHeight = 1200
                expectWidth =(expectHeight * this.naturalWidth) / this.naturalHeight
            }
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            canvas.width = expectWidth
            canvas.height = expectHeight
            ctx.drawImage(this, 0, 0, expectWidth, expectHeight)
            var base64 = null
            // 如果方向角不为1，都需要进行旋转
            if (Orientation !== '' && Orientation !== 1) {
              switch (Orientation) {
                 case 6: // 顺时针90度
                    that.rotateImg(this, 'left', canvas)
                    break
                 case 8: // 逆时针90度
                    that.rotateImg(this, 'right', canvas)
                    break
                  case 3: // 180度旋转
                     that.rotateImg(this, 'right', canvas) // 转两次
                     that.rotateImg(this, 'right', canvas)
                     break
                   }
               }
               base64 = canvas.toDataURL('image/jpeg', 0.8)
               that.uploadImg2().then(data => {
                  that.loadingDial.hide()
               })
            }
      }
      oReader.readAsDataURL(file)
  }
}

7、分享的带参数的链接在ios QQ中打不开的问题

排查1：所带参数中含有关键字，与qq冲突
目前遇到的关键字为：sign
排查2：如果所带参数是一个对象，则需要反编译（decodeURIComponent）2次（因为qq自动帮你编译了一次）。

8、弹出的输入法遮挡输入框的解决办法

方案一:

此方案适合底部固定的输入框，手机自带浏览器能完美解决，但对于第三方输入法部分手机不行。

// 当输入框失去焦点的时候调用
<input placeholder="请输入"  v-model.trim="value"  @blur="onBlur"/>

methods: {
  onBlur() {
    setTimeout(() => {  
      document.body.scrollTop = document.body.scrollHeight;  
    },300);
  }
}

方案二：

此方案目前为止没发现大的问题，目前为止算是我比较常用的。
定义一个div，高度大约320px左右，相当于输入法的高度（此处写死不直接获取输入法的高度是因为部分手机获取不到输入法高度）。当input获取焦点时，div显示占位，失去焦点时，div隐藏。

实践发现有一问题：部分手机获取焦点调出键盘后，直接点击软键盘的关闭按钮会直接关闭软键盘，但是输入框并未失去焦点。导致div未隐藏，底部一大空白。坑啊，想哭！！！！！！！！

// div写在所有节点的最底部
<template>
  <div class="wrapper">
    ...
    <input placeholder="请输入" v-model.trim="value"  @click="getFocus($event)" @blur="onBlur"/>

     // 占位div
    <div v-if="isShowPlaceHolder" class="place-holder" style="height: 320px;"></div>
  </div>
</template>

data() {
  return {
    isShowPlaceHolder: false
  }
},
methods: {
  getFocus(e) {
    // 解决input在 ios手机上点击不易获取焦点的问题
    e.target.focus()
    // 显示
    this.isShowPlaceHolder = true 
   },
  onBlur() {
    // 隐藏
    this.isShowPlaceHolder = false
  }
}

方案三：

适合输入框在页面的中间位置。主要思路就是获取焦点时，让input滚动到页面中间

let ele = document.getElementById('dom')
setTimeout( () => {
    ele.scrollIntoView({block: "end", behavior: "smooth"});
    ele.scrollIntoViewIfNeeded();
}, 200);

最终方案：

app原生开发解决，对于他们来说是一句代码的事，不过也会有不同机子，尤其是安卓的兼容问题。但是真的比起h5方便太多啦。

9、关于ios input 获取焦点弹出键盘，键盘收回页面上滑无法还原的问题

// 失去焦点时，让dom滚动到底部
setTimeout(() => {
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
  window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);

10、关于日期写法的问题：

new Date("2019-11-29")在安卓上正常，在ios上有时会直接返回NaN。
原因：ios不支持 -和.连接日期，需要写成斜杠/

// 不能写成 new Date("2019-11-29 12:30:00"), ios不支持-
new Date("2019/11/29 12:30:00")
或者
new Date("2019-11-29 12:30:00".replace(/-/g, "/"));
new Date("2019.11.29 12:30:00".replace(/\./g, "/"));

【踩坑】h5项目在Android / ios中的常见问题总结