码农键盘上的梦-优快云博客

原创使用yarn安装与卸载包

yarn是一个功能强大的包管理器，它可以帮助我们更好地管理项目中的依赖。了解yarn安装依赖的规则，对于项目的维护和升级都会非常有帮助。本文详细介绍了如何使用yarn安装与卸载包。通过本指南，你应该已经了解了如何使用yarn卸载包及其依赖项的不同方式。通过这些方法，你可以更轻松方便地管理您的项目所需的依赖项，并随时调整。

2023-06-28 11:20:20 20755

原创 antv/g6基本使用教程

在项目中引入 G6,需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为。引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（在项目中引入 G6 有以下两种方式：npm 引入，CDN 引入。创建关系图（实例化）时，至少需要为图设置容器、宽和高。G6 在绘制时会在该容器下追加。标签，然后将图绘制在其中。

2022-12-14 10:56:26 7436

原创 uniapp微信公众号h5微信授权登录

uniapp微信公众号h5微信授权登录

2022-08-12 11:21:48 11428 6

原创 Vue3 Watch全家桶深度指南：数据变化的艺术监听

广角镜头：watchEffect自动覆盖所有依赖变焦镜头：watch精确锁定目标红外模式：watchPostEffect捕捉更新后的状态高速连拍：watchSyncEffect即时响应精准响应数据变化自动优化渲染性能优雅处理复杂状态逻辑（本文示例基于Vue3.4+，部分特性需注意版本兼容性）

2025-02-11 13:42:30 1059

get() {track()},trigger()}))// 使用示例核心三剑客：ref/shallowRef/customRef 构建响应式基础转换双雄：toRef/toRefs 打通响应式血脉工具搭档：isRef/unref 提升开发体验掌握这些工具的组合使用，就像拥有了响应式编程的乐高积木，可以搭建出各种复杂的响应式系统。按需选择：根据数据结构选择响应深度类型安全：充分利用TS类型系统组合优先：通过组合简单Ref构建复杂逻辑。

2025-02-10 17:59:26 410

原创 Vue3 渲染函数 h() 由浅入深指南

h()h('div', // 元素/组件[/* 子节点 */] // 子元素h('div', {})虽然h()函数提供了极大的灵活性，但需要权衡使用场景：开发高阶组件/抽象组件需要极致性能优化时动态性极强的布局系统组件库开发常规业务组件需要快速迭代的场景团队对渲染函数不熟悉时通过本文的探索，相信您已经掌握了在 Vue3 中灵活运用h()函数的精髓。记住，强大的能力伴随着更高的责任，合理选择才能发挥最大价值！

2025-02-10 13:46:13 1063

原创小程序页面跳转数据传递：URL 参数 VS EventChannel

在小程序或者app开发中，最常用到的就是页面跳转。而页面跳转就经常会携带数据到下一个页面，常见的做法是通过 URL 参数将数据拼接在 navigateTo 的 URL 后面。然而，这种方式在处理较大数据（如数组或对象）时会显得笨拙且有限。下面将讨论通过 URL 传递参数的局限性，以及使用 EventChannel 进行数据传递的好处，并提供代码示例进行解析。

2025-02-07 14:05:18 985

原创从零创建 Vue 3 项目

方法适用场景优点缺点Vue CLI中大型项目，需要完整生态支持功能强大，插件丰富配置复杂，启动速度较慢Vite现代前端项目，追求开发体验启动速度快，开发体验极佳生态相对较新官方模板快速上手，定制化需求简单快捷功能较少StackBlitz在线原型开发，快速分享无需本地环境依赖网络，功能受限在线开发，团队协作支持多人协作依赖网络，功能受限快速创建项目官方支持，配置灵活功能较少Nuxt.js服务端渲染，静态站点生成支持 SSR/SSG，SEO 友好。

2025-02-06 13:27:38 4101

原创 JavaScript处理 null 与 undefined

可选链操作符（?.）用于简化访问嵌套对象的属性或调用函数时的检查过程。它允许我们在访问可能为null或undefined的对象属性时避免抛出错误。

2025-01-15 09:15:00 702

原创 uni-app编写微信小程序使用uni-popup搭配uni-popup-dialog组件在ios自动弹出键盘。

就在于不要使用默认的输入，要借用默认插槽进行覆盖。，并引入对应组件即可使用对话框，自定义内容，会覆盖原有的内容显示。该组件不支持单独使用。

2025-01-14 09:23:26 700

原创浏览器控制台批量下载dy图片

【代码】浏览器控制台批量下载dy图片。

2025-01-13 16:15:32 229

原创 Vue3 如何使用moment

在 Vue3 中使用 Moment.js 来处理日期时间非常简单。首先，需要安装 Moment.js；然后，可以按需引入 Moment.js；还可以通过全局配置来配置 Moment.js 的默认选项；最后，在组件内可以直接 import Moment.js，并使用它来处理日期时间。希望本文能帮助你在 Vue3 项目中使用 Moment.js 更加方便。

2024-12-06 09:22:57 1518 1

原创如何使用JavaScript获取浏览器URL后面的参数

在本文中，我们介绍了使用JavaScript获取URL后面的参数的三种方法。以上三种方法都可以用来从URL中获取参数值，前两种方法我们可以使用location.search方法获取整个查询参数部分，然后使用URLSearchParams对象解析查询参数。对于一些旧版本的浏览器，我们可以使用正则表达式来解析查询参数。这些方法可以帮助我们在Web开发中更方便地获取和处理URL后面的参数。

2024-11-22 10:25:55 452

原创 ??（空值合并运算符）和 ||（逻辑或运算符）的基本区别

（空字符串）等），就会返回右边的值。，只有在这种情况下才会返回右边的值。它主要用于判断左边的值是否为 null。以及其他假值）时提供一个默认值，使用。1、在实际编程中，如果只想在变量为。2、如果想在变量为假值（包括。它的逻辑是只要左边的值为。或 undefined。这行代码的意思是，如果。时提供一个默认值，使用。、空字符串等），就把。

2024-11-15 09:21:28 243

原创前端使用Canvas实现网页电子签名(兼容移动端和PC端)

以上就是使用Canvas实现移动端网页电子签名的基本步骤。你可以根据自己的需求进行进一步的扩展和优化。监听移动设备的触摸事件，在触摸事件的回调函数中获取触摸点的坐标，并使用Canvas绘制路径。在HTML文件中创建一个Canvas元素，并设置其宽度和高度，以适配移动设备的屏幕大小。在JavaScript文件中获取Canvas元素，并获取其上下文对象。可以添加其他功能，如清除画布、保存签名等。设置绘制路径的样式，包括颜色、宽度等。

2024-11-12 14:44:21 388

原创使用Canvas画一个带有名字首字母的头像（男/女/未知）

有些需求, 为了区分用户, 会根据用户的首字母生成对应的头像使用, 面对这样的需求还是很多的, 比如聊天、设置默认头像等等。宽高设置好之后, 我们需要调用 clearRect 来擦除整个画布, 清除的区域尺寸设置为canvas 的宽高。首先, 我们先来封装一个函数, 需要传入姓名、性别并设置默认值, 返回Base64编码格式的图片。别着急, 我们一步一步来, 先将第一个字母或者汉字获取到，并且判断是否为英文是英文就首字母大写。效果就实现了, 这种需求用的地方还是很多的。获取到之后, 就可以开始画了。

2024-11-12 11:20:48 367

原创 iframe内嵌网页通知父页面事件

在父页面中，通过监听message事件，可以获取来自iframe内嵌网页的消息。子页面可以通过JavaScript获取对父页面的引用，并调用父页面的函数或对象来通知事件的发生。确保iframe元素的src属性指向子页面的URL，并设置合适的宽度和高度以适应子页面的内容。首先，在iframe内嵌的网页中，需要定义一个事件，当需要通知父页面时触发该事件。合作通信机制：父页面和子页面必须协调使用一种通信机制来实现跨页面通信。只有当父页面和子页面具有相同的域名、协议和端口号时，才可实现跨页面通信。

2024-11-11 08:46:27 688

原创优化JavaScript中的复杂判断

我们在写 JavaScript 代码的时候，经常会遇到逻辑判断比较复杂的情况，通常我们可以使用if/else或switch来实现多个条件判断。但是这样就存在一个问题，随着逻辑复杂度的增加，代码中的会越来越臃肿，越来越难理解。那么如何才能把判断逻辑写得更优雅呢？今天咱们就来看看这个问题！优化 JavaScript 中的复杂判断有以下几种方法：使用逻辑运算符：根据条件的逻辑关系，使用逻辑运算符进行简化。例如，使用 || 代替 if-else 语句中的判断条件。

2024-11-04 14:15:00 506

原创 vue3大屏适配之常见方案

动态设置 html 的 font-size可以使用媒体查询或者js来动态改变body的fontsize大小，媒体查询太麻烦，以下是通过js代码动态改变fontsize大小。缺点：一些第三方库的字体等默认的都是px单位，比如：element、echarts，因此通常需要层叠第三方库的样式，比如有的图表需要单独适配字体。缺点：一些第三方库的字体等默认的都是px单位，比如：element、echarts，因此通常需要层叠第三方库的样式，比如有的图表需要单独适配字体。直接是响应式的，不需要resize事件。

2024-11-04 09:48:34 723

原创 vue3 封装aixos

通过这种方式，你可以方便地管理和复用 HTTP 请求代码，并且可以根据需要轻松地添加额外的功能，如身份验证和错误处理。确保在 Vue 项目中正确配置了路径别名或相对路径，以便正确导入封装好的 Axios 实例。方法，该方法通过封装好的 Axios 实例发起请求，并将返回的数据展示出来。如果你在生产环境中遇到跨域问题，请确保服务器设置了正确的 CORS 头。的一个示例，以及如何在 Vite 项目中使用它来请求数据。根据实际的需求调整 Axios 的配置和拦截器逻辑。在这个例子中，我们在。

2024-11-04 09:28:37 805

原创 vue3使用vite设置 @ 路径别名指向src 目录

注意：如果你使用的是 TypeScript，需要确保你的项目已经正确设置了 TypeScript 相关的配置文件。在 Vite 中，@ 符号通常用于路径别名（path alias），它可以帮助你更方便地管理项目中的相对路径。例如，你可以设置 @ 别名指向你的 src 目录，这样在整个项目中引用源代码文件就会更加简洁。如果你是在 Vue 项目中使用 Vite，确保你也安装了相应的 Vue 插件。确保你已经在你的项目中安装了 Vite，并且正确地设置了你的开发环境。现在你可以在你的 Vue3 项目中使用。

2024-10-31 14:27:18 1556

原创 uni-app原生tabar显示未读角标（未读数字）

uni-app原生tabar设置并添加数字角标或小红点提示。

2024-10-25 14:57:39 673

原创 Vue3下拉加载更多——无滚动加载上一页最后一条数据（主要用于加载聊天记录以及一些问答）

3.2 在元素塞进去之后元素.scrollTop = 元素.scrollHeight - height (刚刚获取到的距离) 元素滚动上去的距离就是现在的总高度减去刚刚的固定底部。在前面塞元素，滚动条就会往上跑，（其实滚动条还是没动，但是元素向上塞了很多，撑开的东西就铺开了，导致看起来是向上了，其实就是滚动条与顶端的距离没变，但是内容多了）上拉加载的时候，加载出来的元素就往页面末尾塞，此时滚动条是在原处没动的，加载出来就出来了，不会有不好的体验，但是反过来就不行了。

2024-10-23 09:14:22 548 5

原创 uniapp配置微信小程序分包（分包优化）

新增代码"optimization":{"subPackages":true}，如下图所示。以上面的分包为例，放在每个分包root对应目录下的静态文件会被打包到此分包内。

2024-10-14 09:58:15 1341

原创 vue3 获取当前页面路由实例

获取路由有四种方法，获取到的path和fullpath的区别是fullpath会携带参数，所以要根据业务需求获取不同的数据项。

2024-09-26 13:09:23 665

原创 js超过Number最大值该如何处理（超大数运算失去精度）

在JavaScript中，Number类型使用的是双精度64位浮点数（IEEE 754标准），其最大安全整数值为2^53 - 1，即，可以通过来获取。如果超过这个值，可能会导致计算误差或不准确的结果。当需要处理超过。

2024-08-22 11:18:28 1578

原创前端实现截图（Vue）

可以通过使用库来实现截图功能。这个库可以将HTML页面或某个元素转换为图片。

2024-08-22 11:15:27 1917 1

原创 Vue.js 中的指令（Vue自定义指令）

在 Vue.js 中，指令 (Directives) 是一种带有v-前缀的特殊属性。它的作用是「当其绑定的元素被插入到 DOM 中时，会立即执行一些行为」。v-model：在表单元素上创建「双向数据绑定」；v-show：根据表达式之真假值，「切换元素的 display CSS 属性」；v-if：根据表达式之真假值「渲染或销毁元素」；v-for：基于一个数组来渲染一个列表。这些指令让我们可以更加声明式地操作 DOM，隐藏复杂的 DOM 操控逻辑。除了内置的指令，Vue.js 也允许我们注册自定义指令[2]

2024-08-16 11:02:28 1182

原创 Vue 3 中引入图片的方法

在 Vue 3 中引入图片的方式与 Vue 2 有所不同，主要是因为 Vite 的使用。通过上述方法，你可以轻松地在 Vue 3 应用中引入和使用图片资源。无论你是需要引入静态图片还是动态加载图片，都可以找到适合的方法。希望这篇文章对你有所帮助！如果你有任何疑问或需要进一步的信息，请随时提问。

2024-08-08 15:22:16 4181

原创 git commit提交代码报错husky ＞ pre-commit hook failed (add –no-verify to bypass)（解决办法）

问题是因为当你在终端输入git commit -m "xxx",提交代码的时候,pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。

2024-07-23 19:47:56 1007

原创 vue 如何设置自定义指令

在 Vue.js 中，你可以创建自定义指令（Custom Directive）来封装可重用的 DOM 操作。Vue 提供了一种机制来扩展其内置指令的功能，允许你定义自己的指令并使用它们。你可以在 Vue 实例或 Vue 组件中定义一个自定义指令。定义时需要提供一个或多个钩子函数，这些函数会在特定时刻被调用。例如，我们定义一个v-focus// 在 Vue 实例中注册全局指令// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus();});focus: {

2024-07-19 13:46:40 437

原创极速删除 node_modules 仅3 秒

作为前端开发者，相信大家都曾经历过删除文件夹时的漫长等待。尤其是在处理那些依赖库繁多的项目时，删除操作简直让人崩溃。今天，我们就来探讨一下为什么删除依赖这么慢，以及如何实现快速删除。让我们一起提升开发效率，告别繁琐！

2024-07-18 10:06:54 648

原创 websocket封装

websocket在前端开发中，是一个必须掌握的技术！你可以不用，但必须掌握！前几天，就遇到这样一个需求，要求界面的数据通过websocket实时推送，并且必须支持断网重连、自动心跳！自动心跳是定期向服务端发送小型数据包，如果一段时间内服务端没有收到心跳响应，系统可能会断开连接。websokect的API非常简单// 创建ws连接console.log('WebSocket 连接已经建立。');');console.log('收到服务器消息：', event.data);

2024-05-31 10:38:47 935

原创 npm 安装包版本号指定标识符^~*

主版本号为10、次版本号为0、修补版本号为0，那。，依次为主版本号、次版本号、修补版本号。我们可以先来了解依赖的版本。

2024-05-28 10:11:21 1031

原创 vscode主侧栏源代码管理（Source Control）不见了！！！

后来我发现，我左下角的master还是有的，说明我的git还是有生效，小树杈应该是被隐藏了而已，于是我就对vscode各种点，菜单栏、状态栏等等都点。度娘了下，网上找了几个帖子都是说git禁用再开启。可我的就是不起效，试了几次，为此我还重装了vscode。不见了，项目又着急赶工，没时间找它，可真愁死我了。今天上班突然发现vscode中主侧栏中。菜单栏 —> 查看 —> SCM。以为这样代码没办法提交了？侧边栏出现小树杈啦啦啦啦。让你感觉到无比的失落。终端出现了源代码管理器。再把源管理器拉到侧边栏。

2024-05-14 09:29:01 2394 2

react架构.rar

空空如也