前端踩坑及经验汇总

一、移动端白屏及兼容问题（仅只在微信公众号运行过，其他浏览器情况未知）

1. ios8.x版本flex布局兼容问题
   需加上-webkit-前缀

2. 低版本手机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']
}

3. vue-cli项目config/index.js文件，sourceMap导致ios9.x版本访问白屏，解决方法

productionSourceMap: false

4. npm安装依赖导致的白屏
   npm6.9.0下载包，打包项目后会导致ios9.x版本访问白屏
   使用npm6.4.1版本，再指向淘宝镜像，重新下载安装包，在build完美解决

二、其他踩坑集锦

5. ie浏览器、ios设备new Date('2020-05-20 20:20:20').getTime()日期时间戳获取NAN问题
   日期需要以 ‘/’ 符号拼接，如：2020-05-20 20:20:20 需改为 2020/05/20 20:20:20，再进行时间戳转换

6. 前端对接网易七鱼客服踩坑：

ysf('config', {
	uid: ''	// (若没有uid，则传空字符串'', 若传null会导致七鱼获取访客用户信息异常)
})

7. 安装sass-loader后报错：TypeError: this.getOptions is not a function
   解决办法：卸载旧版本，安装符合的版本，经测试以下版本解决，其他版本可自行测试
   "node-sass": "^4.14.1"
"sass-loader": "^8.0.2"
8. ie浏览器 button子元素无法触发点击事件
   不使用button按钮，或将需要点击的子元素放button外
9. 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')
	        }
		}

三、实用技巧合集

10. 华为云OBS文件上传文档 部分参数用法及demo比官网更详细
11. 各种echarts图表案例 非常多比官方丰富的特殊echarts图表
12. 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,
});

13. git代码重置

// 查看版本号
git log
// 重置到该版本 （5f9e8d91eb7433f6a5f94ffcebc3dd6dc7f528af为要重置的版本号）
git reset --hard 5f9e8d91eb7433f6a5f94ffcebc3dd6dc7f528af
// 强制推送到远程，不会生成记录 （branch-name为分支名）
git push origin branch-name --force

14. 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);
})