笔记
目标与意义
记录在开发过程中遇到的各种问题及其解决方案，也希望能帮助其他开发者解决类似的技术难题。
笔记内容结构
笔记内容分为两个主要部分：
- 前端部分：涵盖 HTML、CSS、JavaScript 及相关的前端框架和库（如 React、Vue 等）。包括开发中的常见问题、技巧和解决方案。
- 后端部分：涉及服务器配置、数据库管理以及后端技术栈（如 Node.js、Koa、MySQL 等）。提供后台开发过程中遇到的各种问题的解决方案。
...小于 1 分钟
...小于 1 分钟
Mac 系统配置本地https服务 手机可访问不报安全提醒
安装 mkcert
brew install mkcert
...大约 1 分钟
...大约 2 分钟
PWA Web App
PWA 将 Web 的普适性与原生应用的功能结合，提供了一种灵活、轻量、高效的应用方式。对于希望降低开发成本、提高用户覆盖率的企业和开发者来说，PWA 是一种极具吸引力的选择。
- 跨平台兼容：一次开发，适用于多个平台（桌面、移动设备等），自动适配不同尺寸屏幕。
- 无缝更新：后台自动更新，不需要用户手动操作，提供无中断的用户体验。
- 离线可用：利用 Service Worker 缓存内容，支持离线访问和渐进增强。
- 推送通知：支持 Web 推送通知，保持与用户的实时互动，吸引用户回访。
- 轻量高效：无需下载和安装，节省存储空间，启动速度快。
- 安全：在 HTTPS 下运行，确保数据传输安全，受益于浏览器的安全措施。
- 搜索引擎优化：被搜索引擎索引，提升应用可见性和加载速度。
- 应用图标和界面：可添加到主屏幕，自定义启动页面和主题颜色，提供原生应用般的体验。
- 开发和维护成本低：使用统一的 Web 技术栈，降低开发和维护成本，代码库复用高。
- 离线访问: 可以在断网情况下继续访问应用
- 响应式设计: 适配各种设备尺寸和屏幕方向
- 添加到主屏幕: 用户可以将应用添加到桌面，像原生应用一样启动
- 推送通知: 可以发送推送通知提醒用户
...大约 3 分钟
uni-app 开发微信小程序
使用Vue3 框架快速进行小程序开发
签名类型，默认为 RSA，仅支持 RSA 这个特重要一定要提前确认好
...大约 2 分钟
Vite
新一代的前端构建工具
核心原理
Vite其核心原理是利用浏览器现在已经支持ES6的import，碰见import就会发送一个HTTP请求去加载文件。
Vite启动一个 koa 服务器拦截这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再以ESM格式返回给浏览器。
Vite整个过程中没有对文件进行打包编译，做到了真正的按需加载，所以其运行速度比原始的webpack开发编译速度快出许多！
特点
- 快速的冷启动：采用No Bundle和esbuild预构建，速度远快于Webpack
- 高效的热更新：基于ESM实现，同时利用HTTP头来加速整个页面的重新加载，增加缓存策略：源码模块使用协商缓存，依赖模块使用强缓；因此一旦被缓存它们将不需要再次请求。
- 基于 Rollup 打包：生产环境下由于esbuild对css和代码分割并使用Rollup进行打包
...大约 3 分钟
...大约 7 分钟
Github Actions 自动部署前端项目
简介
GitHub 提供的一种持续集成（CI）和持续部署（CD）工具，可以帮助开发团队自动化构建、测试和部署应用程序。
开始使用 GitHub Actions
...小于 1 分钟
react 组件封装
水印组件封装
使用 Canvas 生成水印，并使用 MutationObserve （可以监听 DOM 结构变化的接口）监视 DOM 的变动，使得水印不可被删除、且属性不可被修改
源码如下
import * as React from "react";
import { watermark } from "../../utils/watermark";
export default class WaterMark extends React.Component {
constructor(props) {
super(props);
this.container = null;
}
componentDidMount() {
const { style, ...options } = this.props;
watermark({
container: this.container,
...options,
});
}
render() {
const style = {
position: "relative",
...this.props.style,
};
return (
<div ref={(el) => (this.container = el)} id="watermark" style={style}>
{this.props.children}
</div>
);
}
}
...大约 2 分钟