使用Claude Code项目开发
AI IDE vs AI CLI从Cursor开始，各种AI IDE层出不穷，且已经达到了生产力级别。各家的AI IDE都是基于VSCode改造，接入claude等大模型编程。 然后Anthropic公司推出了claude code，开启了AI IDE。后面open ai和谷歌也跟上，分别开发了codex和gemini cli。 既然有了AI IDE，为何又要推出Cli形式的工具呢？尤其是cursor和claude code都是基于claude大模型。 优势 劣势 IDE 符合操作习惯，上手快；代码补全； 强绑定IDE CLI 终端运行，可以搭配任意IDE使用；CLI 形态天然适合自动化、脚本化、CI 集成、远程/无 GUI 环境；企业侧在安全、合规、权限管理上更容易集成； 需要学习上手；不支持代码补全； claude是目前最好的编程大模型，而claude code是Anthropic官方出品，对于claude的能力调教的更好。claude code新推出的子agents、skills等能力就很强。 目前还有一个问题，就是cursor、trae等一...
基于lit-html开发轻量h5
lit-html介绍什么是lit-htmllit-html是一个轻量的模板引擎，是lit框架的一部分。lit-html是基于原生es6模板字符串，可以单独在原生js中使用，是一个轻量高效的模板引擎。 lit-html的特性lit-html的核心特性： 高效的更新：lit-html 只更新变化的部分，而不是整个模板。 声明式渲染：使用普通的 JavaScript 表达式来声明 UI。 轻量级：只包含必要的功能，没有额外的抽象层。 可以看到，lit-html既轻量、不依赖框架，又能做到针对性只渲染更新的部分。我们在开发一些轻量的h5时，想要提升性能，不想引入过重的框架，就可以用lit-html来开发。 在项目中引入lit-html的两个核心方法，可以看到，只有8.1k，gzip压缩后只有3.4k。 lit-html用法api主要用到两个方法，html和render。 其中html是模板字符串函数，用于构造模板。html``. render是将模板渲染到指定的dom节点上。render(template, el). 事件绑定：lit-html的事件绑定跟vue很像...
【小程序】sjs事件动态调整元素位置
需求描述之前写过一篇利用sjs在小程序实现无卡顿元素拖拽的分享：【小程序】小程序sjs事件及拖拽组件开发。 这次需求做了一个气泡提示的容器组件，需要在遇到屏幕边缘时动态向内调整气泡的位置，就想到利用sjs事件来实现。 要求： 气泡箭头对准该功能中间位置 当气泡箭头无法居中位于功能，靠近页面左/右边缘时，气泡距离页面左右边距统一为16px箭头位置对准该功能 还有一个角标的组件，正常是在元素右上角，要实现到达页面右边缘时变为左上角。 事件文档sjs事件官方文档：小程序文档 - SJS 响应事件。 在 .sjs 文件中定义函数： 1234567891011121314151617181920// index.sjsfunction handleEvent(event, ownerComponent) { // currentTarget 的 Descriptor 描述对象 event.instance.setStyle({ 'font-size': '28rpx', }); // 不往...
序列帧动画css实现
实现原理雪碧图（sprite）雪碧图也叫精灵图， 是一种CSS图像合成技术。通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。 雪碧图的作用有两个： 减少图片资源的请求数，提升页面加载速度 制作序列帧动画 这里我们要用第二种方式。假如我们有如下的一系列图片： 现在我们将它合到一张图片中。这时我们可以用ps一张一张拼，也可以用工具直接生成，如textpacker。 https://www.codeandweb.com/texturepacker 如下，我们可以拼成一个几行几列的图，或者都放在一行。 css实现序列帧动画我们都用过css的transition和animation实现动画。这里我们要像幻灯片一样，在每一帧停顿一下，再切换到下一帧。 这里要用到animation的一个属性steps。 animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态（我们称为线性变化）。默认情况下，它以<font style="color:rgb(199, 37, 78);back...
gulp-replace预编译注入环境变量
需求：在小程序使用pagespy，不希望带入到生产环境。期望在编译时而非运行时，动态判断环境注入代码。 要动态注入的代码： 1234567891011121314import PageSpy from '@huolala-tech/page-spy-alipay';(function () { const uid = my.getStorageSync({ key: 'uid' }).data; const map = { 'xxxxxxxxxxxxxxxx': 'xx', } // eslint-disable-next-line new PageSpy({ api: 'xxx', project: 'xxx小程序', title: map[uid] || uid || new Date().toLocaleTimeString(), });})...
draft.js定制富文本编辑器
有一个需求： 需要在输入框中输入/时弹出自定义下拉弹窗，选择组件并插入到输入框。 下拉弹窗是双层，且子目录支持输入文本过滤。 同时插入的块在删除时应该整体删除。 这个弹窗和插入整体感觉跟语雀的功能很像。一般的富文本编辑器可以插入特定的样式，但是整体自定义组件显示是不支持的，尤其是插入的块退格时作为整体删除。 另外这个输入/弹出下拉的功能，联想到很多编辑器中@人的时候的mention功能。 去看了react-mention，唤起键可以自定义，不一定是@，但是下拉弹窗的样式是固定的，只有单层列表，且不支持过滤。看react-mention的介绍，要唤起多个列表，就用多个不同按键唤起。这与我们的需求不符。 库选择第一反应是用tiptap，去翻了下文档，挺复杂的，感觉对我这个功能来说有点重。 再去查了下富文本实现mention，facebook开源的有一个draft.js的库，相对底层一些，可以用来实现自定义的富文本编辑器，网上的示例就有mention和插入整体的代码。参考了这篇文章：https://segmentfault.com/a/1190000041471...
贝塞尔曲线在前端的应用
贝塞尔曲线介绍贝塞尔曲线（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) { ...