最近做了一个移动端项目,使用了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图片预览插件导致打包后在某些浏览器打开直接白屏,不兼容,打包文件出错