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
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音频同理
参考链接