- 博客(583)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 记录-VUE中常用的4种高级方法
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助1. provide/injectprovide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。使用 provide/i...
2023-05-06 17:57:00
984
原创 uni-app开发经验分享十四：小程序超过2M限制的方法——分包加载
起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。小程序分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解...
2020-12-08 20:11:00
602
2
原创 uni-app开发经验分享一： 多页面传值的三种解决方法
开发了一年的uni-app，在这里总结一些uni-app开发中的问题，提供几个解决方法，分享给大家：问题描述：一个主页面，需要联通一到两个子页面，子页面传值到主页面，主页面更新问题难点：首先我们需要一个逻辑模型(这里随便画了一个)通过这个模型，我们可以看到一个问题，子页面的内容怎么传回主页面，怎么让这个传回的方式更安全有效，这也是这个问题的难点，我总结了三种解决方法，在这里分...
2020-09-17 11:54:00
351
原创 网页添加 Live2D 看板娘
参考并转载于https://www.fghrsh.net/post/123.html个人网站添加Live2D 看板娘的方法：在页面中加入以下代码(已经全部处理完，可以根据需求适当修改)：<!DOCTYPE html><html><head> <title>Live2D 看板娘 测试dome</title>...
2020-09-11 09:46:00
1771
原创 webpack和vite的区别，为什么vite启动速度比webpack快？
总的来说，Vite 之所以比 Webpack 快，主要是因为它采用了不同的开发模式、充分利用了现代浏览器的 ES Modules 支持、使用了更高效的底层语言，并优化了热更新的处理。这些特点使得 Vite在大型项目中具有显著的优势，能够快速启动和构建，提高开发效率。如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-09-18 17:23:52
841
原创 简单比较 http https http2，我们要如何把http升级为https
超文本传输协议（HTTP）是用于传输诸如HTML的超媒体文档的应用层协议。它被设计用于Web浏览器和Web服务器之间的通信，但它也可以用于其他目的。HTTP遵循经典的客户端-服务端模型，客户端打开一个连接以发出请求，然后等待它收到服务器端响应。HTTP是无状态协议，意味着服务器不会在两个请求之间保留任何数据（状态）。虽然通常基于TCP / IP层，但可以在任何可靠的传输层上使用;也就是说，一个不会静默丢失消息的协议，如UDP。
2024-09-06 19:40:45
1117
原创 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
407
转载 记录--终于搞懂了！原来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
81
原创 限时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
906
转载 记录--进度条真的是匀速的，不信你看
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
39
原创 JavaScript中==和===的区别
JavaScript 中的相等运算符无疑是新手开发者最容易混淆的知识点之一。==和===这两个运算符的细微差别往往会在代码中造成一些令人困惑的行为在本文中,我们将深入探讨这两个相等运算符的工作原理,比较它们的特点和局限性让我们开始吧!本文讲解了==和===的数据对比之间的区别，通过代码示例深入分析如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-07-19 17:02:32
967
转载 记录--如何修改第三方npm包？
在开发过程中发现npm包的Bug，首先向原作者提交issue或Fork代码修改后提交合并请求。但遇到不活跃或拒绝修改的情况，项目等待时间会很长。这时可以使用补丁方案或换日方案进行解决。补丁方案中，如果是npm或yarn v1，可以使用patch-package工具包处理；如果是yarn v2或pnpm，可以使用各自的patch命令。换日方案，则是修改源码，发布新的npm包后，利用pnpm的别名功能，将所有依赖原npm包的地方，全部替换为新的包。
2024-07-18 17:27:22
124
1
转载 记录--uniapp兼容微信小程序和支付宝小程序遇到的坑
例如，{“key1”: “value1”, “key2”: “value2”,} 这样的写法是错误的。App端和H5端支持 v-html ，微信小程序会被转为 rich-text，其他端不支持 v-html。open-type=“contact” 仅支持：微信小程序、百度小程序、快手小程序、抖音小程序。首先在支付宝开放平台开通蚂蚁智能客服：支付宝开放平台–>控制台–>小程序信息–>在线客服。原因：在JSON中，对象的最后一个元素后面不应该有逗号。参考：小程序文档 - 支付宝文档中心。
2024-07-17 18:06:26
538
原创 bundletool工具使用(Android aab包安装)
由于现在上传Google play只需要上传.aab文件，不需要再上传apk的安装包，然而在测试中只需要对apk的包进行测试，aab的包虽然在理论上与apk的包是相同的，但是在测试到上线过程中缺少对aab包的测试过程，安装aab包需要几个步骤，需要将aab的包转化成apks格式后进行安装。
2024-07-16 17:45:55
571
原创 从0到1打造一个 WebRTC 应用
2020 年初突如其来的新冠肺炎疫情让线下就医渠道几乎被切断，在此背景下，微医作为数字健康行业的领军者通过在线问诊等形式快速解决了大量急需就医人们的燃眉之急。而作为微医 Web 端在线问诊中重要的一环-医患之间的视频问诊正是应用了接下来讲述的 WebRTC 技术。
2024-07-15 17:53:38
780
原创 记录---实现抖音 “视频无限滑动“效果
在家没事的时候刷抖音玩，抖音首页的视频怎么刷也刷不完，经常不知不觉的一刷就到半夜了😅不禁感叹道 ＂垃圾抖音，费我时间，毁我青春😅＂virtualTotal：页面中同时存在多少个 SlideItem，默认为 5。//页面中同时存在多少个SlideItem},设置这个值可以让外部组件使用时传入，毕竟每个人的需求不同，有的要求同时存在 10 条，有的要求同时存在 5 条即可。不过同时存在的数量越大，使用体验就越好，即使用户快速滑动，我们依然有时间处理。
2024-07-13 17:02:23
886
转载 记录---IOS审核打包被驳回—Guideline 4.3
记录自己的辛酸历程：我们的第一个版本已经成功发布，然后我在第二个版本修改介绍图等，又被4.3打回。此时我再次改回第一个版本的元数据，苹果已经不理我了。提交审核后长时间处于等待审核状态（四天）。无奈走了加急，加急后还是以4.3打回，太痛苦了。但是此时我能确定我们的应用并不违反4.3，因为和第一版保持了高度一致，那么大概率是误审。
2024-07-12 18:30:56
289
原创 前端预览图片的两种方式：转Base64预览或转本地blob的URL预览，并再重新转回去
createObjectURL是JS自带的一个函数，它可以将Blob、File等二进制文件转为浏览器可直接显示的URL地址，从而方便进行展示。一般情况下，预览图片功能，是后端返回一个图片地址资源（字符串）给前端，如：ashuai.work/static/img/…之所以有这个图片地址资源，也是因为之前有上传图片的操作，后端存到文件服务器上，生成一份图片url地址。但是某些情况下，需要前端去临时预览一下图片（是否上传是后续的操作，需要先看一下）'图片读取的Base64的值为--->'
2024-07-11 18:06:19
1176
原创 前端如何取消接口调用
对于用户主动离开页面，或者用户的网络很卡的时候（预期返回顺序是：接口1 => 接口2；但是接口1返回太慢，导致顺序混乱。）这就需要手动终止请求。构造函数AbortController的实例信号量signal（可以作为ref存储起来），signal作为fetch的参数，在每次请求的时候，可以手动调用abort方法，取消上一次的请求。如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-07-10 18:23:47
1057
原创 如何快速实现一个无缝轮播效果
轮播图是我们前端开发中的一个常见需求，在项目开发中，我们可以使用element、ant等UI库实现。某些场景，为了一个简单的功能安装一个库是没必要的，我们最好的选择就是手搓。我们来看一个需求上述需求核心就是实现一个无缝轮播的切换效果。在本教程中，我们通过简单代码实现了无缝轮播效果，样式是左右切换，我们也可以通过样式控制实现上下切换的效果，比如将translateX设置为translateY即可。opacity: 0;
2024-07-09 17:21:18
1088
原创 你可以终止 forEach 吗？
虽然 JavaScript 中的 forEach 方法提供了一种简单的数组迭代方法，但它缺乏中断或停止中循环的灵活性。幸运的是，像 for…of 循环这样的替代方法，以及像 some() 和 every() 这样的方法，可以替代 forEach。如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-07-08 19:26:47
470
原创 8种方案解决移动端1px边框的问题
css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为： 设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。
2024-07-05 17:35:21
820
转载 记录--淘宝、京东复制好友链接弹出商品详情是如何实现的
最近接到了一个需求很有意思，类似于我们经常在逛购物平台中，选择一个物品分享给好友，然后好友复制这段文本打开相对应的平台以后，就可以弹出链接上的物品。实现过程也比较有意思，特来分享一下实现思路🎁。
2024-07-04 18:25:48
88
原创 前端如何优雅的添加水印及去除水印
在最近接手的一个项目中，需要对整个页面加上一个水印，还需要动态修改增加背景色功能。由于使用的第三方库不支持背景色功能，故记录一下。文末会附上如何利用技术手段去除水印。
2024-07-03 17:24:20
901
原创 为什么 [] == ![] 为 true?
面试官问我，[] ==![] 的结果是啥，我：蒙一个true；面试官：你是对的；我：内心非常高兴；面试官：解释一下为什么；我：一定要冷静，要不就说不会吧；这个时候，面试官笑了，同学，感觉你很慌的一批啊！不必慌张，我们慢慢来！在当今的编程领域，面试不仅是技术能力的考察，更是思维灵活性与深度理解的试金石。面试中偶遇诸如 [] ==![] 表达式这类题目，虽让人初感意外，实则深藏玄机，考验着我们对于JavaScript这类动态语言特性的透彻理解。
2024-07-02 18:02:10
1032
1
原创 前端如何用密文跟后端互通？原来那么简单！
SM2是一种基于椭圆曲线密码学的非对称加密算法。sm-crypto提供了SM2的密钥生成、加密、解密等功能。通过调用相关方法，开发者可以轻松地生成SM2密钥对，并使用公钥进行加密、私钥进行解密。// 生成密钥对// 公钥// 私钥// 待加密的消息// 使用公钥加密// 使用私钥解密console.log('加密结果:', encrypted);console.log('解密结果:', decrypted.toString());// 输出原始消息。
2024-07-01 18:30:04
835
原创 微信内置H5支付
🧑💻 写在开头点赞 + 收藏 === 学会🤣🤣🤣场景是用户通过微信扫app内的收款码，跳到一个h5页面。然后完成支付。使用微信扫码，码是app内生成的，码的内容是一个h5页面链接，扫码完成后跳转到自定义的h5支付界面。扫码进入后，将页面展示所需要的参数进行缓存起来，存到本地。 然后需要微信静默授权。参数说明当授权后，会自动跳转到配置回调页面，也就是配置的‘redirect_uri’ 相当携带这code，重新打开了项目然后解析url中的code，将code取出，支付的时候将code传给后
2024-06-29 17:46:00
774
原创 sessionStorage 能在多个标签页之间共享数据吗？
最近，我的一个朋友在面试中被一个关于 sessionStorage 的问题难住了。我们来聊聊这个话题。
2024-06-27 18:08:31
617
转载 记录--vue3中使用Swiper组件
请注意，如果您传递这些参数而不指定其元素（例如，没有 navigation.nextEl、pagination.el 等），Swiper Vue 组件将为导航、分页和滚动条创建所需的元素。默认情况下，Swiper Vue 使用 Swiper 的核心版本（没有任何附加模块）。如果要使用Navigation、Pagination等模块，必须先安装它们.// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可。要使用效果，您必须首先导入并安装它们（与所有其他模块一样）。
2024-06-26 17:39:03
98
原创 vue如何实时展示海康威视摄像头多画面？
rtsp流地址就是rtsp://用户名:密码@192.168.1.212:554/Streaming/Channels/101。RTSP流地址正确且取流成功，VLC的界面会显示监控画面。否则会报错，报错信息写在了日志里，在[工具]>[消息]里可以看到。rtsp://用户名:密码@IP:554/Streaming/Channels/101 用户名和密码。IP就是登陆摄像头时候的IP 在浏览器直接输入192.168.1.212回车可打开该摄像头的登录页。1.2调整视频编码为H.264。【知识储备和驱动安装】
2024-06-25 18:31:47
981
2
原创 骚操作：如何让一个网页一直处于空白情况？
🧑💻 写在开头点赞 + 收藏 === 学会🤣🤣🤣如题，惯性思路很简单，就是直接撸上一个空内容的html。注：以下都是在现代浏览器中执行，主要为**Chrome 版本 120.0.6099.217（正式版本） （64 位）和Firefox123.0.1 (64 位) **؏؏☝ᖗ乛◡乛ᖘ☝؏؏~但是，要优雅~咱玩的花一点，如果这个HTML中加入一行文字，比如下面这样，如何让这行文字一直不显示出来呢？思考几秒~有了，江湖一直传言，Javascrip代码执行不是影响Render树生成么，上循环！
2024-06-24 18:27:26
309
转载 记录--单页面首屏优化，打包后大小减少64M，加载速度快了13.6秒
大小、请求数、加载时间都大大减少注意优化后的时间chunk-vendors.js和app.js加载一共耗时1.59s，不是1.11+1.59,chunk-vendors的下载解析会阻塞app.js的下载解析，所以一共1.59s。前：本文转载于：https://juejin.cn/post/7359077652445806642如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
2024-06-20 18:51:51
51
转载 记录--前端如何截屏
在这个示例中，我们首先设置了页面的视口大小为 1200x800，然后打开了一个页面，并模拟了页面的滚动，每次滚动800px。在 Puppeteer 中实现截取长图的功能相对复杂，因为 Puppeteer 默认只能截取当前视口（Viewport）的内容，无法直接截取整个页面的内容。但可以通过模拟页面的滚动，并多次截取不同部分的内容，然后将截取到的内容拼接成一张长图来实现。**转换为 data URL：**使用 canvas 的 toDataURL 方法将 canvas 中的内容转换为 data URL。
2024-06-19 18:57:08
64
转载 记录--createObjectURL这个API真好用，我举几个场景你们就懂了
随着我用 URL.createObjectURL 这个 API 越来越多次，越发感觉真的是一个很好用的方法，列举一下我在项目中用到它的场景吧~
2024-06-18 18:38:12
158
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人