Access-Control-Allow-Private-Network
https://wicg.github.io/private-network-access/#cors-preflight

背景

最近接了个需求，需要在用户非正常的退出我们业务流程的时候弹窗收集点信息。要求不高，就是用户点返回键退出到流程首页的时候弹窗。本以为很快的就能实现，没想到遇到了点坑，所以记录下实现的过程。

检测网页关闭的api

一开始我记得有个检测网页退出的事件，想着能不能通过监听这个事件来实现这个功能。查了下是onunloadmdn事件，发现这玩意儿不好用，一是不能自定义弹窗,
二是还有个巨丑的标题。没得办法，只能找其他方法了。

前言

http协议是基于tcp协议之上的应用层协议。当今被广泛的应用在互联网的各个领域，更是前端行业里最主要的通讯协议了，作为一个前端同学应该好好的了解下http的，无论是面试还是日常工作都是需要用到的。

HTTP1.1

http1.1应该是目前应用最广泛的协议了，顺手打开几个网站，在控制台里看了下，目前基本都还是http1.1。http1.1是从http1.0发展而来，主要加入了新的缓存控制，Host和长链接，和其他的一些改进。http1.1的请求报文还是文本的格式，而且比较简单。http1.0没啥人用了，就不讲了。

note

搭建一个hexo-blog来记录自己学习的知识，方便以后复现

BuildContext相关知识点

flutter里经常要用到这个额buildContext，而且一部小心就用翻车了。比如明明有context但是路由跳转就是报错，这里记录下问题吧。

of操作

在flutter里使用Navigator.of(context) 这种api的时候，这个of操作其实是根据context向上寻找NavigatorState，所以我们要拿到Navigator下面的context才能找到NavigatorState，进而调用上面的各种方法。MediaQuery, Scaffold 都是这个样子的。所以在MyApp里存一个全局context不一定能去跳转路由。 只有在Navigator组件下面的buildContext才行，MaterialApp在构建的时候，内部会使用Navigator， 所以在onGenerateRoute 返回的Route里的context可以拿来跳转。

FractionalTranslation使用百分比来做动画

最近遇到一个从底部弹窗出来的需求，但是弹窗高度是根据child组件的高度确定的，不是很好动态计算，翻CupertinoPageRoute的源码，看他是咋做的，就发现这个SlideTransition组件，里面使用FractionalTranslation来做动画的，支持百分比，刚好适合我的需求。

1
2
3
4

FractionalTranslation(
        translation: Offset( 0.0, _animation?.value),
        child: Container(),
      );

使用起来很简单，没啥可说的，实现还没研究，日后研究了再补上，先记录下有这么个好用的组件。

ShaderMask 可以给子组件加上渐变色

渐变色文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

class GradientTitle extends StatelessWidget {
  final Gradient gradient = LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      stops: [0.5, 1],
      colors: [Color(0xffffffff), Color(0xddffc7c7)]);
  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        return gradient.createShader(bounds);
      },
      blendMode: BlendMode.srcATop,
      child: Text(
        "渐变色文字",
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 36.0.w,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

1. stops和颜色的个数是对应的

2. bendMode是混合模式，dst代表子组件，src代表shader(记不住的话，可改变代码确定对应关系)。将src与dst进行组合，但只组合src和dst重合部分，不重合部分显示dst

babel

babel插件太多了，但是又不是经常需要配置这个，时间久了总是容易忘记啥插件干啥，记录一下。

transform-runtime作用

babel转义的时候，对新的api的处理方式是引入pollyfill， 但是pollyfill会有一些重复的helper函数和需要额外的导入一个regenerator-runtime/runtime.js依赖， transform-runtime可以自动导入这个包和合并一些重复的helper函数。我们可以手动验证一下

前言

在webgl里，要画出3d模型的话需要用到很多新的概念。第一个比较重要的概念就是相机，《webgl编程指南》这边书里在开始讲3d的时候直接提供lookAt函数来实现相机功能，但是并没有讲的很详细。由于不想不明不白的直接使用现成的函数，所以在网上搜罗资料整理了本文，总结下来方便以后学习。

模型矩阵，视图矩阵，投影矩阵

要实现相机，首先得知道三个概念，模型坐标系 ，世界坐标系，摄像机坐标系， 首先模型坐标系是比较简单的，是模型所在空间的坐标系, 通常在模型内部，就是简单描述模型的各个部分的坐标，可以通过简单平移变换将模型坐标系的原点和世界坐标系的原点重合

文档丢了，暂时不补了 求投影 $\vec{v_h} = \vec{n} \cdot \vec{v} \cdot \vec{n}$

后面有再学习的时候再补上文档吧

vec2的运算

$\begin{bmatrix} f_x & f_y & f_z\end{bmatrix}$