寒假比赛总结(七) - 各种坑

前言在开发的过程中遇到了一些奇妙的坑。与其说坑,倒不如说自己以前从来没有遇见过或者考虑过这些东西。甚至其中某几个还曾一度被我认为是Bug。在查阅资料后发现那种设计还是有其道理的。1. 关于伪元素在比赛中用到伪元素的地方不多也不少,其实我认为伪元素的出现给开发带来了很多方便,代码也变得很干净整洁。因为伪元素并不是真正的元素,却又和真正的元素没什么差别。但是,伪元素也有其限制。现有需求如下图:因为头像右下角的相机在样式上是不变的,所以首选应该就是伪元素。于是我开始编写此代码:HTML:<img src="avatar.png" /> img { width: 83px; height: 83px; border-radius: 50%; position: relative; &::after { content: ''; position: absolute; bottom: 0; right: 0; display: block; width: 22.5px; height: 22.…

寒假比赛总结(六) - 关于使用到的一些从未遇见过的东西

前言此文章用于记录在寒假比赛的过程中遇到的一些需求及其解决方法。主要涉及到之前工作学习的过程中未遇见过的技巧。既是为了复现一遍以增强理解,也为了在以后需要的时候能够随时记起。1. 自定义单/复选框HTML单/复选框是由类型为Radio的Input元素实现的,但是这个类型的元素会形成一个小圆圈/小方框,并且随浏览器样式的不同而不同。如果需要自定义这些组件,我的解决方法是将Input元素本身隐藏起来,然后在外层添加一个<label>元素包裹Input,再添加一个Input的兄弟元素,这个兄弟元素就是自定义的,用于表示该组件被选中与否的元素。以下列出代码:HTML:<label> <input type="radio" v-model="value" value="value1" style="display: none" /> <i class="indicator"></i> </label> LESS:…

寒假比赛总结(五) - 基于现有解决方案实现背景虚化

前言我对目前比较成熟的背景虚化方案还不是很熟悉,但是这次比赛项目需要用到这个功能,具体体现在使用虚化的用户头像当作头像展示的背景,类似于下图:采用这种方法的好处就是在保证大体美观的情况下减轻研发量(因为减去了用户上传背景图片的功能)。解决方案1.基于CSS3的高斯模糊滤镜此方案具体实现就是类似于实现毛玻璃特效的blur()滤镜,通过叠加背景图片达到高斯模糊效果。此方案我最开始是在Lea Verou所著的《CSS揭秘》一书中发现的,并且作者最初也是为了实现毛玻璃特效使用了高斯模糊。之所以认为它可以用于实现这个需求,是因为其本质是背景图片模糊。过程建立一个容器,宽高指定,指定所需背景图片:HTML<div class="head-wrapper" :style="{background: `url(../../../static/images/${this.avatar})`}"> Less.head-wrapper { min-height: 161px; height: auto; width: 100%; position: relative; background-repeat: no-repeat !important; background-size: 80% !important; background-position:…

寒假比赛总结(四) - 重新认识'router-link'

前言接触Vue.js的时间有半年了,正式将Vue.js用于项目开发也有将近三个月了。Vue中有个<router-link>的东西比较有意思,这个组件里有很多很有意思的小细节当时没注意到,不过比赛项目正好又要用上这个东西。一个看似不起眼的需求我们的比赛项目采用的布局是目前流行的APP布局,即:顶部一个Panel,中间是内容,底部是一个两个或两个Logo以上的Tabbar,用于不同功能之间的切换。而问题出在这个被激活的Tabbar元素上:这个匹配到当前路由的Tab需要被点亮,就像下图:因为我这边Tabbar采用的是Flexbox布局,然后每个元素用一层<router-link>包起来,然后分别跳转到各自匹配的路由上去。但是如何将匹配到的Tab点亮呢??绞尽脑汁想了很久,还是没有一个比较完美的解决方案,期间想过Vuex,想过在data中绑定,但是每个想法都十分麻烦。发现ActiveClass突然想起一个月前在观看慕课网上一个Vue.js高仿饿了么的视频,里面貌似用过这个东西,好像是顶部的Tabbar,也是匹配了不同的路由,当点击其中一个时,文字变红,底部多了一个红色的下划线,切换另一个时,另一个变成上述状态,先前那个恢复原状。于是赶紧翻开视频,发现讲师演示代码的时候没有过任何与之相关的代码编写,当其在Chrome中展示的时候,发现被激活的Tab的<a&…

寒假比赛总结(二) - 解决前后端分离模式下前端与后端文件交互的问题

前言我所在的产品项目组的核心功能就是图片上传,但是同时在用户发布之前还能删除任意图片。之前我已经了解到input的File List对象是只可读,不可写的。这就让我十分尴尬,想了很多办法,包括克隆数组,删除图片就标记一下,甚至是通过将图片Base 64编码直接放进数组里显示(实践证明如果图片太大,其Base 64编码也会非常非常长,长到一种无法想象的地步,此时浏览器也将会行走在崩溃的边缘QAQ),等等,一周前又需要修改图片的方向,所以上传时仅仅依靠input的FileList对象时完全不靠谱的。于是我又参考了其他大神的作品,发现其中很多人采用了Blob URL来展示图片。关于Blob引用MDN上对Blob构造函数的阐述:Blob 对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。File 接口基于Blob,继承了 blob的功能并将其扩展使其支持用户系统上的文件。Blob类型通常用于处理大文件,同时提供一个URL,指向浏览器内存中的某个文件,并且具有和普通文件一样的接口。如何与后端接口进行交互于是我想到直接将Blob URL传给后端,但是后来发现这个URL只对浏览器当前标签页有效,所以直接将这个URL给后端时绝对不可行的。这个方法展示图片虽然能很简单地执行修改和删除,但是如何传给后端却是个很大的问题。经过几番查找资料,终于在StackOverflow上找到了一个能解燃眉之急的方案:https://stackoverflow.com/questions/14952052/convert-blob-url-to-normal-url这个问题被采纳的答案中有这么一句话:It is…

寒假比赛总结(一) - 解决HTML移动端竖拍照片旋转90度的问题

前言在这次寒假比赛中遇到了许多坑,有些坑堪称奇葩,比如说下面这个比较神奇的坑:HTML5中类型为file的input元素在上传图片,展示出来后,某些手机竖拍的照片会逆时针旋转90度的问题。概述发现这个bug大概在一周前,因为我们这个比赛项目需要用户上传图片,并能在发布之前预览。在预览的时候发现竖着拍的照片居然都旋转了90度!于是Google之,发现基本上所有机型手机的相机都存在这个问题(我当时用于测试的手机是小米Note3 MIUI 9,期间也尝试过iPhone、iPad等机型,均发现此问题)。导致旋转90度的原因大概是HTML自动将旋转角减去了90度。解决问题用到的工具/库要解决这个问题,首先需要读取照片的旋转角度(Orientation),而EXIF.JS可以读出照片的旋转角度:我拿了一张用小米Note3的相机拍摄的照片测试,根据EXIF.JS读出的信息得出这张图片的方向角度是90度。思路其实用EXIF.JS读出来是一堆tags,从tags中找到Orientation的值,如果图片的方向是90度,那么Orientation的值就为6。所以,我们只需要在拿到图片之后放进EXIF.JS里判断一下Orientation的值是否为6,如果为6,那么就将图片绘制到一个隐藏的Canvas里,再使用Canvas的rotate API进行旋转,最后再将修改好的图片输出。步骤在Webpack项目中安装EXIF.JS:npm install exif-js --save 在项目中引入EXIF.JS:import…

HackWeek踩坑记(1) - 移动端H5适配

开篇 有幸参加了2017年南昌大学家园工作室举办的为期两周的黑客马拉松(Hack Weeks)。其实我很想通过类似的活动提升自己的能力。只不过当我真正参与到项目的开发中,才会发现,自己还是太年轻! 本系列文章记录了我在参与整个团队协作过程中遇到的问题和心得体会,其内容将会涵盖前端开发、UI设计原则、SQL语法、服务器配置以及如何高效地进行团队协作等方面的内容。 第一个坑:移动端适配与视觉稿的呈现 可以说在这次Hack Week活动中折磨我最久的就是视觉稿。因为我以前并没有移动端适配和根据视觉稿来编写UI的经验,所以,当我拿到设计师给我的视觉稿时,其实我是一脸懵逼的。对视觉稿使用的不熟练以及移动端适配经验的缺失,成为在后来的两个星期中,不断折磨我的梦魇,也出于这些原因,给设计师带来很大的麻烦。因此,我深感自己的能力不足,尤其是移动端H5页面制作方面的知识,亟待补充。 今天我们的项目终于完成了调试工作,趁此机会赶紧补习了移动端适配的方案。 在下面的文章中,我将参考使用Flexible实现手淘H5页面的终端适配学习移动终端H5适配 几个概念 物理像素(Physical Pixel) 物理像素又被称为设备像素(Device Pixel),他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。 举例:iPhone 6的dp为 750 × 1334 设备独立像素(…

JavaScript获取URL参数值的方法

情景 GET类型的URL参数以?开始,以&分割每组类似于键值对的参数名和参数值,例如: http://localhost:8080/test.php?user=lenconda&action=logout 针对这一个URL,我们提出要通过JavaScript取出user参数的值。 基于JavaScript的实现 我们有两种方案:1.使用传统的if和for语句进行判断;2.使用正则表达式提取想要的值。 预备知识 window.location.search 这个方法可以让我们获取到当前URL的所有参数的字符串形式,例如在本里中,使用此方法返回的值为 ?user=lenconda&action=logout substr() 此方法最多接受两个参数:m和n,m表示截取字符串的起始位置,n表示截取字符串的长度。当n省略时,默认截取到字符串末尾处。在本例中,我们要去掉“?”,所以代码应该是这样的: window.location.search.…