weixin_30980795的博客

原创 网站以后不只给人看，还要给 AI Agent 用：WebMCP 是什么？

WebMCP：让网页成为AI Agent的友好工具 本文介绍了WebMCP这一新兴技术如何改变前端开发。传统网页仅面向人类用户设计交互界面，而随着AI Agent的普及，网页需要同时为AI提供结构化能力接口。WebMCP允许网页明确告知Agent其具备的功能、所需参数和返回结果，使Agent能直接调用网页能力而非模拟人类操作。这种转变要求前端开发者扩展工作边界，从单纯设计用户界面转向同时考虑Agent的任务建模、状态管理、权限控制和结构化输出。文章通过"AI选题助手"案例，对比了普通网页与Agent-rea

原创 Vue3 组件库实战(七)：从本地到 NPM：版本管理与自动化发布指南（下）

本文介绍了使用Changesets工具实现组件库版本管理与自动化发布的完整流程。主要内容包括：Changesets的核心配置解析（如版本提升策略、依赖更新规则），规范化的"记录变更-提升版本-正式发布"三步流程，以及发布Patch补丁版本的具体操作示例。文章还针对常见发布错误（授权失败、2FA验证等）提供解决方案，并给出组件库的使用指南。最后强调构建生产级组件库需要统一构建、开发者体验、版本契约和质量守卫四大支柱，指出工程化对预防未来问题的重要性。

原创 Vue3 组件库实战(六)：从本地到 NPM，Vue 组件库工程化构建与打包全指南（上）

本文深度解析了生产级组件库my-antd-ui的工程化构建全流程。重点解决了三大核心命题：统一打包、包依赖建立和统一测试。通过Monorepo结构实现一键构建，优化package.json配置支持多种模块规范，并详细介绍了库模式打包的关键配置，包括external排除重复依赖、globals全局变量映射等。特别强调了类型声明文件的自动生成配置，确保用户获得完整的类型提示。文章提供了完整的vite配置示例，分享了工程化实践中的核心技巧，帮助开发者建立标准化、自动化的组件库生产体系。

原创 Vue3 组件库实战(五)：Icon 图标组件的设计与实现

本文介绍了Vue3企业级Icon图标组件的设计与实现。通过封装统一组件解决手动使用SVG的代码冗余、维护困难等问题。组件设计遵循简单易用、高度可定制和扩展性强的原则，支持通过name属性快速调用内置图标，并可自定义大小、颜色等样式。核心实现包括：定义组件属性、创建图标映射表、计算动态样式、获取图标组件和模板渲染逻辑。该组件基于Ant Design Icons，采用计算属性和动态组件等技术，提供了规范化的图标使用方案。

原创 Vue3 组件库实战(四)：Vue3 组件库工程化实战，BEM 命名规范与 useNamespace 深度解析

Vue3组件库BEM命名规范与useNamespace解析 本文深入探讨了Vue3组件库开发中BEM命名规范的应用及useNamespace工具的实现原理。传统手动编写CSS类名存在维护困难、易错和不规范等问题，而基于BEM规范的useNamespace工具通过自动生成类名完美解决了这些痛点。 文章详细拆解了useNamespace的核心实现，包括底层_bem拼接逻辑和对外暴露的闭包函数，并通过实战演示展示了在Vue组件中的具体应用。最后提供了一份传统写法与BEM工具写法的对照速查表，突出自动生成类名在动态

原创 Vue3 组件库实战(三)：Vue3虚拟滚动列表组件进阶，不定高度及原理分析！！！

本文介绍了如何实现一个支持不定高度项的Vue3虚拟列表组件。虚拟列表通过仅渲染可视区域内的元素来解决大数据量渲染导致的性能问题。其核心原理是使用一个"幽灵容器"撑开滚动条，同时动态计算并偏移"渲染区域"来显示当前可见项。文章通过电影放映机的比喻形象解释了虚拟列表的工作机制：长胶片对应数据总量，放映窗口对应可视区域，动态切换画面对应数据渲染。实现步骤包括初始化预估高度、计算可视区域、渲染偏移和动态修正真实高度。关键点在于使用ResizeObserver监听容器尺寸变化，

原创 Vue3 组件库实战(二)：Message组件和Vue3 进阶，手动挂载组件与 Diff 算法深度解析

Vue3 进阶：手动挂载组件与 Diff 算法解析 本文深入探讨了 Vue3 中手动挂载组件的实现原理，对比了声明式与命令式组件调用的差异。核心内容包括： 手动挂载必要性 全局提示、通知等组件更适合命令式调用 避免在模板中重复声明组件 关键 API 解析 createVNode：创建组件虚拟节点 render：将虚拟节点渲染为真实 DOM 实现步骤 创建容器元素 生成 VNode 并绑定属性 渲染到 DOM 并追加到 body 处理组件卸载防止内存泄漏 底层原理 VNode 的类型标记(ShapeFlag)

原创 Vue3 组件库实战(一)：《pnpm + monorepo + 代码提交规范+ BEM 环境配置》

本文详细介绍了使用Vue3+Vite+TypeScript+pnpm Monorepo技术栈搭建企业级组件库的基础架构。文章首先解释了Monorepo的优势，包括代码共享、统一规范和依赖一致性。然后从环境初始化、TypeScript配置、规范体系(Lint & Format)到代码提交规范(Husky + Commitlint)进行了逐步指导。特别强调了样式架构设计，介绍了BEM命名规范及其实现方法，通过useNamespace工具函数实现类名自动化生成。该架构为后续组件开发奠定了坚实基础。

原创 基于PDF.js的安全PDF预览组件实现：从虚拟滚动到水印渲染

本文介绍了基于PDF.js的安全PDF预览组件实现方案，重点阐述了虚拟滚动、双模式渲染和水印技术。通过虚拟滚动优化大文档加载性能，支持Canvas和HTML两种渲染模式以适应不同需求。水印功能采用响应式设计，在Canvas上添加多点分布的半透明水印，增强文档安全性。此外，组件还实现了防下载和打印控制功能，包括禁用右键菜单、文本选择和打印快捷键拦截。基于Vue3的组件封装提供了灵活的参数配置，如尺寸控制、主题切换等，最终实现了一个功能完善、安全可靠的PDF预览解决方案。

原创 微信小程序 web-view 与 H5 页面通讯实战指南

微信公众号网页授权（获取用户 openid、头像、昵称等）复杂的富文本展示第三方支付页面已有 H5 业务的复用本文以红包领取功能为例，讲解如何实现小程序与 H5 页面的双向通讯。优先使用 URL 跳转传参：比 postMessage 更可靠、实时性更好使用 localStorage 保持参数：解决授权跳转导致参数丢失的问题正确处理 URL 编码：避免特殊字符导致的问题做好平台兼容：iOS 和 Android 可能存在差异添加调试手段：方便开发和排查问题。

原创 Nginx反向代理 + HTTPS的微信公众号网页授权本地调试指南

本文提供本地微信网页授权调试的完整配置指南，通过Nginx反向代理和HTTPS解决开发痛点。主要内容包括： 问题背景：微信授权要求HTTPS协议和备案域名，本地开发使用HTTP和localhost无法满足要求。 解决方案：使用Nginx反向代理+自签名SSL证书搭建本地HTTPS环境，实现： 支持HTTPS协议 代码实时热更新 完全模拟线上环境 详细配置步骤： 安装Nginx并验证 使用PowerShell脚本生成SSL证书 配置Nginx反向代理规则 管理Nginx服务 该方案约5-10分钟即可完成配置，

原创 关于前端文件处理-实战篇

所谓 WebGL，就是指浏览器与显卡之间的通信接口，为了满足 JavaScript 与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式。某天阳光明媚的早上，app的同事问我：我这边有个上传图片的接口调不通，后端说你们前端接口调通了，那个前端input type=file 读取到的数据叫什么？允许开发者以数组下标的形式，直接操作内存，大大增强了 JavaScript 处理二进制数据的能力，，它们都是以数组的语法处理二进制数据，所以统称为二进制数组。

原创 高清屏canvas会模糊与代码实现方案

理清楚模糊的根本原因与代码实现方案为什么高清屏canvas会模糊高清屏模糊的产生原因前端开发要怎么避免这种情况发生呢什么是物理像素和逻辑像素在普通屏幕下， canvas 和 css 大小一样就不会模糊但是换了高清屏就算canvas 和 css 大小一样还是会模糊前端开发要怎么避免这种情况发生呢什么是物理像素和逻辑像素1.canvas画布，canvas上的1px就是屏幕的1px，既物理像素；2.canvas长宽样式，既逻辑像素；3.高清屏幕和普通屏幕，既设备像素比4.scale() 方法： 默认情况下，

原创 关于h5唤起app调研和app实现

如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。在 h5 页面上唤醒app ，需要用到 scheme协议（由app端小伙伴提供，关于什么是scheme文末补充），但是在微信浏览器里scheme不起作用，有没有印象有时在微信上打开的一些需要跳转到app的操作时，会提示在浏览器上打开，就是这个原因。所以需要先判断是否为微信浏览器，是微信浏览器的话，提示到浏览器打开，不是的话，再判断是Android端还是iOS端，然后做相应的处理。

原创 前端跨域问题

1.nginx遇到的坑确保你启动的nginx服务和你前端项目工程启的端口不冲突，然后要在修改本地的host文件，C:\Windows\System32\drivers\etc，加上127.0.0.1:8080（本地工程ip和端口号） linxiaohui.hqjy.com（你的域名，和nginx启动的域名一样，只是端口号不一样）1.2nginx: [emerg] unknown directive "锘? in D:\nginx-1.12.2/conf/nginx.conf:3问题：当时

原创 vue 鼠标移入移出事件执行多次(尤其ie)

<p @mouseover="over($event)" @mouseout="out($event)">互相关注</p>out (t) { t.target.innerText = '互相关注'},over (t) { console.log(t, 1) console.log(t.target.innerText, 1) t.target.innerText = '取消关注'},不能这么写，这么写的话ie10点击取消关注会卡死，应为mouseove

原创 新版本通知，判断资源是否存在，flv协议资源无法中断处理，vue3响应式，git revert，面包屑，flex-basic与width，vite热更新失效

日常踩坑

原创 你不知道的ES6-语法的用途

函数尾调用、proxy和reflect、symbol、promise、Iterater 和for…of1.函数尾调用指某个函数的最后一步是调用另一个函数。function f(x){ return g(x);}尾递归函数调用自身，称为递归。如果尾调用自身，就称为尾递归。递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。function factorial(

原创 vue 流星的样式和流光canvas

最近研究了一下公司高级写的流星的代码，发现挺好玩的，先上代码，后再分开解构样式：<template> <div class="index"> <div class="star" style="top: 0px;left: 500px;"></div> </div></template><script>import { getUrlPara } from '@/utils/factory'import

原创 前端性能优化、二进制、流（Stream）、缓冲区（Buffer）、图片文件转Base64，Base64转Blob，Blob转File对象、js和css与dom执行关系、游览器进程、woker、new

一、前端性能优化1.http从页面请求一个页面地址到返回看到全部数据的优化：强缓存/协商缓存、减少/合并请求数量、带宽、cdn的域名不同页面访问域名2.资源大小Js/css/html合并压缩3.优化图片雪碧图：优点减少请求，缺点图片资源过大，jpg有损压缩，压缩率大，没有图片透明，png兼容性好，可以图片透明，webp在ios和webview存在兼容性问题，svg矢量图，内嵌代码。4.Css/js加载和执行css写在head，js写在body（后面说为什么）注意：GUI 渲染线程为什么与

原创 12月19号-12月26号：一些css、游览器拦截跳转窗口、HTML文件解析、postMessage

一、CSS1.基础选择器：标签选择器：选的啥一类标签，无论嵌套有多深类选择器：类名开头不能是数字和中划线，跨域由数字、字幕、下划线、中划线组成，类名可以重复，多个空格空格隔开id选择器：不可重复，一个页签只能写一个id属性值，一个id选择器只能选择一个标签通配符选择器：给所有标签设置样式2.字体：font-family：左到右查找，电脑没有这个字体久显示下一个字体3.line-height:行高减除文字高度，均分分上下间距，常见场景1:设置单行文本垂直居中，多行文本不能设置垂直居中2.取

原创 12月13号-12月18号:排序算法、VUE生命周期详解、关于断点续传和秒传上传、js图片懒加载实现、微信分享链接变成了网址形式问题、Boostate

一、排序算法1.归并排序排序一个数组，我们先把数组从中间分成前后两部分，然后对前后两部分分别排序，再将排好序的两部分合并在一起，这样整个数组就都有序了。归并排序采用的是分治思想。分治，顾名思义，就是分而治之，将一个大问题分解成小的子问题来解决。小的子问题解决了，大问题也就解决了。const mergeSort = arr => { //采用自上而下的递归方法 const len = arr.length; if (len < 2) { return arr;

原创 12月6号-12月12号:动态库gsap、视觉差parallax-js、手势库hammerjs、打字库typed、多页签通信、xss和csrq、axios获取上传文件进度、多入口打包\

这周是来这里最忙的一周，周一请假一天，周二来了突然说周五要上线一个复杂的h5活动；手头还有pc和h5双十一要上线，杂乱的一周，最后还是按时上线了；又复杂又杂的一周，react和vue的增查改的不同，react偏向原生的js写法，vue有v-modal双向数据绑定功能，所以vue的增查改就一个v-modal，而react就要三个方法类，还望大家注意~~，来说说这周用到的库吧，动态库gsap，手势库parallax-js，打字库typed，一、gsapgsap用来过渡数字和动态样式：有动态完成的方法，很方便

原创 11月29号-12月5号：node文本切割、instanceof、链表、CSS3D天空盒子、文字环绕图片外边、nvs和vue响应式原理

原创 11月22-11月28总结，pc端适配、uniapp小程序下载三种情况、原型、继承、好用的函数、计算机组成原理、小程序和游览器的线程区别、深入vue、发布订阅模式与观察者模式

pc端适配注意：要知道移动端文字最小只能去到10像素，pc端大多只能去到12像素1.zoom整体缩放，火狐支持较低2.transform：scale（）整体放大缩小，ie9以下不支持3.监听窗口大小变化，px转rem，可能出现文字掉下第二行3.媒体查询，是完美适配，但是代码量会比较多...

原创 20211115-20211121：less和sass的区别；作用域；回流重绘；this指向；小程序学习

一、预编译样式比css样式更强大，变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数less和sass的区别变量符：sass$,less@less存在块级作用域，sass是全局作用域条件语句：sass支持ifelse，for；less不支持文件引用：Scss引用的外部文件命名必须以_开头，@import “_test1.scss”;；less和普通css一样二、作用域：1.注意：所有末定义直接赋值的变量自动声明为拥有全局作用域 function outFun2() { v

原创 解决前端精度问题，js写和number-precision库

学过前端的开发人员在项目开发的时候，都会遇到 0.1+0.2!=0.3 的诡异问题。按照常规的逻辑来思考，这肯定是不符合我们的数学规范。那么JavaScript中为啥会出现这种基本运算错误呢，其中的原理又是什么。这篇文章将从原理给大家梳理此问题的缘由计算机中的二进制接下来进入正文，学过计算机基础的人都知道，计算机底层是通过二进制来进行数据之间的交互的。其中我们应该要明白为什么计算机通过二进制来进行数据交互，以及二进制是什么计算机为什么要通过二进制来进行数据交互？在我们日常使用的电子计算机中，数字电

原创 活动页倒计时-worker-loader

一、无阻塞问题的方案：npm install worker-loader --save-devwebpack{ test: /\.worker\.(c|m)?js$/i, loader: "worker-loader", options: { esModule: false, }, },App.vue<template> <div id="button"> {{remainTimestamp}} </div&gt

原创 年会抽奖活动-随机抽

效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入样式 --> <link rel="s

原创 node 写下载接口， 前端接受文件流下载

nodevar http = require('http');var express = require('express');var fs=require("fs");var app = express();app.get('/download/*', function (req, res, next) {　//第一种方式 //var f="F:/ftproot/NW.js.docx"; //var f="f:/ftproot/我是中文的语言.txt" ////var f =

原创 vscode的settings.json最新配置

{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复,vscode es6语法检测配置 "editor.codeActionsOnSave

原创 请说说什么是BFC

BFC到底是什么东西BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。W3C：BFC是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用；简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性怎样触发BFCoverflow: hiddenposition: absoluteposition: fixeddi

原创 vue深入响应式原理

一.追踪变化：当一个普通的对象设置入data时，vue会遍历该对象，使用Object.defineProperty，把对象的属性设置getter/setter，每个组件实例对应一个watcher实例，当触发依赖项的setter，触发对应的watcher，从而使得它的组件重新渲染。二.检测变化的注意事项1.对象：无法监控对象的属性的新增和删除，解决：this.set(this.obj,key,value),对象合并，Object.assign(),...扩展运算符2.数组：无法设置数组的某个项的值：th

原创 前端滚动的方法（无兼容性问题）

1.最佳方法（vue）兼容性好document.documentElement.scrollTop = num;// 锚点跳转 async goScroll(anchor) { let target = document.getElementById(anchor); let currentTop = document.documentElement.scrollTop; let targetTop = target.offsetTop - 200;

原创 关于PC端游览器生成唯一标识

~~在图解http第一章说明，网络通信必须要同时知道IP地址和mac地址，ip地址可以获取到，关于mac地址就呵呵了一，关于IP地址：1.1IP地址编址方式ABC类ip地址规则：网络号+主机号生存，如下图1.2ip工作过程数据包传送的关键是将目标节点的IP地址映射到中间节点的MAC地址1.3搜狐获取ip地址<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script type="tex

原创 了解web及网络基础

网络基础TCP/IP(IIP协议不是IP地址)1.3.2 TCP/IP 的分层管理是在 TCP/IP 协议族的基础上运作 的，而 HTTP 属于它内部的一个子集；互联网相关联的协议集合起来总称为 TCP/IP；TCP/IP 的分层管理：应用层、传输层、网络层和数据链路层。层次化之后，设计也变得相对简单了。应用层：向用户提供应用服务时通信的活动，dns,http传输层：提供处于网络连接中的两台计算机之间的数据 传输。TCP，udp网络层：网络层用来处理在网络上流动的数据包。该层规定了通过怎样的路径（

原创 简单的http协议

将针对 HTTP 协议结构进行讲解，主要使用HTTP/1.1版本。学完 这章，想必大家就能理解 HTTP 协议的基础了2.1 HTTP 协议用于客户端和服务器端之间 的通信 HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同，用于客户端和 服务器之间的通信。 请求访问文本或图像等资源的一端称为客户端，而提供资源响应的一 端称为服务器端下面，我们来看一个具体的示例。下面则是从客户端发送给某个 HTTP 服务器端的请求报文中的内容。GET /index.htm HTTP/1.1 Host

原创 用JavaScript原生手写div的鼠标拖拽功能

一、三个事件onmousedown（鼠标按下），onmousemove（鼠标移动），onmouseup（鼠标松）鼠标按下时box.onmousedown = function(e) { console.log("e.clientX",box.offsetLeft); console.log("e.clientY",box.offsetTop); var e = e || window.event; //要用event这个对象来获取鼠标的位置 x = e.clientX - box.offs.

原创 唤醒淘宝app并跳转对应的商品详情页面

跳转测试地址：taobao://m.tb.cn/h.4Ab8FZy?sm=7ad5e7function loadURL(url) { var iFrame; var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X.

原创 H5和PC端setTimeOut定时器时间不准

在h5手机端时间不准的时候：监听事件visibilitychange重新更新时间 // 防止息屏后计时器停止，开启后刷新页面 let _this = this document.addEventListener('visibilitychange',function() { if(document.visibilityState=='visible') { _this.getLuckDraw() } })在pc手机端时间不准的时候：