音仔小瓜皮-CSDN博客

原创【Electron入门】进程环境和隔离

Electron可以简单理解为一个桌面应用程序的“壳”，内里还是遵循浏览器的行为，加载网页进行渲染（

2025-02-24 10:25:22 1379

原创【bug记录10】同一iOS webview页面中相同的两个svg图标出现部分显示或全部不显示的情况

诸如<clipPath>此类的图形效果标签在用url进行引用时，都需要设置唯一id，否则会因为冲突而无法解析效果、从而无法正确渲染矢量图形。<filter>：滤镜效果<mask>：遮罩效果<linearGradient>和<radialGradient>：渐变和镭射效果<pattern>：使用预定义的图形对一个对象进行填充或描边（通过属性url引用pattern中预定义的图案）<marker>：定义在<path><line><polyline>或<polygon>

2024-11-26 10:50:52 1448

原创【JS】Array数组的every方法使用

定义：every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供【即对每个元素的判断取交集 &&,得到最终的布尔结果】返回值：布尔值，true或者false。⚠️注意every 不检测空数组！但是会返回trueevery 不会改变原始数组元素！every 和数学中的全称量词"任意（∀）"类似。因此，在先行条件不成立的情况下，结论返回为真。所以特别的，对于空数组，它只返回 true。（这种情况属于无条件正确，因为空集的所有元素都符合给定的条件。

2024-10-28 11:43:47 1368

原创【linux】使用alias简化指令

但是这样每次要进zshrc文件去手动注释掉不需要版本的path，来启用其他版本，并且需要重启控制台很麻烦。的某些权限限制，所以没有安装nvm，在切换node版本的时候，需要通过切换PATH指向的包路径去切换版本。这样设置完，调用n16你会发现仍然没有切换过去，还在node 18默认版本中。后来发现可以开启一个默认的node PATH配置，然后再对其他版本使用。强制将node16路径拼接在前面，把 $Path 拼接在路径最后。，所以会优先匹配到node18的路径就。，当调用n16时，由于。

2024-10-18 11:34:03 438

原创【css】常见布局概述

本文将对css的常见布局方案进行概述，给大家提供系统化的布局解决方案参考。

2024-09-25 10:28:03 1943

原创【bug记录9】transform 3D变化的时候，背面按钮翻转到正面的时候无法点击/选中

2、让front一开始就作为正面transform:rotateY(0deg)，而父元素初始设为transform:rotateY(180deg)。在3d效果中，背面的元素翻转过来只是在gpu渲染层面上体现，但实际无法选中，因为其在Z轴上的层级已经被改变。现在container上设置翻转动画，使得原来在背面的正面图翻转到正面。可以让背面元素可视可选，但不符合预期动画效果。绑定点击事件，但不好控制位置和出现时机。结果翻转过来的按钮面无法选中/点击。的时候，原dom结构如下。

2024-09-20 12:10:08 363

原创【vue Lottie】lottie在vue项目中的使用心得

使用的时候，不要一股脑的复制粘贴过来，而是应该进行如下步骤的清洗。assets属性下，引用的图片资源对象中的p属性下，表示路径。，并根据其click等事件的触发，调用上述这些实例方法，来。，让图片资源经过webpack/vite的打包处理。：在lottie.json存放的动画数据中，我们可以。一些很大的背景图片（不影响主体内容展示的）可以放在。可以控制Lottie的大小、速度、展示方向等等。能用原生实现的动效，就不要切Lottie，同样的图片依赖素材，减小依赖图片的大小。等方法控制Lottie动画的显示。

2024-09-02 10:35:52 948

原创【Vue】router和route的区别

经常在vue的路由使用过程中，会将router和route的调用场景弄混。

2024-09-01 21:49:32 654

原创【bug记录8】vue-router和location.href跳转区别

1、微信小程序会对一些数据、配置、资源进行缓存，如果不刷新则导致无法及时获取2、如何使得页面及时刷新呢？这涉及到vue-router和location.href的跳转区别。

2024-09-01 16:33:08 596

原创【vue3】静态资源建议放在相对路径创建的资源文件夹下，而不是根目录public文件夹里

当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置。文件夹的静态资源都会被简单的复制，而不经过 webpack。注意我们推荐将资源作为你的。任何放置在 public。

2024-08-30 18:45:53 671

原创【bug记录7】导入Lottie的json格式动画，获取不到相对路径下的图片

其中的路径就可以设置为相对路径了，比如可以把p参数直接配成new URL('relative path',import.meta.url).href。，也无法拿到其相对路径中的图片。因为json解析绝对路径，只能将图片放在项目根目录下的public文件夹应急。在vue3项目中，想把Lottie依赖的图片放在其相对路径下，但是发现即使修改其中的。将Lottie的json文件转换为。

2024-08-30 18:38:50 715

原创【bug记录6】css 写animation时，Safari浏览器最后一帧部分样式闪回

在动画的最后一帧时，元素回到初始的scale和opacity设置，但并没有移动到相应的偏移位置这一信息。transform的最佳排列顺序是translate、scale、rotate。想实现一个元素A从位置1平移到位置2，并且在移动过程中逐渐缩小、透明度变小。，可以知道并非fill-mode没有生效，而是在渲染初始样式时，，gpu的性能高、渲染生效速度更快。transform、opacity是用gpu渲染的属性。造成复杂动画渲染不同步的问题。，而非图层计算，因此可能在。根据三者属性的差别，

2024-08-27 15:59:14 511

原创【bug记录5】flex横向布局时子元素设置宽度无效

对父元素list使用了flex布局之后，尝试将其子元素item固定宽度，但发现。宽度设置不生效并且实际宽度被压缩了。，代表元素不允许被弹性布局挤压。优先适配自己的父元素的宽度。在item子元素里面加一个。

2024-08-17 21:15:18 1783

原创【移动端H5】click事件和touch事件的区分

touch事件是移动端区别于pc端触控的独有事件，也是实现很多手势的基础事件。它具体包含了：touchstart（触摸开始时触发）、touchmove（触摸并产生移动时触发）、touchend（触摸结束时触发）等一系列事件。

2024-08-17 15:12:25 970

原创【bug记录4】在canvas中跨源使用img图片资源

中绘制位图的像素可能来自多种来源，包括从其他主机检索的图像或视频，因此不可避免的会出现安全问题。，并且不再认为是安全的画布，这将可能在 canvas 检索数据过程中引发异常。尽管不通过 CORS 就可以在 canvas 中使用其他来源的图片，但是这会。被污染后的画布，将会阻止canvas从外部资源中读取数据。启用CORS的图像在canvas中使用则不会被标记为“被污染”首先我们对canvas获取资源的规则作一个了解。，即可允许CORS跨域访问，并不进行相关校验。从错误信息里面可以基本推断，使由于。

2024-08-11 11:28:14 712

原创【CSS】可替换元素的控制属性：object-fit属性和object-position属性

功效类似于background-size，但前者不可设置内容宽高的具体数值，而background-size可以。PS：background属性是利用css插入元素的背景图，在使用场景上还是有本质区别的。，有些情况下canvas、audio、object、option、以及。object-position属性规定了可替换元素的内容在框中呈现的。其展现的效果和内容是不受到css控制的，而是由外部资源来决定的。的理解，可以理解为依次移动设置的偏移量，就是最后的位置了。<img>或者<video>

2024-08-09 16:26:43 682

原创【bug记录3】vue中使用Fabric.js，对对象定义Control事件偶尔失效

我在使用Fabric.js创建了canvas容器后，在其中添加Image对象，并在原型链中修改其图形对象的控制图标和事件，发现可能与fabric.js处理vue响应式数据（，转而进入到selection相关事件中。用markRaw将图形对象标记为原始对象。

2024-08-06 12:19:56 896 1

原创【bug记录2】在vue中引入vant库组件，报错Failed to resolve component:...make sure to exclude it from component...

但是出现报错，虽然是warning，但是导致组件根本无法显示！，则无需一个页面地在components里面注册。这个解决方法可以类推到导入vant库的任何组件。虽然我们引入的时候，是以 Grid 名称导入，即使用动态属性值，按照实际名称注册组件！但是实际我们在vue页面中使用组件时是用。如果项目对vant进行了全局注册，即。这和vant库组件的定义有关。组件名称和导入类名并。

2024-08-02 19:40:47 727

原创【vue3】template标签的一些理解（提了一嘴component标签）

所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在引用组件的时候，在该组件的子元素里面定制template内容，导入到指定slot插槽内。它属于占位符，其本身不作为节点挂入DOM树，但是可以将包裹着的子元素展示，形成一虚拟DOM。利用这一特点，我们平常写vue3的时候可以用它来作为父元素，从而提升渲染性能，比如在写。，并结合响应式的数据和状态，以最优化最少的次数操作、更新真实DOM。这时候，使用template包裹，就可以实现只重复渲染子元素。

2024-07-31 18:30:30 3529

原创【bug记录1】vant-swipe组件在ios上初始加载后右边显示存在空白间隙

是因为轮播图中的img元素，默认是inline元素，但却对它设置了宽高，期望它横向撑满父元素，但这其实是无效设置。但是从移动端进入web-view的时候，进入到页面轮播图一会显示正常，一会儿轮播图右边出现了空白间隙，时好时坏。因而可能导致swipe初始化的时候由于网络请求或者初始布局的原因，图片元素没能正确布局。开发的页面使用到了vant中的swipe组件去封装轮播图，在浏览器调试一切良好。元素的宽高就是它包含的文字或图片的宽高，不可设置改变。移动端的web-view业务项目开发。最后给img元素设置。

2024-07-29 17:01:32 550

原创【css】层叠上下文的理解

与层叠上下文相关的，还有“层叠顺序”和“层叠水平”，这两个决定了元素在z轴上的显示顺序，表示元素发生层叠时候有着特定的垂直显示顺序。什么时候会再创建一个新的层叠上下文呢？这与部分样式的设置有关。：内容在垂直于屏幕的虚拟z轴上依次层叠排开。简单理解为元素在z轴上形成的样式计算上下文。层叠上下文比普通元素的层叠水平要更高。的时候，就已经新建一个。因此，层叠上下文可以。首先毋庸置疑，当我们。创建一个html元素。

2024-07-29 12:42:16 489

原创【css】实现扫光特效

对于要重点突出的元素，我们经常可以看到它上面打了一个从左到右的斜向扫光，显得元素亮闪闪的！类似于下图的亮光动效。

2024-07-23 18:13:59 1014 1

原创 JS中的File（五）：node.js中的file模块使用

这里暂时仅提供一些简单的梳理和阅读小tips（偷懒一下。

2024-07-20 23:45:28 582

原创【SASS/SCSS（三）】样式的复用与动态计算（@mixin和@function）

接受传参。

2024-07-18 14:43:52 2210

原创【SASS/SCSS（二）】模块化语法

Sass中的模块化主要是指外部的scss、sass文件可以作为模块导入到其他文件中。如果一个自定义的sass、scss文件，仅作为库模块引入，那么我们的取名可以用，这样该文件不会自动去编译加载，而是仅会在被引用之后被编译。这样的文件我们称为Partial（代码片段）。如果在一个文件夹下（例如名为folder）定义 _index.scss 或者 _index.sass ，导入 folder（即直接导入文件夹名），其会自动解析文件夹中的index文件并导入。

2024-07-17 23:01:54 1523

原创【Typescript】Interface和type的区别；探讨为什么interface赋值给Record需要索引签名

因此此刻的MyInterface并不一定是最终的类型结构，后续的合并可能会存在类型不与Record一致的情况。Record限制了属性的类型和值的类型。而Interface由于可以声明合并，3、type可以被基础类型定义，而interface仅可以描述对象结构的类型。Interface基于extends继承扩展基类类型，而type利用。声明同名的类型，Interface同名会合并，而type重名会报错。1、Interface可以声明合并，type不行。一、Interface与type的区别。

2024-07-15 22:14:53 582

原创【SASS/SCSS（一）】选择器

Sass 是一门高于 CSS 的，它能用来清晰地、结构化地描述文件样式。而SCSS是SASS引入的，是CSS的超集，所以所有CSS有效的使用在SCSS中都生效。

2024-07-14 22:50:12 1505

原创【JS动画】帧的理解与requestAnimationFrame的使用

performance.now()与一些js中的time类（例如Date.now()）不同的是，它不仅仅可以精确到一毫秒，而且可以以毫秒为单位作为浮点数返回，最大可精确到微秒级别。requestAnimationFrame的返回值是一个long类型的非0值，可理解为请求DI，作为回调列表中的唯一标识。此时，利用箭头函数的特性【即this指向的是函数定义时，外部最近作用域中的this对象】，才可以准确调用frame函数。值得注意的是，当在class类中定义frame函数，并用将其作为回调函数时，

2024-07-14 13:26:24 1541

原创移动端阻止Touch导致的页面滑动/缩放

应用场景：比如我们制作一个H5小游戏的时候，一些玩家需要通过左右滑动操作来控制角色移动。但在默认情况下，移动端的左右/上下滑动会导致页面也被滑动/缩放，这样非常影响体验。

2024-07-13 22:56:07 1039

原创 canvas高清绘制与retina屏

具体而言，当dpr=1设置1px在浏览器上会显示1px;当dpr=2设置1px在浏览器上会显示2px;当dpr=3设置1px在浏览器上会显示3px。（英语：Retina Display）是一种由苹果公司设计和委托制造的现实屏幕，具备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏幕。*dpi通常理解为打印分辨率，ppi通常为屏幕显示分辨率。1、canvas元素的宽高属性指的是canvas系统画布的大小。这个设置如果没有遵循画布比例，可能会导致显示畸形。2、css中的宽高属性代表canvas。

2024-07-09 18:40:35 432

原创给元素的margin-top/top设置百分比，是基于什么进行计算？

宽度。

2024-07-09 18:14:31 320

原创【线代基础】张量、向量、标量、矩阵的区别

例如，x=np.array([[5, 78, 2, 34, 0], [6, 79, 3, 35, 1], [7, 80, 4, 36, 2]])具有方向性，可以理解为一个多维数组，它是标量、向量、矩阵的高维扩展，属于一个数据容器。通常，张量的维度被称作轴(axis)，张量轴的个数也叫做阶(rank)因为向量只有一个轴，只是在轴上有4个元素组成了4个维度！概念上为又代表方向，又代表大小的一组数，几何意义上对应。例如，x=np.array([1,2,3,4])上述x为4D向量，但不是4D张量。

2024-03-12 17:03:46 2788

原创【Linux】什么是.bashrc，以及其使用方法

bashrc，属于一种系统隐藏文件，常常可见于 macOS 或者主流的 Linux 发行版。如果你运行一个基于 Unix 或者类 Unix 的操作系统，bash 很有可能是其默认终端，那么.bashrc就是这个终端里面指令运行的配置脚本。

2024-01-26 17:32:16 31336 1

原创【JS】用正则匹配实现模糊搜索

) 执行正则表达式中的正向预查。正向预查是一种零宽度断言，它不消耗自身字符去匹配，而是用于查看字符串中的当前位置之后是否能够匹配指定的模式。*注意，这里正向预查的括号，代表里面的预查都是独立的，是接着外部正则表达式指向的位置来查的，所以当多个预查连续排列是，预查开始的位置不是上一个预查结束的位置，而是括号外部指向的、此时匹配到的位置。利用这个性质，我们可以实现模糊搜索要求的乱序字符匹配！正则表达式中，除了正向预查外，还有其他预查方式，作出一个补充：1、正向肯定预查 (?

2024-01-25 19:57:52 2126

原创 git tag的用法详解

不过上述基于tag来checkout的前提，是要保证本地仓库中你有tags 的信息，，此时后面可以通过 -m ，像提交commit一样备注你的评论以及其他信息。打tag分为两种方式，一种是直接打tag，打一个简单的标签。通常，在进行编译部署之前，我们需要对某一个。tag基于某个commit来进行特定标识，如果是想更新远程的tag，用--force。，例如tag为release-v1.0。生成一个带tag的类似branch。标记一个特定的commit。一个是打带注释的tag。

2024-01-24 11:50:04 2668

原创 JS中的File（四）：文件流Streams API使用详解

PS：涉及到一些基本的文件操作和格式内容知识，可以进入我的主页参考我之前的此系列文章。这个系列我还会继续更新下去的~参考：从 Fetch 到 Streams —— 以流的角度处理网络请求 - 掘金 (juejin.cn)Stream API - Web API 接口参考 | MDN (mozilla.org)在流之前，如果想要对文件资源进行操作，需要先下载完整的文件，等待它反序列化成合适的格式，在完整地对接收到的内容进行统一处理。流出现之后，网络发送文件可以将文件以一块块的数据形式传输，这使得——视频缓冲区

2024-01-18 15:39:59 3991

空空如也

空空如也