项目总结壹（皮肤管家）

上周完成了公司猫迹商城的新需求—“皮肤管家”，中间遇到了几个坑；

1、rem误差问题

2、苹果手机拍照上传图片翻转问题

3、swiper加载报undefined问题

4、@keyframes保留动画最后一帧的问题

5、安卓机上传不了图片

==>    rem问题：

rem单位转换成px单位时，在不同的手机设备上存在差异，在苹果手机上，能正常显示宽高大小，但是在安卓机上（测了小米、oppo和华为）都存在变形。特别是当设置的宽高小于1rem时，这种误差对视觉还原的影响就很明显了。最后的解决方法，是对这些对微差要求敏感的标签单独处理，直接用px单位給值。

==>  苹果手机拍照上传图片翻转问题

项目中，需要通过input的file属性标签调用change事件上传图片，并将选中的图片转换为base64格式，通过ajax请求发送給后台；图片的上传方式分为两种，一种是直接在相册里面选，第二种是调用手机相机拍照之后上传；最后在测试时，发现苹果手机直接拍照上传，发现上传给后台的图片却是翻转的，在安卓机上和从相册上直接选择图片上传却都是正常的，最后的解决方法是在npm库下载exif.js插件解决苹果手机拍照上传翻转问题。其插件解决的思路是：因为每张图片包含很多图片信息，其中就包括图片的方向，而exif.js插件封装了判断图片方向的方法，因此我们可以很方便的知道了图片被翻转的角度，最后再通过画布canvas的方法对图片进行还原。

==>  swiper加载报undefined问题

在项目中，有一个功能需要用到swiper插件，即当我点击当前图片时，会弹出轮播窗口，并定位到当前图片位置。然而当我按照官方文档介绍进行引用时，却发现点击弹出窗口，轮播窗口能正常显示，然而却不能定位到指定位置的图片（这里使用了swiper插件的方法：swiper.slideTo(picID,2000,false)），调用后台调试工具console，发现报swiper为undefined错误。最后排查了一个早上的坑，才发现是Vue的DOM加载问题：因为我在项目中弹窗的控制是通过v-if语句控制，然而开始v-if为false，此时弹窗并未编译渲染到当前页面结构，因此computed执行时，并未找到swiper内容，所以执行方法this.swiper.slideTo()报错，最后解决的方法是把v-if改为v-show解决。

==>   @keyframes保留动画最后一帧的问题

在定义animation动画时，keyframes定义的动画在没有设置循环效果时，其一般执行一次就会停止，并回到dom默认设置的样式，因此如果需要保留动画最后一帧的效果，需要添加animation-fill-mode：forwards。

==>  安卓机上传不了图片

最开始，我的input写法是： ，然而测试的时候，却发现苹果手机能正常上传图片和调用拍照功能，而安卓手机却不行，后面百度知乎，将其改为却发现神奇的可以了....