- 博客(604)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 记录-VUE中常用的4种高级方法
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助1. provide/injectprovide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。使用 provide/i...
2023-05-06 17:57:00
1012
原创 uni-app开发经验分享十四：小程序超过2M限制的方法——分包加载
起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。小程序分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解...
2020-12-08 20:11:00
634
2
原创 uni-app开发经验分享一： 多页面传值的三种解决方法
开发了一年的uni-app，在这里总结一些uni-app开发中的问题，提供几个解决方法，分享给大家：问题描述：一个主页面，需要联通一到两个子页面，子页面传值到主页面，主页面更新问题难点：首先我们需要一个逻辑模型(这里随便画了一个)通过这个模型，我们可以看到一个问题，子页面的内容怎么传回主页面，怎么让这个传回的方式更安全有效，这也是这个问题的难点，我总结了三种解决方法，在这里分...
2020-09-17 11:54:00
391
原创 网页添加 Live2D 看板娘
参考并转载于https://www.fghrsh.net/post/123.html个人网站添加Live2D 看板娘的方法：在页面中加入以下代码(已经全部处理完，可以根据需求适当修改)：<!DOCTYPE html><html><head> <title>Live2D 看板娘 测试dome</title>...
2020-09-11 09:46:00
1902
原创 利用Vue+intro.js实现页面新手引导流程功能
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下。
2025-02-19 19:30:45
249
转载 记录---前端部署后自动提醒用户更新
前端项目经常碰到更新部署了，但是更新过的功能并没有及时的展示，还需要刷新一下页面，才能看到最新的内容。如果是远程给客户进行的部署，还要口头告知客户需要刷新，体验不友好。这里涉及到了webpack的配置和node的一些内容。webpack依赖node的环境，所以在webpcak的配置中就能使用node中自带的fs以及path，在指定的地方输出或者生成我们需要的内容信息。本文转载于：https://juejin.cn/post/7428793777984208896。
2025-02-13 16:07:04
16
转载 Vue实现一个“蛇形”步骤条
在现代Web应用中，步骤条（StepProgression）作为一种常见的UI组件，广泛应用于表单提交、任务进度以及多步骤操作等场景。为了提升用户体验，设计师往往会采用更加直观和有趣的方式展示步骤进度。今天，我们将通过Vue 实现一个“蛇形”步骤图组件，这种独特的设计方式不仅能清晰地表达步骤的完成状态，还能给用户带来更加流畅和动态的交互体验。
2025-02-06 17:44:05
48
转载 记录---当window.open被ios安全机制拦截，我掏出3种方案，终于跳转成功！
今天在开发H5的时候，遇到了一个bug，就是在ios环境，在某些情况下执行window.open不生效，所以正好趁此机会研究了一下window.open。url：「可选参数」，表示你要加载的资源URL或路径，如果不传，则打开一个url地址为about:blank的空白页。
2025-01-22 17:06:37
38
转载 记录---浏览器多窗口通信有效实践总结
浏览器多窗口通信有多种方法可供选择，每种方法都有其适用场景。以下是各方法的优缺点总结：根据项目需求选择合适的通信方式，可以大大提升应用的性能和用户体验。本文转载于：https://juejin.cn/post/7459359268523098138如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2025-01-15 17:51:12
72
转载 记录---vue3如何封装一个基础甘特图？保姆级教程
{ width: ${(dates.length + 5) * itemWidth}px }”，给每一项都赋予宽度，这个 + 5 就是侧边栏的宽度。实际宽度：（结束日期在数组中的位置 - 起始日期在数组中的位置 + 1）x 每个日期的宽度（itemWidth）,宽度需要加一个单位，这很好理解吧，假设起始日期在0位置，结束日期在1位置，1 - 0 = 1，而实际占了两个位置，所以需要 + 1。itemWidth: 头部每个日期的宽度（可以根据实际需求自行调整，我这只需要展示日，所以设定的比较短。
2025-01-13 17:50:06
174
转载 记录---JS 的蝴蝶效应 —— 事件流
在 JavaScript 的世界里，事件流就像一只永不停歇的蝴蝶，每一个动作、每一个点击、每一个滚动，都会触发一连串的蝴蝶效应。作为一名开发者，掌握事件流的艺术，不仅能让你的网页更加生动、更加交互，也能让用户体验到前所未有的舒适。那么，事件流到底是什么？它又是如何影响我们对网页的设计和开发？接下来让我们来向这只蝴蝶学习一下。就像蝴蝶扇动翅膀可以引起远方的风暴一样，JavaScript 事件流的每一个细节都可能对我们的网页应用产生深远的影响。
2025-01-09 19:15:01
38
转载 记录---前端实现签字效果+合同展示
但是获取到了区域并不行，因为我还需要将其截取，然后转成图片传给后端，且还要让后端知道到底是横着放 html 模板里还是竖着放，思来想去，感觉直接返回 base64 的 img 元素给后端更好，因为我就可以直接设置style，后端只需要放到对应的地方就行，所以save继续修改为。其实这里还有一个问题，就是不知道横屏后的用户到底是哪边横屏，可能要旋转-90deg，也可能是正90deg，这里菜鸟想的是一个简单办法，就是给个示例文字，让用户根据示例文字进行签字！是flex搞的鬼，菜鸟这里就用了个简单办法。
2024-12-30 19:56:30
103
原创 记录--uniapp 安卓端实现录音功能，保存为amr/mp3文件
功能实现需要用到MediaRecorder、navigator.mediaDevices.getUserMedia、Blob等API，uniapp App端不支持，需要借助renderjs来实现。
2024-12-23 19:48:57
1342
转载 记录---跨域问题？同源策略大全
跨域：通常出现在Web开发中，特别是在涉及到Ajax请求或Fetch API调用时，当一个网页尝试从不同的源加载资源时，就会遇到跨域问题。这里所说的“不同的源”，是指请求资源的源（由协议、域名和端口号组成）与提供资源的源不一致。协议(http), 域名(192.168.3.1), 端口(3000), 路径(/home)同源策略：是为了保护用户的隐私和数据安全，如果没有同源策略，恶意网站可以通过脚本非法获取其他网站上的敏感数据，所以浏览器会通过实施同源策略来限制不同源之间的直接通信。
2024-12-18 17:14:11
32
转载 记录---docker安装及配置jenkins全流程
我们从其他jenkins系统通过ThinBackup备份数据后，把数据拷贝到当前服务器jenkins的备份路径对应的宿主机路径文件夹中，通过本文上面的yaml文件可以看出，入restore，选择我们迁移过来的对应备份，点击restore即可完成老系统所有数据的迁移。这时候需要输入生成文件路径，默认即可，同时要输入密码，你个人输入的密钥要记住，后面配置要用。填入界面之后，会进入下面这样的页面，安装插件，创建管理员账号，后面跟着界面操作就行了。务器jenkins系统界面中，进入ThinBackup 管理页面。
2024-12-09 20:05:40
315
原创 获取剪切板的图片 -＞ File -＞ Base64 -＞ Blob -＞ url -＞ Image，以及它们之间的各种相互转换
本来想直接获取这个对象的，然鹅这个 clipboardData 对象只存在于 ClipboardEvent 事件中，只能在事件（这里是 parse 事件）触发的时候才能拿到。它俩可以用构造函数直接相互转换，没有中间商 Base64。题外话：可以直接用 navigator.clipboard 获取到剪切板内容（拿到 Blob 对象）由于 File 是特殊类型的 Blob，所以跟 File -> Base64 是一样的。才发现 Base64 是 DataUrl 的编码，可以理解为一种东西吧。
2024-12-03 19:28:17
731
转载 记录---前端实现画中画超简单，让网页飞出浏览器
今天，我来介绍一个非常酷的前端功能：文档画中画 (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过，网页上的任何内容能悬浮在桌面上？😏🎬 视频流媒体的画中画功能你可能已经在视频平台（如腾讯视频、哔哩哔哩等网页）见过这种效果：视频播放时，可以点击画中画后。无论你切换页面，它都始终显示在屏幕的最上层，非常适合上班偷偷看电视💻。
2024-12-02 19:52:05
116
转载 记录---前端如何优雅通知用户刷新页面？
老板：新的需求不是上线了嘛，怎么用户看到的还是老的页面呀窝囊废：让用户刷新一下页面，或者清一下缓存老板：那我得告诉用户，刷新一下页面，或者清一下缓存，才能看到新的页面呀，感觉用户体验不好啊，不能直接刷新页面嘛？窝囊废：可以解决（OS：一点改的必要没有，用户全是大聪明）c端需要经常进行一些文案调整，一些老版的文字字眼可能会导致一些舆论问题，所以就需要更新之后刷新页面，让用户看到新的页面。思考问题为什么产生。
2024-11-29 18:28:55
83
转载 记录---前端中断请求的方式与原理
自然而然的，我们就想到，能否给cancelToken挂载一个Promise实例的属性，然后将这个Promise属性的resolved方法传递给cancel，这样，当执行cancel函数的时候，其实就是执行resolve()，从而改变Promise实例的状态，我们就能在Promise实例的then方法中执行需要的操作。在第9行中，我们创建了一个AbortController信号源，在fetch请求的时候传递一个信号给请求的signal参数，之后便可以在请求的外部通过调用信号源的abort方法来取消请求。
2024-11-22 17:48:48
159
转载 记录---前端如何实现文件的在线预览？
🧑💻 写在开头在计算机的世界中，有各种各样的文件，文件类型千奇百怪，作为一名前端开发工程师，我们如何来实现这些文件的在线预览呢？在这篇文章，我们已经实现了我们监听了树的点击事件当点击某个文件的时候能够拿到这个文件的相关信息，包括File对象。我们的dom结构大概是这样的，根据我们当前点击的文件类型展示不同的元素。那么我们如何读取文件的内容呢？这里我们需要用到一个api，FileReader - Web API | MDN。
2024-11-21 17:14:56
115
转载 记录---nextTick用过吗？讲一讲实现思路吧
通过这样分成三步、循序渐进的方式，我们深入探讨了 nextTick 的原理和实现机制。希望这篇文章能够对你有所帮助，让你在前端开发的道路上更加得心应手！🚀本文转载于：https://juejin.cn/post/7433439452662333466如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-11-16 17:00:10
103
转载 记录--微前端qiankun接入vue2&vue3项目
部署上线需要注意资源路径的问题不同服务器下的项目需要处理跨域问题qiankun还有手动加载微应用的方式，暂时还没有用到，可查看官方文档本文转载于：https://juejin.cn/post/7395387245313163327如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-11-15 17:28:06
130
转载 记录--nginx（前端必会-项目部署-精简通用篇）
最近在公司部署项目时遇上了一点关于nginx的问题，于是就想着写一篇关于nginx的文章，主要给小白朋友分享，nginx是什么，nginx有什么用，最后到nginx的实际应用，项目部署。
2024-11-14 18:49:30
50
原创 webpack和vite的区别，为什么vite启动速度比webpack快？
总的来说，Vite 之所以比 Webpack 快，主要是因为它采用了不同的开发模式、充分利用了现代浏览器的 ES Modules 支持、使用了更高效的底层语言，并优化了热更新的处理。这些特点使得 Vite在大型项目中具有显著的优势，能够快速启动和构建，提高开发效率。如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-09-18 17:23:52
926
原创 简单比较 http https http2，我们要如何把http升级为https
超文本传输协议（HTTP）是用于传输诸如HTML的超媒体文档的应用层协议。它被设计用于Web浏览器和Web服务器之间的通信，但它也可以用于其他目的。HTTP遵循经典的客户端-服务端模型，客户端打开一个连接以发出请求，然后等待它收到服务器端响应。HTTP是无状态协议，意味着服务器不会在两个请求之间保留任何数据（状态）。虽然通常基于TCP / IP层，但可以在任何可靠的传输层上使用;也就是说，一个不会静默丢失消息的协议，如UDP。
2024-09-06 19:40:45
1410
原创 axios中的那些天才代码！看完我实力大涨！
创建后的axios包含defaults和interceptors属性，其对象原型__proto__上（指向Axios的prototype）包含request、get及post方法，因此，我们现在可以使用aixos.post()的方法模拟调用接口了。上面的代码中，我们在request属性上创建了一个通用的接口请求方法，get和post实际都调用了request，但内部传递了不同的参数，这和axios(config)、axios.post()有异曲同工之妙。参考aixos的用法， 现在，我们需要创建实例对象。
2024-07-29 17:34:44
434
转载 记录--终于搞懂了！原来vue3中template使用ref无需.value是因为这个
众所周知，vue3的template中使用ref变量无需使用.value。还可以在事件处理器中进行赋值操作时，无需使用.value就可以直接修改ref变量的值，比如：change msg。你猜vue是在编译时就已经在代码中生成了.value，还是运行时使用Proxy拦截的方式去实现的呢？注：本文中使用的vue版本为3.4.19。
2024-07-27 17:19:25
172
原创 限时10分钟，你会怎么实现这段async/await代码？
async/await是一种以更舒服的方式使用promise的特殊语法，让异步逻辑更加简洁可读，避免promise的链式写法。Generator：译为生成器，是ECMAScript 6新增的一个极为灵活的结构，拥有在一个函数块内暂停和恢复代码执行的能力；yield 1;yield 2;yield 3;声明生成器函数需要使用function* 函数名()语法，其实function函数名()也可以，因为是函数的特殊语法，所以建议使用前者靠近function的写法。
2024-07-26 17:59:38
958
转载 记录--进度条真的是匀速的，不信你看
1.设置鼠标旋转事件if(!let X = 0;let Y = 0;} else {} else {2.设置主视图和45度视图这个项目是为了熟悉3d变换，在使用translateZ、translateX想了很久，脑子不够用了。还有很多地方可以调整为配置项，设置块数，块颜色等，甚至封装成api，下次一定。本文转载于：https://juejin.cn/post/7370682158103347238如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-07-22 18:17:41
73
原创 JavaScript中==和===的区别
JavaScript 中的相等运算符无疑是新手开发者最容易混淆的知识点之一。==和===这两个运算符的细微差别往往会在代码中造成一些令人困惑的行为在本文中,我们将深入探讨这两个相等运算符的工作原理,比较它们的特点和局限性让我们开始吧!本文讲解了==和===的数据对比之间的区别，通过代码示例深入分析如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-07-19 17:02:32
1043
转载 记录--如何修改第三方npm包？
在开发过程中发现npm包的Bug，首先向原作者提交issue或Fork代码修改后提交合并请求。但遇到不活跃或拒绝修改的情况，项目等待时间会很长。这时可以使用补丁方案或换日方案进行解决。补丁方案中，如果是npm或yarn v1，可以使用patch-package工具包处理；如果是yarn v2或pnpm，可以使用各自的patch命令。换日方案，则是修改源码，发布新的npm包后，利用pnpm的别名功能，将所有依赖原npm包的地方，全部替换为新的包。
2024-07-18 17:27:22
231
1
转载 记录--uniapp兼容微信小程序和支付宝小程序遇到的坑
例如，{“key1”: “value1”, “key2”: “value2”,} 这样的写法是错误的。App端和H5端支持 v-html ，微信小程序会被转为 rich-text，其他端不支持 v-html。open-type=“contact” 仅支持：微信小程序、百度小程序、快手小程序、抖音小程序。首先在支付宝开放平台开通蚂蚁智能客服：支付宝开放平台–>控制台–>小程序信息–>在线客服。原因：在JSON中，对象的最后一个元素后面不应该有逗号。参考：小程序文档 - 支付宝文档中心。
2024-07-17 18:06:26
1028
原创 bundletool工具使用(Android aab包安装)
由于现在上传Google play只需要上传.aab文件，不需要再上传apk的安装包，然而在测试中只需要对apk的包进行测试，aab的包虽然在理论上与apk的包是相同的，但是在测试到上线过程中缺少对aab包的测试过程，安装aab包需要几个步骤，需要将aab的包转化成apks格式后进行安装。
2024-07-16 17:45:55
674
原创 从0到1打造一个 WebRTC 应用
2020 年初突如其来的新冠肺炎疫情让线下就医渠道几乎被切断，在此背景下，微医作为数字健康行业的领军者通过在线问诊等形式快速解决了大量急需就医人们的燃眉之急。而作为微医 Web 端在线问诊中重要的一环-医患之间的视频问诊正是应用了接下来讲述的 WebRTC 技术。
2024-07-15 17:53:38
991
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人