2020年8月问题记录

vue-cli3插件兼容处理

1. IE10

• 情况：

  项目中的引入了vuejs-datepicker插件，该插件不兼容ie10及以下，导致整个项目在ie10下报错，页面空白。

• 原因：

  默认配置中下，babel-loader会忽略node_modules中的所有文件，而该插件本身又没有做兼容处理。

• 解决办法：

  在vue.config.js配置文件中添加transpileDependencies将该插件的文件目录加入babel进行转换编译。

transpileDependencies: [
      /[/\\]node_modules[/\\]vuejs-datepicker[/\\]/
]

• 参考地址

2. IE9

• 情况

  vuejs-datepicker插件在ie9下出现“btoa”未定义。导致整个项目在ie9下报错，页面空白。

• 原因

  插件中使用了btoa编码，但ie9及以下并不支持。

• 解决办法

  检查了插件源码，该编码只有一个地方用到并且只用于map文件。于是决定在找不到btoa编码的情况下使用其他编码，以下代码加在全局下。

if(!window.btoa){
    window.btoa = function(str){
        return encodeURIComponent(str)
    }
}

---

判断图片是否加载完成

• 应用场景：

  常配合加载动画使用，图片全部加载完成后移除加载动画。

let imageHost = `//www.xx.xx/image/`
let imageList = [
    'image1.jpg',
    'image2.png',
    ...
]
let promiseAll = [], img = [], imgLoadCompleted = false
imageList .forEach((item, index)=>{
    promiseAll[index] = new Promise((resolve) => {
        img[index] = new Image()
        img[index].src = imageHost + item
        img[index].onload = function () {
            resolve(img[index])
        }
    })
})
Promise.all(promiseAll).then((img) => {
    imgLoadCompleted = true
    console.log('img load completed')
})

---

get请求

• 情况

  如果参数中前后有空格，会被浏览器转译成+，可能会影响请求结果。

• 解决办法

  在传参时避免出现前后空格的情况。
  为了避免万一， 最好在发送请求时对参数进行统一的处理，使用trim方法去除前后空格。

  ---

Date

• 情况

  在不同的时区下，使用new Date()转换同一个日期会出现不同的时间戳。

• 解决办法

  如果需要一个固定的时间戳则传入时区。例如：

  new Date('Thu Sep 03 2020 00:00:00 GMT-0500 (北美中部夏令时间)').getTime()
  

  注意：在不考虑时区的前提下，日期格式最好使用yyyy/MM/dd（其他格式有兼容问题）。

  ---

Video

情况

video标签在安卓手机上是重灾区。

解决办法

• webkit-playsinline=“true”: 设置视频小窗口播放，在ios10中生效。
• playsinline=“true”: 设置视频小窗口播放，在ios微信浏览器内生效。
• x5-video-player-type=“h5”: 启用h5播放器（这是个坑，莫加）。
• x5-video-player-fullscreen=“true”: 设置全屏播放。
• x5-video-orientation=“portraint”: 设置全屏方向，landscape横屏，portraint竖屏，默认值为竖屏。

<video 
	class="video" 
	poster="./image/video.jpg" 
	src="./image/video.mp4" 
	muted="" 
	autoplay=""
	preload="auto" 
	playsinline="" 
	webkit-playsinline="" 
	x5-playsinline="" 
	x-webkit-airplay="true"
	controls="" 
	style="object-fit:fill">
</video>

	// 视频加载完自动播放
    video.addEventListener("canplay", function () {
        setTimeout(function () {
            video.play()
            // 高版本浏览器禁止了非用户手动触发的视频操作
            $('body').one("touchstart", function () {
                video.play()
            })
        }, 200)
    })
    // 微信下视频自动播放
    document.addEventListener("WeixinJSBridgeReady", function () {
        video.play()
    }, false)
    // 切换视频播放与暂停
    $('#playBtn').click(function(e){
        if (video.paused) {
            setTimeout(function () {
                video.play()
            }, 200)
        } else {
            setTimeout(function () {
                video.pause()
            },200)
        }
    })
    // audio音频同理

参考链接