这是我参与更文挑战的第4天，活动详情查看：更文挑战
近期开发中处理的小问题记录：
1. 随机电话号码
需求：
生成随机电话号码，并单行滚动展示（如下图）。
实现：
随机电话号码：
function generateRandomPhoneNumber() {
const numbers = ["139", "138", "137", "136", "135", "134", "159", "158", "157", "150", "151", "152", "188", "187", "182", "183", "184", "178", "130", "131", "132", "156", "155", "186", "185", "176", "133", "153", "189", "180", "181", "177"];
const prefix =
numbers[parseInt(Math.random() * numbers.length, 10)];
const suffix = Math.random().toString().replace("0.", "").slice(0, 4);
return `${prefix}****${suffix}`;
}
滚动效果：
$flippedLine: 50; // 总行数
$perSpeed: 2; // 每行停留时间
$flippingSpeed: 0.3; // 翻页时间，单位秒
@keyframes flipped {
@for $i from 1 through $flippedLine {
#{$i/$flippedLine*100-(100/($perSpeed*$flippedLine)*$flippingSpeed)}% {
transform: translateY(-($i - 1) / $flippedLine * 100%);
}
#{$i / $flippedLine * 100}% {
transform: translateY(-$i / $flippedLine * 100%);
}
}
}
.phone {
animation: flipped $flippedLine * $perSpeed * 1s linear infinite;
}
2. CSS: 虚线、半圆、三角
需求：
虚线、半圆、三角
实现：
- 虚线使用传统的
border: 1px dashed #000;无法达到UI稿的效果，虚线长度和间隔无法调节。于是使用渐变背景的方式来实现，可以自定义长度和间隔。
.dashed {
width: 100%;
height: 1px;
background-image: linear-gradient(90deg, #c4ae78 60%, rgba(255,266,0) 0);
background-size: 7px 1px;
background-repeat: repeat-x;
}
- 半圆和三角都很常规
.semicircle {
height: 14px;
width: 7px;
border-bottom-right-radius: 14px;
border-top-right-radius: 14px;
background-color: #dc4a4a;
}
.triangle {
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #fff;
}
3. iPhone X 小黑条
需求：
在 iPhone X 底部留出小黑条的空白，顶部留出刘海屏的位置，避免内容被挡住。
相关概念：
安全区域： 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：
viewport-fit：
iOS 11 之后的版本，苹果公司针对 iPhoneX 适配增加了一个 viewport meta 标签的扩展：viewport-fit。用于设置网页在可视窗口的布局方式，可设置三个值：
- contain: 可视窗口完全包含网页内容（左图）
- cover：网页内容完全覆盖可视窗口（右图）
- auto：默认值，跟 contain 表现一致
env() 和 constant()：
iOS 11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
- safe-area-inset-left：安全区域距离左边边界距离
- safe-area-inset-right：安全区域距离右边边界距离
- safe-area-inset-top：安全区域距离顶部边界距离
- safe-area-inset-bottom：安全区域距离底部边界距离 （小黑条的距离）
注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它。
实现：
- 增加viewport-fit属性
<meta name="viewport" content=viewport-fit=cover" />
- 根据需求设置css值
.fixedbtnCpt {
height: calc(54px + env(safe-area-inset-bottom));
padding: 0 12px env(safe-area-inset-bottom);
}
4. OSS文件上传问题：
问题：
OSS上传视频，大于100m的视频上传后无法播放。
定位过程：
首先定位到用户上传的视频url带了uploadId参数，与普通上传的url不一样，于是改为去掉了参数直接访问 域名+视频路径。
但测试后都还是有问题，于是联系了阿里云的人协助。（其实这里已经解决了反馈的问题，但引发了一个新的问题。）
对方首先告知：如果配置了不缓存，我们会限制单个请求大小为100MB。
查看上传请求发现request headers 里包含了 cache-control: no-cache ，导致该文件没有使用缓存，每次请求访问文件时都回源，文件太大又导致了没有拉完整的 moov 头，所以播放失败。
检查代码没有任何地方设置no-cache，查看文档也没有地方对cache有默认设置。
最后发现是由于上传时打开了Chrome开发者工具，选中了disable cache，自动对所有请求加上了no-cache的属性，导致文件被标记为不缓存。
解决方法：
调用上传api时，将headers设置为public或其他，允许缓存。
