一、移动端白屏及兼容问题(仅只在微信公众号运行过,其他浏览器情况未知)
-
ios8.x版本flex布局兼容问题
需加上-webkit-前缀 -
低版本手机es6兼容问题,ie兼容问题,以及ios低版本页面白屏
npm install --save-dev babel-polyfill
// main.js中引入
import "babel-polyfill";
// webpack.base.conf.js文件中修改
entry: {
app: ['babel-polyfill', './src/main.js']
}
- vue-cli项目config/index.js文件,sourceMap导致ios9.x版本访问白屏,解决方法
productionSourceMap: false
- npm安装依赖导致的白屏
npm6.9.0
下载包,打包项目后会导致ios9.x版本访问白屏
使用npm6.4.1
版本,再指向淘宝镜像,重新下载安装包,在build完美解决
二、其他踩坑集锦
-
ie浏览器、ios设备
new Date('2020-05-20 20:20:20').getTime()
日期时间戳获取NAN问题
日期需要以 ‘/’ 符号拼接,如:2020-05-20 20:20:20 需改为 2020/05/20 20:20:20,再进行时间戳转换 -
前端对接网易七鱼客服踩坑:
ysf('config', {
uid: '' // (若没有uid,则传空字符串'', 若传null会导致七鱼获取访客用户信息异常)
})
- 安装sass-loader后报错:TypeError: this.getOptions is not a function
解决办法:卸载旧版本,安装符合的版本,经测试以下版本解决,其他版本可自行测试
"node-sass": "^4.14.1"
"sass-loader": "^8.0.2"
- ie浏览器 button子元素无法触发点击事件
不使用button按钮,或将需要点击的子元素放button外 - ie浏览器使用new FileReader()下载blob文件报错:传递给系统调用的数据区域太小
let blob = res;
// ie blob文件下载
if(navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(new Blob([blob], { type: 'text/csv;charset=utf-8;' }), 'filename.xls')
} else {
const fileReader = new FileReader();
try {
fileReader.readAsDataURL(blob);
} catch (err) {
}
// 读取文件成功
fileReader.onload = (event) => {
let a = document.createElement('a');
let _fileName = 'filename.xls';
a.download = _fileName;
a.href = event.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
// 读取完成(成功/失败)
fileReader.onloadend = (event) => {
console.log('onloadend')
}
}
三、实用技巧合集
- 华为云OBS文件上传文档 部分参数用法及demo比官网更详细
- 各种echarts图表案例 非常多比官方丰富的特殊echarts图表
- linux服务器使用pm2运行egg.js项目
项目根目录创建server.js文件,放入以下代码,执行命令pm2 start server.js --name egg-service
// server.js
const egg = require('egg');
const workers = Number(process.argv[2] || require('os').cpus().length);
egg.startCluster({
workers,
baseDir: __dirname,
});
- git代码重置
// 查看版本号
git log
// 重置到该版本 (5f9e8d91eb7433f6a5f94ffcebc3dd6dc7f528af为要重置的版本号)
git reset --hard 5f9e8d91eb7433f6a5f94ffcebc3dd6dc7f528af
// 强制推送到远程,不会生成记录 (branch-name为分支名)
git push origin branch-name --force
- vue接入高德地图
<div id="location-map" ref="locationMap"></div>
import AMapLoader from '@amap/amap-jsapi-loader';
AMapLoader.load({
key: '608d75903d29ad471362f8c58c550daf', // 官方案例中提供的key,也可改成自己注册的账号的key
version: '1.4.2',
plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map(this.$refs.locationMap, { //设置地图容器id
viewMode: '2D', //是否为3D地图模式
zoom: 14, //初始化地图缩放级别
center:[113.39677,23.04523], //初始化地图中心点位置,这需要填公司的经纬度
}).add(new AMap.Marker({
map: this.map,
position: [113.39677,23.04523], // 和上面的center 一样的
offset: new AMap.Pixel(0, 0),
// icon: new AMap.Icon({
// size: new AMap.Size(40, 50), // 图标尺寸
// image: MarkIcon, // Icon的图像
// imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量
// //imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片,一般不用
// }),
}));
}).catch(e=>{
console.log('map err', e);
})