前端日常（项目里踩过的坑总结）

• 页面截屏保存图片

截屏工具：html2canvas

//具体使用
 import html2canvas from 'html2canvas';
//建议使用ES6的promise作处理
 html2canvas(document.getElementById('save_img')).then(function (canvas) {
//处理canvas转图片并作保存

                });

转图片与保存，一开始用手动封装的 base64Img2Blob与downloadFile，如下:

//转图片文件
function base64Img2Blob (code) {
  var parts = code.split(';base64,');
  var contentType = parts[0].split(':')[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);
  for (var i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], {
      type: contentType
  });
}
//手动下载
 function downloadFile (fileName, content) {
  var aLink = document.createElement('a');
  var blob = base64Img2Blob(content); //new Blob([content]);
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  var event = document.createEvent('MouseEvents');
  console.log(event);
  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  aLink.dispatchEvent(event);
}
//引用 downloadFile
...   
.then(function(canvas){
   downloadFile(Math.random() + '.png',canvas.toDataURL("image/png"));
})

电脑端调试没毛病，但是端上调试，显示未知文件，下载不了。
后续解决下载问题，使用FileSaver.js（github地址）这个插件：

canvas.toBlob(function (blob) {
     saveAs(blob,  Math.random + '.png');
});

• 后台接口给的json字符串用JSON.parse转对象报错

原因：字符串内带转义字符\，在后台不愿意修改的情况下，前端使用了new Function进行转换
let json = (new Function("return " + string))();

• IE8浏览器 Ajax跨域问题

项目中遇到的一个坑，ie8因为Ajax跨域限制无法下载文件，改为 window.open(url)也同样报错，最后改为window.location=url，才成功下载（需要搭配修改浏览器设置，internet选项=》安全=》自定义级别=》其他=》通过域访问数据源，设置为启用或者提示，hehe~）
算了，太麻烦，改了还不如不改，最终发现使用a标签href直接请求没有问题也无需修改浏览器配置。
如果为数据请求接口，可以参考参考链接1或者升级浏览器。
原因描述参考链接参考链接2

• vue项目路由访问时页面空白：

检查配置的访问路由是否多了不该多的东西，比如空格...

生无可恋.jpg

• 手机端输入框被软键盘遮挡问题：

//当鼠标获取焦点后反复执行
 function docmentScollResize() {
    setTimeout(function () {
        var inputTextBox = document.getElementById('input');
        inputTextBox.scrollIntoView(true);
    },100)
}

• JavaScript中的Date对象在Safari与IOS中的“大坑”：

无法有效识别以“-”组成的日期字符串

即根据字符串获取日期时，例如var date = new Date("2016-05-31 08:00")，在Firefox、Chrome中正常运行，但是Safari就报错NaN。

解决方法是改成以“/”组成的日期字符串格式，如
var date = new Date("2016/05/31 08:00")

dateString.replace(/\-/g, "/");

• vue项目中，post请求体，服务器解析中文乱码问题：

在axios的请求拦截器中设置contentType为application/x-www-form-urlencoded;并设置charset为UTF_8；

axios.interceptors.request.use( config => {
   if(config.method = "post") {
       config.headers = Object.assign(config.headers || {}, 
{"Content-Type": "application/x-www-form-urlencoded;charset=UTF_8"})
    }
})

参考链接:
get/post请求中文乱码问题及最佳解决方案
vue--axios请求头设置传输编码格式+

• 在vue项目中使用canvas，报错：【TypeError: Cannot read property 'getContext' of null"】，

原因：是在html加载之前就运行了js，即vue的生命周期函数必须为beforeMount之后才能获取canvas元素。

• 解决移动端底部点击弹框后，页面滑动至顶部问题，解决手机端弹框后底部页面滑动问题：

1、参考：解决移动端弹框后底部页面可滑动问题，解决手机端弹框后底部页面滑动问题

2、弹框后直接滑倒顶部问题：直接在父级添加属性over-flow:auto;
（朋友实践经验=.=，仅供参考）

• 微信小程序的input输入框设置

input不设置type属性，输入emoji表情后，e.detail.value = undefined；

设置（type="text"）后，输入emoji表情第一次读取正常，无修改的二次读取会报undefined，建议第一次读取时将值保存，避免二次读取
（第一次开发小程序遇到的坑，仅供参考）

• electron-vue项目初始化报错，ReferenceError: process is not defined（参考链接）

在.electron-vue/webpack.web.config.js和 .electron-vue/webpack.renderer.config.js 里修改 HtmlWebpackPlugin :

...
new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),
...