- 博客(70)
- 收藏
- 关注
RSS订阅原创 快速连接Mumu模拟器调试uniapp项目
摘要：本文介绍如何使用Mumu模拟器调试Uniapp项目。首先安装Mumu模拟器并运行项目，需下载ADB工具包（官网获取）。通过终端执行adb connect连接模拟器7555端口，再在HBuilderX中选择已连接的模拟器进行调试。注意需开启模拟器的开发者模式和USB调试功能。最后建议优先考虑使用Android Studio进行调试。全文详细说明了从环境配置到连接调试的完整流程。
2025-09-15 15:06:13
344
原创 [electron]开发环境驱动识别失败
摘要：在硬件调试时遇到驱动文件在开发环境无法识别的问题。尽管已确认绝对路径正确、添加PATH变量、以管理员运行，但仅在打包后正常。最终发现Windows会额外查找dll路径，将驱动文件复制到electron/dist目录后解决。原因是驱动内部会执行相对路径依赖解析，而不仅依赖传入的绝对路径。解决方法是在开发环境将dll拷贝到electron可执行文件所在目录。
2025-08-25 11:56:33
228
原创 [Vue] ref及其底层原理
本文澄清了Vue3中ref的实现原理，指出其底层与reactive一样基于Proxy，而非Vue2的Object.defineProperty。ref的设计主要是为了解决reactive无法处理基础类型的问题，通过将值包装为.value对象实现响应式。文章通过示例代码展示了ref的简化实现原理，并总结ref本质上是reactive的语法糖，最终都基于统一的响应式系统架构。
2025-05-27 17:20:35
446
原创 [Vue]浅浅了解vue3响应式的基本原理
Vue3的响应式原理核心是通过Proxy代理对象，在get时收集依赖，set时触发更新。具体实现： reactive函数创建Proxy对象，拦截get/set操作 effect函数注册副作用回调，执行时会被暂存到activeEffect get操作时通过track收集依赖，将effect回调存入WeakMap结构 set操作时通过trigger查找依赖，执行对应effect回调 整个过程建立了"属性-依赖"的映射关系，实现数据变化自动更新 这种机制使得Vue3能够高效追踪数据变化并触发相
2025-05-27 16:41:26
605
原创 [React]实现一个类zustand公共状态库
本文探索了React状态管理的新方式，通过分析useSyncExternalStore Hook实现类似zustand的轻量级状态库。作者创建了一个createStore函数，利用订阅者模式监听状态变化，并使用useSyncExternalStore连接React渲染机制。该方案相比传统Context方案更简洁，展示了React 18状态下管理库的设计思路。文章以计数器为例演示了实现过程，包括类型定义、状态更新和组件订阅，为理解现代状态管理库原理提供了实用参考。
2025-05-27 11:52:52
700
原创 [浏览器]缓存策略机制详解
本文介绍了浏览器资源缓存的三种策略：强缓存、协商缓存和不缓存。强缓存通过Expires或Cache-Control实现，命中缓存时直接返回200状态码；协商缓存通过Last-Modified/If-Modified-Since或ETag/If-None-Match判断，命中时返回304状态码；不缓存则每次都请求最新资源。作者通过Koa示例代码演示了三种缓存策略的实现方式，并建议在性能优化时优先考虑强缓存，其次是协商缓存，最后才是不缓存策略。文章还提供了测试方法，帮助开发者通过浏览器控制台和开发者工具验证缓存
2025-05-26 17:23:42
718
原创 [javascript]取消异步请求
同时abortController不仅仅只是用来取消异步请求，它还可以用来取消addEventListener事件监听，再也不需要通过removeEventListener来取消监听了，省的每次还得保留回调函数引用来移除监听器，直接一步到位使用abort取消。使用AbortController取消异步请求，比如xmlHttpRequest/fetch发起的请求。取消定时任务或者其他异步逻辑等。
2025-05-09 15:27:00
254
原创 [css]纯css绘制三角形
原理是通过绘制border边框来实现，边框颜色默认是透明transparent 而三角形的方向向哪一边（top, right, bottom, left），就设置哪一边的边框颜色。可以看到是一个矩形圆角边框外加一个箭头，聪明的你一定想到了用上面的方式来绘制三角形，然后自己设置矩形的border-radius来实现。这样就获得了一个向上的等腰三角形，注意不要设置它的width或者height，想要调整三角形的大小请设置它的border-width。
2025-05-09 11:47:55
631
原创 [flutter]切换国内源（window）
变量值：https://storage.flutter-io.cn。如题，切换到国内源避免总是连不上google导致卡住的问题。变量值：https://pub.flutter-io.cn。变量名：FLUTTER_STORAGE_BASE_URL。变量名：PUB_HOSTED_URL。继续打开cmd验证是否添加正常，输入。打开系统信息 选择高级系统设置。这样就可以切换到国内源上来了。添加完之后点确定关闭这3个弹窗。
2025-04-24 15:30:44
899
原创 [next.js] svgr/webpack
按照上面的配置后发现无效，组件直接报错了。思考了许久才发现是因为我在开发环境使用了–turbo，所以一些webpack的loader加载器不支持。来开启turbopack加速文件构建，所以之前的一些webpack loader之类的无法正常工作。直接在next.config.js里这样配下就好了，现在Next.js会把import进来的svg处理成react 组件。的官网文档里turbo的介绍中发现就有@svgr/webpack的示例。所以当时的笨方法是把.svg内容复制下来放到封装的react组件里。
2024-06-12 17:32:09
1348
1
原创 [next.js]移动端调试vconsole
直接在这个layout的useEffect里加载vconsole (这里只会在开发环境里启用vconsole，基于webpack/turbopack的tree shake功能，在正式环境是不会把vconsole打包进来的) 然后使用import导入三方库并初始化。新建一个tsx文件，在这个tsx组件的useEffect里复制上面的代码（这里也是为了防止正式环境把vconsole打包进去），然后在入口的layouts里使用dynamic动态导入这个组件并挂载到页面上；先安装vconsole。
2024-06-11 15:55:47
1386
3
原创 [pixi.js] 入门简单案例 简易时钟
老实说pixi虽然之前拿来做个几个简单的游戏，但是是好久前的了，又忘了，现在算是重新入门。官网版本已经更新到v8去了，而react相关的pixi库虽然支持react18 但还是v6-v7的版本，既然已经看了v8的文档，那就没必要等pixi-react了，直接照着pixi文档撸吧。
2024-06-07 15:37:13
871
2
原创 [next.js]pwa缓存
配置Next.js (v14+ App Router模式) 使其支持PWA缓存，配置server worker和mainfest.json，让项目支持离线访问和可安装。以上配置 我让其在生产环境自动创建server worker和workbox等文件并在浏览器加载时初始化init sw文件，第二次访问时便可以创建sw缓存。配置next.config.js。
2024-06-05 14:03:00
916
1
原创 [nextjs]路由拦截守卫踩坑
问题肯定是出现在middleware中间件上，通过调试发现这里的判断依然是false 读取不到请求头里cookie里的token,但是明明请求头里有token呢；next想实现类似vue这种路由拦截器，其实使用next.js自带的中间件就行了。只能暂时先使用笨方法，在设置cookies后刷新页面，重新像服务器请求页面；匹配的路由，发现依然跳转到了登录窗口，尝试过几次都是这样（原谅我菜）或许是存在路由器缓存，如果手动刷新页面就不会拦截到了；刷新状态即可，不需要手动刷新页面，完美解决！这里一切都是正常工作的。
2024-05-29 17:05:42
1493
原创 [React] 手动实现CountTo 数字滚动效果
这个CountTo组件npmjs里当然有大把的依赖存在，不过今天我们不需要借助任何三方依赖，造个轮子来手动实现这个组件。通过研究其他count to插件我们可以发现，数字滚动效果主要依赖于。通过js帧来让数字动起来，数字变化则是依赖于内部的。所以我们需要给组件默认值，防止没有参数时会报错。来选择是否开始动画，同时组件销毁后清除。是必要的，其他都是可选参数。同时写几个工具函数便于后面使用。首先声明组件props类型。好了 我要开启五一假期了！一些相关依赖的监听及处理。最后附上完整代码 –
2024-04-30 18:07:52
1062
2
原创 Next.js 移动端适配
tips: tailwindcss/autoprefixer是我安装的依赖，没安装的可以删除这两项，否则会报错！是无法处理内联样式的，就是说你写在标签style里的属性是不会被转换的，要注意！由于next.js内置了postcss，所以我们不需要再安装postcss/postcss-loader。属性是适配设计稿的宽度 比如设计稿是375 这里就是375。在根目录的layout.tsx里配置Meta标签；属性是转换后的精度（小数点多少位）以上就是我适配移动端的方案；我这里借助的转换依赖是。
2024-04-29 17:42:20
2342
原创 next.js v14 从入门到跑路
用next.js也有几天了，也是这么一个边看边用这么一个状态，现在主要使用app router模式，更新下next.js v14 app router模式方面的姿势吧。区别于前面的pages router, app router虽然也是根据目录结构来划分路由，但是它不再依赖于使用getServerSideProps/getStaticProps在服务器时期去获取数据，在app router模式下只区分服务器组件和客户端组件，且一些在pages路由模式下的方法也无法在app路由下使用。
2024-04-28 18:06:44
1973
1
原创 [PM2]window环境部署服务报错
使用pm2部署服务测试，在window环境下一直提示。1：通过直接运行当前电脑里的npm脚步来开启服务。这是因为node无法操作cmd控制台；比如当前电脑npm所在的路径是。3: 通过pm2配置文件启动。
2024-04-08 16:29:54
850
原创 vite ssr服务端渲染
阅读这一章里有说过，vue是支持服务端渲染的。通过创建vue组件实例，并使用将在服务器渲染好template并返回字符串结构，通过替换占位字符将渲染好的字符串输出到html上，这样的一个过程就实现了服务端渲染。也提到了如何去渲染SSR并提供了相关那么今天我们就按照官方给的示例来完成vue ssr的改造使用Node Koa框架来做服务器，且使用vue全家桶（router,pinia）开发项目。
2024-03-13 11:08:24
1917
3
原创 vite性能优化之数据预取
本思路与常规方案不同，也不太推荐。有能力的建议直接一步到位用ssr改造项目，后面我也会出一个vite ssr博客出来。"数据预取"功能类似于SSR中的注水，SSR的注水，是在服务端获取数据并渲染好页面结构，客户端只需要渲染好页面就行了，省去了创建DOM的过程。在服务器端获取的数据需要通过’注水‘ 插入到页面上，到客户端读取服务器请求的数据，这个过程叫’脱水‘，通过‘脱水’，避免了再次向服务器请求的操作；
2024-03-11 11:26:10
1320
原创 【browser】浏览器跨域处理
好久没有更新博客了，前段时间在疯狂面试，最近工作了才有时间来写博客。准备来讲讲面试里常问到的跨域处理吧。说到跨域，我们可能会下意思的说出jsonp，服务端配置cors，node配置代理等，再多了，我可能想不起来了。本篇本来打算只记录postMessage这种方式的，但光说这个显得太单薄了，所以一并都总结一下吧。跨域是什么，为什么会跨域？要想知道为什么，你得先知道什么是同源策略。
2023-04-27 18:37:30
856
原创 复制内容到剪贴板
比如我这里创建一个方法将dom的内容传入到方法里，然后选择右键粘贴，即输入你想要复制的内容。记录一个非常好用的js api，自动将文字复制到剪贴板；触发了这个方法后会将当前选中的文字复制到剪贴板上；
2022-12-09 13:38:06
409
原创 vite.config.ts加载.env环境变量
本地开发代理proxy读取env环境变量，vite构建项目读取env，vite.config读取环境变量。
2022-11-29 10:21:01
4544
原创 Vue基础之组件通信provide、inject
类似react中context的功能，vue的provide就非常适合在祖孙这种多层级的状态下进行通信。
2022-11-24 11:26:09
804
原创 [mysql]记录一些常用sql语句
select * from table where key like '%value%'模糊查询查询key里所有包含value的数据集合；其中value% 代表了以value开头的数据而%value则代表了以value结尾的数据;select count(*) from table查询返回表里所有数据的数量可以通过as count重命名countselect count(*) as count from table...
2022-04-27 16:08:40
719
原创 nodejs实现文件上传功能
基于koa2 实现前端上传图片到服务器的功能；前端部分我们就用原生input file上传 通过change事件手动触发上传事件<input type="file" ref="file" accept="images/*" @change="onChange" multiple />js 这里以上传一张图片为例 function onChange() { const list = (file.value as HTMLInputElement).files as FileL
2022-04-25 14:44:35
5427
原创 [javascript]手写一个懒加载组件
参考一下vantui里的List组件，实现一个印象中的懒加载功能（之所以说是印象中呢主要是vant打不开鸭，全凭记忆中的功能来摸索了）；不是我想重复造轮子，是我想自定义一些些功能。。。逻辑 主要是监听滚动条 计算设置好的滚动条到底部的高度来异步加载数据，期间异步加载尚未结束时不会重复执行加载操作，所以应该是用了节流。废话不多说，开始coding先声明一个组件 就叫他LazyLoad吧 <div class="lazy-load-ctx" ref="scrollRef">
2022-04-24 15:56:26
1175
原创 [TypeScript]监听事件event.target无法正确的获取属性
在使用ts开发项目的背景下，一般给dom添加监听事件时函数会拿到当前的事件对象；在我们指定了参数是Event后，我们去获取e.target里的属性时ts会提醒我们target里没有这个属性；类似于这样明明我们已经指定了事件的类型，为啥获取target里的值的时候会报错呢？？经过我多方查阅方才得知，ts无法知道当前这个事件是什么元素的事件的类型，不同dom元素的事件里的target值都不相同；需要指定当前这个事件具体是什么元素里的HTMLElement类型比如我这个是div 那我指定他是HTML
2022-04-24 13:35:11
4719
原创 【牛客网】前端面试手撕题讲解
最近在准备金三银四，刚好看到有一些常见的前端手写原理题目，遂记录下解题的思路（不是全部，好几道我也不会啊）；地址： 20道前端面试手撕题下面正文开始FDE1 事件委托描述请补全JavaScript代码，要求如下：给"ul"标签添加点击事件当点击某"li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”…"注意：必须使用DOM0级标准事件（onclick）dom0级事件只有两个，一个是直接在dom上绑定onclick事件，另一个是获取dom元素并绑定o
2022-03-04 17:45:03
2049
1
原创 Vue3 双向绑定原理浅入
众所周知 vue2所使用的双向绑定原理是用了Object.defineProperty 来进行数据的拦截处理，而vue3使用了es6的 proxy代理拦截数据，那么 proxy是啥呢？菜鸟教程 ES6 Reflect 与 Proxyproxy小试牛刀先声明一个变量const obj = { name: 'dingzong'};创建一个proxy实例const _obj = new Proxy(obj, {})输出_obj构造函数proxy第二项是一个对象，对象里有内置十三种方法来捕
2022-02-14 11:15:43
2150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人