HTML前端
文章平均质量分 58
1024小神
不会就去学,学习是永远不会亏的(wx:lanxingme)
展开
-
tauri开发软件中,使用tauri自带的api用浏览器打开指定的url链接
【代码】tauri开发软件中,使用tauri自带的api用浏览器打开指定的url链接。原创 2024-09-24 16:30:41 · 21 阅读 · 0 评论 -
tauri嵌入自定义目录/文件,并在代码中读取文件内容的操作流程
在绑定了文件之后,可以在js中访问嵌入的文件或者在rust中读取嵌入的文件内容,详细的配置操作如下。然后就可以在代码中读取这个文件了。原创 2024-09-21 16:43:40 · 245 阅读 · 0 评论 -
Cannot find module ‘./App.vue‘ or its corresponding type declarati....大概率是你编译的时候出错了,解决办法
出现这个错误的原因,是ts编译命令失败导致的,因为ts只认识ts文件,不认识vue文件,所以要想打包编译,就需要使用vue-ts。原创 2024-08-19 14:37:54 · 472 阅读 · 0 评论 -
使用plasmo开发浏览器插件,在页面中插入使用React语言自定义的UI元素
比如我在直播间添加了一个按钮,通过点击这个按钮,弹出来一个弹窗,这个使用的就是React语法和antdui实现的。具体实现的步骤就和你写React一样简单。原创 2024-08-10 09:45:22 · 418 阅读 · 0 评论 -
Vue3中实现自然滚动表格列表,可调整滚动快慢
最开始实现我是想用vue3-seamless-scroll这个插件的,但是使用起来发现,首先它不支持数据少的情况下自动停止滚动,需要传入step为0,感觉不是很方便(也可能是我没有很会用这个插件),所以感觉直接写了一个。这是基于react的滚动列表改造过来的,所以本身留了render口子,可以自定义表内的内容,不只是文字,但是对于vue3跟jsx的结合,我还是不是很熟,所以目前还没有用到render写法。实现效果如图所示,可以调整滚动的快慢,可以实现内容高度不够的时候停止滚动的效果。原创 2024-07-19 21:38:42 · 733 阅读 · 0 评论 -
浏览器跨tab页面通信方式总结
需求:浏览器不同 tab 标签页之间是独立的, 如果要通信必须通过特殊手段来实现跨标签页通信。原创 2024-07-19 18:23:06 · 1349 阅读 · 0 评论 -
6元/年英国Giffgaff卡申请和使用
我们来到页面最底部,选择“Pay as you go”这一项,由于我们只是用它来注册账号、接收验证码等,而使用这张卡又必须要往卡里充值,所以我们选择这一种,向卡里充值10英镑即可,不考虑其他套餐。来到填写个人信息的页面,这里不需要真实身份,至于地址,你可以使用地址生成器随机生成一个,或者你也可以在地图上随机找一条街道作为填写进去的地址。(我使用的是真实地址,用的拼音)底部显示了你的用户名,到时你在登录个人中心时,需要用用户名+密码登录,所以别急着关掉这个页面,记一下用户名(使用手机号也可以登录)。原创 2024-07-09 10:14:19 · 1643 阅读 · 0 评论 -
vue3长列表优化,使用vue-virtual-scroller实现直播间弹幕列表虚拟滚动效果
但是需要注意:获取DynamicScroller这个组件的时候,要使用document.getElementById('liveMsg')这种形式,不能使用ref这种,因为ref获取到的并不是一个html元素,没有scrollTop方法,所以无法滚动到底部。这三个组件区别是滚动每一项高度是固定的还是动态的,Recycle就是固定的高度,Dynamic是动态的,动态的话,必须要包含DynamicScrollerItem。原创 2024-07-02 15:21:39 · 2304 阅读 · 0 评论 -
直播的js代码debug解析找到protobuf消息的定义
我们都知道直播的弹幕消息是通过websocket发送的,而且是通过protobuf传输的,那么这里面传输了哪些内容,这个proto文件又要怎么定义?每个消息叫什么,消息里面又包含有哪些字段,每个字段又是什么类型?都可以通过js查看得到。原创 2024-07-01 11:07:24 · 472 阅读 · 0 评论 -
从直播消息中找到对应的proto协议内容
这么多直播间的消息,我们该怎么从里面找到我们需要的消息定义呢?原创 2024-07-01 11:06:24 · 362 阅读 · 0 评论 -
protobufjs解析proto消息出错RangeError: index out of range: 2499 + 10 > 2499解决办法
使用websocket通讯传输protobuf消息的时候,decode的时候出错了:出现这种错误的时候,99%是因为proto里面的消息类型和服务端发送的消息类型不一致导致的。原创 2024-07-01 11:05:42 · 432 阅读 · 0 评论 -
调试解析直播弹幕消息protobuf内容,一步一步教你debug查看PushFrame和Response解码在哪里
我们知道直播间的弹幕消息是通过websocket传输的,而且传输的并不是明文数据,而是protobuf消息,至于为什么使用这个protobuf消息,因为它是二进制传输,更快更稳,相对于直播这种实时性比较高的要求,使用这种消息传输是非常合适的。原创 2024-06-29 15:13:09 · 728 阅读 · 0 评论 -
tauri使用github action实现跨平台编译并解决编译错误,mac已损坏,无法打开,你应该将它移到废纸篓解决办法
里面有编译文件可以参考。今天主要讲一下遇到的问题。原创 2024-06-28 14:07:03 · 1097 阅读 · 0 评论 -
Failed to resolve import “protobufjs/minimal“ from “src/proto/dy.js“. Does the file exist?
但是这是自动生成的啊,怎么办?原创 2024-06-28 11:55:16 · 295 阅读 · 0 评论 -
github使用action出错Unable to locate executable file: pnpm. Please verify either the file path exists
就是这里报的错,所以需要修改一下:改为下面的格式。原创 2024-06-28 11:38:42 · 397 阅读 · 0 评论 -
前端项目vue3/React使用pako库解压缩后端返回gzip数据
解压后的内容:{{ uncompressedData }}原创 2024-06-26 19:35:19 · 741 阅读 · 0 评论 -
browerify介绍和简单实用,github的这个作者运用的太妙了
在github闲逛的时候,发现了一个很神奇的项目,这个项目的特点就是实用纯vue和js代码实现了直播间消息的获取,获取的方式就是建立websocket连接,然后接收消息,这没什么特别的,但是特别的地方是什么?原创 2024-06-24 16:37:04 · 1037 阅读 · 0 评论 -
不常见但很有用的chrome调试工具使用方法
对于chrome调试工具,常用的是elements标签、console标签、sources标签和network标签。但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率。本文将详细介绍那些不常见的chrome调试工具使用方法。原创 2024-06-24 16:13:00 · 526 阅读 · 0 评论 -
创建一个和tauri图标一致的icon和苹果icns图标
我们先看一下tauri的图标的样子,然后看一下tauri程序安装之后的样子,其实这里最困难的就是苹果设备的icon图标怎么搞,因为如果你设置的不合适,就会导致生成的苹果图标在安装后比较显大,有的不太好看。所以这里我们就模仿tauri原本的图标尺寸搞一个大小差不多的图标出来。大小和其他的图标差别不大了。原创 2024-06-22 14:25:13 · 266 阅读 · 0 评论 -
深入研究websocket直播中signature这个参数怎么来的,模拟自己生成一个
这是一个webmssdk.es5.js包里面的函数,所以需要将这个webmssdk.es5.js包下载到本地,然后集成到window对象上,就可以调用这个函数了,我这里写了一个demo:可以看到已经生成了值。上一节课我们已经找到了生成signature这个字段的代码位置,就是这个B函数,嗯......听起来好像有点奇怪,但是它确实叫B啊,笑死。不管了,看一下里面的逻辑是啥。V()其实会返回一个函数,这个函数可以传递两个参数,有了这两个参数传递过来,那我们就可以安心研究B里面的逻辑了。原创 2024-06-21 16:16:46 · 843 阅读 · 6 评论 -
直播websocket签名signature字段生成逻辑,一步一步带你研究学习
我在这里做了一些注释,方便研究后续逻辑,我们这里看到了,l就是签名signature参数,所以搞出来l就可以了,但是l又依赖s和n,n是websocket_key很明显,那就继续研究s,但是s又依赖于t + a + r + o + ee.VERSION这五个,其中t + r + ee.VERSION = "1.0.14-beta.0"是明显的, 那就需要研究a + o是啥了,a是啥呢?是的,把这里面的逻辑搞清楚不是就可以搞到signature这个签名了嘛,好了,好好研究去吧,同学们,下课。原创 2024-06-21 11:41:04 · 652 阅读 · 0 评论 -
使用ant-design/cssinjs向plasmo浏览器插件的内容脚本content中注入antd的ui组件样式
但是方法就是比较繁琐,需要将antd的样式拷贝出来,然后贴到一个单独的css样式文件中,然后引入到内容脚本中。原创 2024-06-14 11:02:27 · 802 阅读 · 0 评论 -
PWA缓存策略区别NetworkOnly/CacheFirst/CacheOnly/NetworkFirst/StaleWhileRevalidate
回到在缓存策略里提到的,讲讲和缓存策略的参数。大致可以认定的是 cacheExpiration 会用来处理缓存失效,cacheName 决定了 cache 的索引名,cacheableResponse 则决定了什么请求返回可以被缓存。那么插件到底是怎么被处理,现在可以看函数了,函数处理了什么,它其实就是把里的参数找到对应方法,传入参数实例化,然后挂在在封装后的wrapperOptions的plugins参数里,但是只是实例化了有什么用呢?原创 2024-06-05 15:48:17 · 697 阅读 · 0 评论 -
js中的价格计算float价格乘以int数量的结果不精确
在JavaScript中,当一个float(浮点数)和一个int(整数)相乘时,结果将是一个浮点数。这是因为在乘法运算中,如果其中一个操作数是浮点数,JavaScript会将另一个操作数隐式地转换为浮点数,以确保精度。至于为什么1.1乘以10的结果是11.000000000001,这是由于浮点数在计算机中的表示方式导致的精度问题。在计算机中,。1.1在二进制中是一个无限循环的小数,所以在计算机中以浮点数形式存储时,它并不精确。原创 2024-05-30 11:17:01 · 382 阅读 · 0 评论 -
react使用react-quill富文本编辑器自定义上传图片,添加handlers后编辑器不显示问题
Quill 是一款 API 驱动、功能强大的现代富文本编辑器。它具有易于拓展、各平台表现一致性等优点。Quill 官方 1.0 版本于 2016 年 9 月发布,目前在 Github 上有41.8kStar。基本概念Module配置Quill 是以可拓展性和定制化为理念进行设计的。它尽可能简洁地实现了的编辑器的核心功能,并暴露接口供开发者进行定制化开发。这些核心功能就是通过 Module 来组织管理的。Toolbar,它的主要功能是让用户方便快捷地对文本进行格式化。原创 2024-05-29 20:59:50 · 2498 阅读 · 1 评论 -
uniapp页面vue3下拉触底发送获取新数据请求实现分页功能
页面下拉触底获取新数据实现分页功能实现方式有两种,根据自己的业务需求来定,不同的方案适用场景不一样,有的是一整个页面下拉获取新数据,有的是部分盒子内容滚动到底部时候实现获取新数据,下面讨论一下两种方式的区别。原创 2024-05-27 11:41:52 · 897 阅读 · 0 评论 -
uniapp开发vue3监听右滑返回操作,返回到指定页面,解决边缘区域监听错误问题
想要在uniapp框架中监听左滑或者右滑手势,需要使用touchstart和touchend两个api,因为没有原生的左右滑监听api,所以我们只能依靠这两个api来获取滑动开始时候的x坐标和滑动结束后的x坐标做比对,右滑的话,结束时候的x坐标-开始的x坐标肯定是大于一定阈值的,比如大于50,我们就算它右滑了。当滑动距离大于50,说明是右滑返回操作:处理自定义返回操作backHandle。原创 2024-05-24 16:31:16 · 970 阅读 · 0 评论 -
GitLens或者Git Graph在vscode中对比文件历史变化,并将历史变化同步到当前文件中
有时候我们上周改的代码,现在想反悔把它恢复过来,怎么办???很好,你有这个需求,说明你找对人了,那就是我们需要在vscode中安装这个插件:GitLens或者Git Graph,他们都是非常相似的工具,但是各有千秋,可以根据需要使用不同的插件来开发。原创 2024-05-24 10:38:34 · 3357 阅读 · 0 评论 -
xcode配置快速打开终端命令行工具教程
以往我们使用idea编辑器或者vscode编辑器的时候,我们可以快速的在编辑器下面打开终端进行相关的操作,但是在xcode里面却没有这么方便的功能按钮,真的不是很习惯,所以这次就来给xcode配置这么一个方便的功能。原创 2024-05-22 10:51:25 · 1037 阅读 · 0 评论 -
css定位方式之粘性定位元素,使用场景课程表或者财务报表或者活动表格,固定表头和左侧label显示
元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和(最近块级祖先 nearest block-level ancestor),包括 table-related 元素,基于toprightbottom和left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的注意,一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow是hiddenscrollauto或overlay。原创 2024-05-20 20:46:24 · 539 阅读 · 0 评论 -
xcode按下delete键不能删除不能使用,解决办法
在setting -> key bingdings里面管理绑定。而且还会报红色提示:意思是不可用的字符。原创 2024-05-20 11:56:14 · 423 阅读 · 0 评论 -
js前端控制清除浏览器缓存的几种方法
浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能。但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据。像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的。URL 参数后加上 "?在 URL 参数后加上 "?参数就是你要覆盖的页面,replace的原理就是用当前页面替换掉replace参数指定的页面。原创 2024-05-20 11:13:31 · 3030 阅读 · 0 评论 -
uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型
很高兴uv-ui是最终的幸运儿。为此我特意去uv-ui官网里面捐赠了一杯咖啡钱给作者,开源不易,要支持一下。原创 2024-05-20 07:30:00 · 2876 阅读 · 13 评论 -
uniapp小程序控制页面元素滚动指定距离
其他元素的滚动距离,可以通过设置横向滚动距离位置:scroll-left="100" 来实现横向滚动,设置scroll-top="100" 来实现纵向滚动。原创 2024-05-15 18:38:33 · 744 阅读 · 0 评论 -
uview-plus在uniapp项目中单选和复选框不显示问题
在我的uniapp小程序项目中,我使用了vue3+ts的组合,ui组件库使用了。原创 2024-05-14 11:09:03 · 480 阅读 · 0 评论 -
这10个css选择器你必须牢记于心,给你5分钟
在学习CSS选择器之前,我们需要弄清楚文档结构的父子关系,什么是父元素、子元素以及祖辈元素和后代元素这些概念,清楚了这些逻辑关系后,你才能更好的掌握CSS选择器。如下图所示,我们用树形结构来表示一个文档结构。如上图所示,相邻的两个节点(层级是连续的),他们之间是父子关系。如果两个元素之间跨越两个层级以上,它们是祖辈和后代的关系。原创 2024-05-13 17:46:23 · 754 阅读 · 0 评论 -
react-use让react开发速度70迈,心情是自由自在,爽
react-use是一个提供了各种 React Hooks 的开源库。react-use通过提供各种自定义的 React Hooks,使得在函数式组件中更容易地管理状态、副作用、生命周期等。这些 Hooks 涵盖了很多常见的场景,总的来说,react-use的作用就是扩展了 React Hooks 的功能,让你能够更方便地在函数式组件中实现各种功能,从而提高了 React 应用的开发效率和可维护性。安装。原创 2024-05-13 16:36:38 · 791 阅读 · 0 评论 -
前端组件库图片上传时候做自定义裁剪操作
不论是vue还是react项目,我们在使用antd组件库做上传图片的时候,有一个上传图片裁剪的功能,但是这个功能默认是只支持1:1的裁剪操作,如何做到自定义的裁剪操作?比如显示宽高比?是否可以缩放和旋转操作?那么上传的时候就会是这样子:number0.401string重置number1number3'rect''round'objectstring''numberstringstringstringfunctionfunctionobjectfunctionfalsereject。原创 2024-05-10 18:53:19 · 835 阅读 · 0 评论 -
vite开发的项目如何打包build不同环境的代码?适配不同环境api接口
其实vite打包的时候,主要是根据不同的环境来生成不同的打包文件的,所以不同的环境是怎么区分呢?默认情况下,开发服务器 (dev命令) 运行在(开发) 模式,而build命令则运行在production(生产) 模式,也就是在package.json里面的命令:这意味着当执行vite build时,它会自动加载在你的应用中,你可以使用渲染标题。在某些情况下,若想在vite build时运行不同的模式来渲染不同的标题,你可以通过传递--mode选项标志来覆盖命令使用的默认模式。还需要新建一个由于。原创 2024-05-10 15:40:47 · 989 阅读 · 0 评论 -
npm安装指定版本,npm删除依赖,卸载依赖
npm中安装指定的版本号,格式为 ‘包名@版本号’注意:已有版本的情况下需要先删除依赖,不能直接在package.json中改版本号,因为package-lock.json中仍然是修改前的版本号。原创 2024-05-08 14:48:26 · 990 阅读 · 1 评论