贝塞尔曲线在前端的应用
贝塞尔曲线介绍贝塞尔曲线（Bezier Curve）在计算机图形领域应用非常广泛，比如我们熟知的 CSS 动画、 Canvas 以及 Photoshop 等都可以看到贝塞尔曲线的身影。 百度百科：https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769?fr=ge_ala css中的时间函数css3的transition和animation可以实现动画效果，二者都支持贝塞尔曲线。CSS动画过渡时间函数是三阶贝塞尔曲线。动过时间函数，我们在用transition和animation做动画时，可以控制从起点到终点之间的值随时间的变化，如线性变化，先快后满，等等。 CSS animation-timing-function 属性 https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp CSS transition-timing-function属性 https://www.w3schoo...
JS颜色处理
主题切换平时我们开发时，颜色一般写在css里，用less或者sass预处理器的话，还有变量和函数功能，可以设置一个主题色，再利用lighten函数和darken函数得到一系列设置，非常方便不同的主题处理。 SCSS切换主题预处理器是在编译阶段执行，我们如果想要动态切换主题的话，需要编译生成多套主题css文件，然后动态加载覆盖，实现起来比较麻烦。之前我们一般用webpack-theme-color-replacer这个包来做。 但是这样只能实现预设编译好的主题直接互相切换，如果要添加新的颜色，就要先重新编译一套主题css文件。 CSS变量切换主题后来css有了原生的变量，我们也可以通过js去修改css变量来实现这一功能。 element-plus主题设置，scss变量方式和css变量方式 element-plus因为用css变量实现了主题设置，切换主题只需要动态设置css变量即可。 123document.documentElement.style.setProperty('--primary-color', 'red');documen...
unplugin-auto-import优化项目依赖
前端项目中，模块化管理可以方便我们管理代码，但是有些公用的依赖项需要在每个页面和组件重复引入，较为繁琐。尤其是中台项目，每个页面都要引入一堆UI框架的组件。我们可以通过配置插件来实现自动引入，这样用的时候直接就能用，代码上方少了一堆依赖看着也清晰不少。 自动依赖的实现是通过一个unplugin-auto-import的插件。 官网：https://unplugin.unjs.io/showcase/unplugin-auto-import.html github：https://github.com/unplugin/unplugin-auto-import 插件支持vite、webpack、rollup等打包工具。下面以vite为例。 插件安装与引入1npm i -D unplugin-auto-import 123456789101112import AutoImport from 'unplugin-auto-import/vite';import { defineConfig } from 'vite'...
小程序返回拦截实现
my.enableAlertBeforeUnload方法（2.7.17）文档：https://opendocs.alipay.com/mini/api/my.enableAlertBeforeUnload my.enableAlertBeforeUnload 开启小程序页面返回询问对话框。调用后，当用户尝试从小程序当前页面返回上一页面时会弹出对话框。 在小程序写A/B/C三个页面，A放一个跳转B按钮，B放一个跳转C按钮。 在B页面代码如下： 12345678910111213141516171819Page({ data: { }, onLoad (query) { my.enableAlertBeforeUnload({ message: '测试返回拦截', success: function(res) { console.log(res); }, fail: function(err) { ...
基于ali-oss开发图片上传小工具
ali-oss sdk(nodejs版)：https://help.aliyun.com/zh/oss/developer-reference/getting-started-with-oss-sdk-for-node-js?spm=a2c4g.11186623.0.0.e1137efd32AoVH 背景之前在海星server基于ali-oss的nodejs sdk，做了oss上传下载文件的接口，并基于上传接口做了一款网页版的上传工具， 界面如下： 平时上传一些图片等静态资源还是很方便的。但是有个问题是上传之后看不到当前的目录结构和历史上传的文件，替换文件的时候要记得文件路径去拼写。 为了解决上述问题，仔细查询文档后，发现有查询目录的api，实现了一个2.0版，界面如下： sdk相关方法 查询目录: client.list方法，传入路径，列举制定前缀的文件，返回当前路径的文件列表和子目录列表。 删除文件：client.delete方法删除单个文件。 上传文件：client.put上传本地文件。oss中没有目录的概念，上传路径的/当做逻辑上的目录划分。 下载文件：...
Automa插件使用
Automa是一个chrome扩展，通过拖拽0代码实现工作流，模拟网页的各种点击、表单填写等操作，使用时点击插件脚本一键执行，或者设置定时执行，从而简化我们的工作。 功能介绍官方文档地址：https://docs.automa.site/。 界面新建一个插件，界面如上图。 左侧面版有一些列组件可供选择 右侧画布区域可以放置组件，再把组件用线连起来。 点击组件，组件上方出现编辑、删除等按钮，点击编辑，左侧弹出组件配置区域。 右上方工具栏，其中table可以创建数据表，globalData可以编辑全局数据 设置里可以选择中文 常用组件插件提供了非常多的组件。有界面相关的，如点击元素、获取元素属性、获取元素文本、悬停元素、按键等等；有逻辑相关的，如条件、判断元素存在、循环等；有浏览器相关的，如激活当前活动标签页、新建标签页、前进、返回、刷新、截屏；等等。 这里介绍几个主要的组件： 触发器一个脚本以触发器开始，新建脚本默认会有一个触发器。编辑触发器，有编辑触发器和参数两个配置。其中编辑触发器，默认手动，可以换成下图的多种触发方式，可以按时间定时执行，也可以设置快捷键等。 可以添加...
小程序商家后台脚本实现批量添加域名
业务需求在多个小程序后台批量添加域名，每个小程序要添加几十个。需要重复如下操作： 点击图上添加按钮，出现弹窗。 在弹窗输入要添加的域名，点击确认提交。 弹出通知弹窗，再次点击确认。 重复上述操作，添加不同的域名 几十个域名*几个小程序，操作量有点大，考虑用脚本实现。 思路 考虑用按键精灵，发现mac不支持 考虑js脚本，仔细研究了ajax请求，在控制台ajax调用，设置了携带cookie，发现依然返回失败 考虑用js模拟真实操作 问题用js实现了上述过程，在输入框设置input.value=domain。实际执行每次输入域名后点击确认，输入框报红色校验错误，判断应该是用框架实现的页面，虽然修改了输入框dom上挂载的value，但是内存中的值没有改，代码直接读取内存的值，校验错误。 搜索vue和react模拟真实收入，发现有实现的方法，https://blog.csdn.net/weixin_46774564/article/details/123254550。 查看支付宝这个页面应该是react写的，在控制台可以看到react插件有...
前端项目中图标的使用和管理
在前端项目中，会用到很多小图标，这些图标很小，但是数量会很多，比如导航、按钮等等，其中很多在不同项目还会重复用到。 使用方式直接使用图片最简单的图片使用方式，就是UI给出的图片，在代码中使用img标签，或者background属性来引用。 引用的图片可以维护在项目本地，也可以放到cdn。 雪碧图直接使用图片，会有很多并发的网络请求，因此可以讲这些小图标合并成一张大图，通过background-position定位来展示不同的图标。这样多个请求合并成一个，优化了性能，但是使用和维护起来麻烦。 关于雪碧图的维护，我们可以通过插件在编译阶段解决，自动生成雪碧图，并且生成css文件，开发的时候，按照文件名的class命名去引用。 123456789101112131415161718192021222324252627282930313233343536373839//webpack.config.jsvar path = require('path'); var SpritesmithPlugin = require('webpack-spritesmi...
小程序本地iconfont工具开发
npm包：https://www.npmjs.com/package/miniapp-svg2iconfont github: https://github.com/ahao430/miniapp-svg2iconfont#readme 基于svgtofont开发。 背景： 平时小程序开发过程中，UI给的是一个个的svg，没有系统的iconfont维护。小程序端使用iconfont的话，首先要上传维护iconfont仓库，然后每次要转base63再下载，在项目中更新，比较麻烦。 在web端直接使用svg更加方便，如svg-sprite-loader，项目本地维护svg即可；但是小程序端svg只能作为图片使用。 思路： svgtofont可以将本地的svg转成iconfont，但是看了文档，没有转成base64格式的选项，转base64的话，还是需要去iconmoon等网站工具。想到基于svgtofont生成的文件，继续转base64，再替换到css中，试验可行。 实现： svg转font 从https://www.iconfont.cn/下载了几个svg图片，引入svgto...
SVGA动画替换图层元素
之前写了一篇关于SVGA和Lottie动画使用的，现在有一个新的需求，要实现一个效果比较炫的引导动画，想用SVGA实现，但是要求里面的一些数字是动态可配的。查了下SVGA支持替换图层，跟UI配合调研成功替换，用了两种SVGA库来实现。 UI准备： UI在出图的时候，对图层做好命名，导出SVGA后，告诉开发可配置图层的名称。 PS: 在这里预览SVGA文件，也可以查看所有图层的key。 联调过程： 引入svga，根据图层的key动态替换元素，再播放动画。 这里我先用的svgaplayer-web-lite去做，因为之前的svga动画也是用的这个库。但是当时跟UI还在调研，以为新建的图层要用文本框，出了一个有问题的svga文件，用这个库报错，换成svgaplayer-web就可以正常渲染。另外网上看的替换svga图层的教程都是用的svgaplayer-web，就先用这个实现了。 后来发现不用文本框，普通图层就行，又用lite实现了一下，相比较起来，lite更轻量，性能更好。 参考文章：https://blog.csdn.net/weixin_44309374/article...