- 博客(141)
- 收藏
- 关注
RSS订阅
原创 前端跨域如何调试，以及相关概念梳理【环境变量 本地代理 正向代理 反向代理 OPTIONS请求 CDN 等】
浏览器因同源策略，在协议、域名或端口号不同时，先向服务器发送OPTIONS预检请求，检查服务端是否允许跨域。若不允许，会阻止跨域请求。线上环境，前端项目已经整体打包为静态资源，vite-dev-server无法启动，本地代理自然也无法生效。这样在浏览器发送OPTIONS预检请求时，就会收到服务端允许跨域的配置，从而正常请求。前端日常开发时，项目的部署地址和接口请求的地址一般是同源的，不会跨域。本地调试跨域接口可以解决了，那打包部署到线上怎么办呢？来动态切换访问域名，也可以实现线上的跨域访问。
2025-03-11 14:14:52
462
原创 一文搞懂什么是TS，死记硬背不理解只会写成anyScript
取自element-plus的类型，引用该类型后可以直接使用内部属性。]) 表示固定长度和类型的数组。前端项目中，涉及到TS的部分，可以粗略划分为以下几大部分。要针对性的设计不同的类型规范，来避免代码可能造成的错误。数组 (Array 或 T[]) 表示特定类型的数组。前者是传入子组件的接口，后者是该接口请求发起需要的参数。，规范传入el-table内数据的类型结构。函数类型，定义函数的参数和返回值类型。可选params参数，要符合。，规范接口返回时的数据类型。可选api参数，要符合。
2024-10-30 17:28:56
7078
原创 详解安卓和IOS的唤起APP的机制，包括第三方平台的唤起方法比如微信
App Links是Google推出的类似于Universal Links的技术，它允许你在Android上使用标准的HTTP链接来打开特定的应用程序。Universal Links是苹果推出的一种更安全和可靠的网页与原生应用之间进行通信的方式。最开始微信是支持以上三种方法唤起第三方APP的，但是呗各大平台滥用，导致微信成了引流的平台。它可以让你用标准的HTTPS链接来启动你的应用，并且当应用没有安装时，会自动打开网页。”，是一种能将用户直接从链接带到App指定页面的技术，填写格式需要是。
2024-10-12 14:40:18
4661
原创 h5网页嵌套安卓苹果APP内 微信内打开H5等 遇到的各种适配问题与解决方案汇总 --持续更新
在站外拉起APP 可以用UniversalLinks。在站外拉起APP 可以用scheme协议。微信内可以借用友盟封装uslink实现。微信内可以借用应用宝实现。
2024-08-06 09:51:20
2406
原创 前端前沿web 3d可视化技术 ThreeJS学习全记录
就像前端需要webpack来进行模块化开发 three JS也需要一个对应的工具，他就是PARCEL https://www.parceljs.cn/随着浏览器性能和网络带宽的提升 使得3D技术不再是桌面的专利 打破传统平面展示模式。Threejs封装了WebGL的底层细节，可拓展性强，有很多开源的插件和工具，更易上手。就像2G时代文字信息是主要传输媒介 3G时代的图片 4G时代的视频。拷贝项目到本地即可查看文档 案例文件 使用编辑器等。随着硬件性能与技术的提升，未来的前端也一定是3D的。
2023-03-11 22:52:09
14717
3
原创 自用快速复习(前端高频常用知识大汇总)前端入门知识树
数组(223查找排序判断遍历定位映射)字符串(3slice substr replace 2 4值索引indexof search索引值charAt charCodeAt)对象(只拷贝基本数据类型和引用的地址-浅 真正实现数组对象的拷贝-深 Object.assign() {…obj}解构 JSON)解构(let [foo, [ , baz], ...arr] = [1, [[2], 3], 4, 5];数组解构对索引可嵌套可省略 let { round:r } = Math;
2021-07-16 10:19:17
1015
1
原创 WSL 2 + Docker 本地全栈开发环境配置指南
本文介绍了在Windows系统下使用WSL 2和Docker搭建Nuxt全栈开发环境的最佳实践。主要内容包括： 安装配置WSL 2（Ubuntu系统） Docker Desktop与WSL 2的集成配置 项目文件迁移到WSL内部以提升I/O性能 通过国内镜像快速安装Node.js环境 VS Code远程开发模式连接WSL 使用Docker启动数据库服务并运行项目 重点解决了Windows下Node.js开发常见的C++依赖编译问题（如node-gyp、sharp报错），同时提供了与生产环境一致的Linux开
2026-06-05 17:52:29
441
原创 从原理到落地：前端 SEO、SPA 的挑战与 Nuxt SSR 实战指南
摘要： 本文深入解析前端SEO优化与SPA的挑战，重点探讨SSR与CSR的差异及Nuxt 3的SSR实战方案。内容涵盖SEO原理、SPA的局限性、SSR渲染流程，以及通过Nuxt 3实现SSR接口、Meta管理、Sitemap动态生成、结构化数据等可落地实践。同时提供常见问题排查清单，如非POJO序列化错误、Hydration不匹配等，为电商等高SEO需求场景提供系统优化指南。
2026-03-26 11:28:53
356
原创 OpenClaw小龙虾 通过腾讯云部署方案实现
本文介绍了通过腾讯云快速部署个人聊天机器人的方法。依托腾讯生态（钉钉、QQ、企业微信等），可实现云端部署的智能助手，具有部署简便、随时在线等优势。但缺点是难以直接访问本地资源，无法处理电脑文档等本地任务。文章提供了腾讯云接入教程链接和部署流程图，帮助用户快速搭建云端聊天机器人。适合需要移动端智能助手的用户，但对本地自动化需求较高的场景建议选择本地部署方案。
2026-03-10 10:21:17
352
原创 PC 到 H5 适配指南：从设计本质到主流技术原理与方案
本文探讨了PC端到H5端的适配本质是内容流的重组，分析了不同终端的内容展示差异。介绍了三种响应式设计方案：1）媒体查询+Flexbox+Rem方案，通过断点设置实现多端适配；2）Tailwind CSS工具优先方案，直接在HTML中实现响应式逻辑；3）移动端专属框架方案，适用于复杂应用开发。重点阐述了第一种方案的技术实现细节，包括viewport设置、媒体查询、流式布局和rem单位的配合使用，并介绍了amfe-flexible+postcss-pxtorem工具链在纯H5项目中的应用优势。
2026-03-04 15:03:17
256
原创 个人网站部署完整版(域名购买、网站部署、IPC备案、腾讯云CloudBase、接入OpenClaw)
方案A（纯Serverless）：自定义域名→ 备案 → 绑定到 CloudBase静态网站托管 → 访问网站。方案B（传统服务器）：自定义的域名→ 备案 → 绑定到 轻量应用服务器 → 在服务器上配置Web服务（如Nginx）并部署网站文件 → 访问网站。作为前端程序员，想要快速部署当然选择方案A。这里选择了**腾讯云CloudBase**作为最终解决方案。绑定完成后访问自定义域名，就会直接看到网站了。
2026-02-28 14:44:39
852
原创 微信小程序的迁移与快速开发：
最后选择运行到微信开发者工具，HBulider会自动将项目打包，生成微信开发者工具的项目格式，并自动启动项目进行预览。等平台编写一套代码，可发布到iOS、Android、鸿蒙、Web、以及各种小程序(微信/支付宝/抖音/QQ/钉钉等等）多个平台。再新建一个标准HBulider项目结构，将vue构建的H5页面相关内容进行迁移改写，比如： 静态资源迁移、rpx改写、windows和localStorage等原生写法改写等。等基础标签，需要将H5的HTML/CSS/JS重写为小程序的WXML/WXSS/JS。
2025-11-07 14:20:12
552
原创 chrome浏览器插件开发
本文介绍了浏览器插件的基本概念和开发方法。浏览器插件是拓展网页功能的程序，可以修改网页元素、实现自动化操作。Chrome扩展程序使用HTML、CSS和JavaScript构建，并能调用Chrome API。常见插件类型包括Chromium内核、Firefox和Safari浏览器插件。开发需要配置manifest.json文件，包含service worker和content scripts等组件。文章分享了通过最简单的manifest配置快速实现插件功能的方法，但这种方式仅限内部使用，上架商店需要完整审核流
2025-07-17 18:13:23
809
原创 H5支付 两种成熟方案
H5支付，对前端来讲并不算难。主要工作量都在后端，需要对接支付宝API文档配置大量参数与商户信息。前端需要做的是正常调取支付接口，拿到配置好的支付信息，触发后续流程，再利用本地存储拿支付订单号判断支付结果即可【如果跳转支付宝的H5支付中间页，不同于IOS的机制，在嵌套安卓APP-webview的情况下会被销毁，无法保持页面状态，其中一个解决方案就是localStorage需要保存支付订单号】。
2024-09-26 11:13:47
2001
原创 H5网页嵌在APP内部 手机锁屏后再打开 setInterval会重复执行
在H5网页嵌入到APP内部时，如果手机锁屏后再打开，可能会遇到setInterval重复执行的问题。这是因为当应用进入后台或屏幕锁定时，浏览器的定时器可能会暂停或重置，导致重新激活时定时器被重新启动。WebView恢复：当用户解锁手机并返回应用时，WebView可能需要重新加载或恢复页面，这会导致setInterval函数重新执行。系统休眠：当手机锁屏时，操作系统可能会将应用置于休眠状态，暂停所有活动，包括JavaScript的定时器。
2024-09-23 15:15:19
730
原创 postcss-pxtorem插件理解与使用
rem（font size of the root element）是指相对于根元素html的字体大小的单位。简单的说它就是一个相对单位。设置 html 的 font-size 属性，rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。如果根元素（即HTML元素）元素的字体大小是 16px，那么 1rem 就等于 16px。如果 HTML 元素的字体大小改变，那么使用 rem 作为单位的元素的大小也会相应地改变。项目地址postcss-pxtorem是一个PostCSS插件。
2024-09-13 14:23:47
1305
原创 前端发布 CDN缓存
公司给服务器加了CDN，导致有时前端代码上传打包后，正式环境页面效果却不更新。每次都需要去找运维刷CDN…让我彻底记住了CDN缓存CDN（Content Delivery Network，内容分发网络）是一种广泛使用的互联网技术，旨在提高用户访问网站的速度和可靠性。CDN 的核心思想是将网站的内容缓存到全球分布的边缘节点上，让用户能够从最近的节点获取数据，从而减少延迟和带宽消耗。
2024-09-13 11:57:26
1109
原创 H5接入Steam 获取用户数据案例 使用 OpenID 登录绑定公司APP账户 steam公开用户信息获取 steam webapi文档使用
communityvisibilitystate - int型，资料可见模式 1 = 隐私 2 = 仅好友可见 3 = 用户好友的好友也可见 4 = 只对登录Steam的用户可见 5 = 公开，任何人可见。personastate - 用户状态 0 - 不在线 （如果资料为隐私也是如此） 1 - 在线 2 - 忙碌 3 - 离开 4 - 休息？gameid - 如果用户在游戏中，这会是以String形式的游戏APP ID（DOTA2是570）steamid - 用户64位ID。
2024-09-09 17:00:23
6238
原创 前端接口请求与后端交互详解 联调后端取不到值 自己的一点记录写的比较随意 会比较乱但都是干货
Content-Type 为 multipart/form-data FormData的功能远超application/json。但是chrome浏览器的开发者工具会根据这个ContentType区分显示方式。Content-Type 为 application/json。Request Payload会对非字符串做字符串转换。默认的Content-Type为text/plain。Content-Type设置的不同，数据提交方式相同时。这两种提交都会将数据放在请求体中。请求header设置。
2024-08-28 10:29:43
499
原创 JS常用url 链接入参出参 拼接新参数提取参数 可直接复制粘贴的工具函数
其实现在并不想写这种博客了，毕竟工具类函数真的随便搜，加上现在各种AI工具让搜索效率大幅提升了，很容易就能搜到可用函数。但看到写的很棒的还是想记录下，就当水了一篇吧23333。
2024-07-30 14:15:13
382
原创 Vue3接入悟空IM实现直播评论互动需求 前端即时通讯 悟空IM连接失败问题 websocket IOS环境 safair浏览器连接失败问题
之前用websocket实现过跨端发送和接收任务，不算难。这次的需求复杂些，需要实现直播的评论互动，改用开源的悟空IM。
2024-07-22 14:47:31
1465
原创 打包的意义 作用等前端概念集合 webpack基础配置等
model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
2024-04-26 11:10:25
719
原创 Vue的图片懒加载 vue-lazyload插件使用
是一种网页性能优化技术，页面加载时仅加载可见区域内的图像，图像只会在用户滚动或浏览到它们时才会被加载，而不是在页面一开始就全部加载。
2024-04-15 16:27:55
355
原创 理解vuecli和nginx启动Vue项目区别
Vue CLI 和 Nginx 在启动 Vue 项目时各自扮演着不同的角色，它们之间存在一些关键的区别。以下是关于这两者的主要差异：总之，Vue CLI 和 Nginx 在启动 Vue 项目时各自扮演着不同的角色。Vue CLI 主要用于本地开发环境的启动和管理，而 Nginx 则用于生产环境的部署和静态资源托管。它们在功能、用途、启动与配置以及实时重新加载与性能优化等方面存在差异。当然 也可以在本地下载Nginx服务器，配置好启动后，通过host文件指向本地代理，访问dist文件的形式实现本地运行
2024-04-12 14:23:06
665
原创 当我们在地址栏输入URL的时候浏览器发生了什么
浏览器缓存 -> 操作系统缓存 -> 路由器缓存 -> DNS缓存 -> 根域名服务器查询。浏览器解析HTML代码 分别渲染DOM树和CSS树 经过回流重绘最终展示。OSI七层模型(应用表示会话传输网络数据链路物理)后端服务器监听特定端口收到后进行对应的逻辑处理。后台代码经过解析封装 对数据库操作等。网络层：IP协议查询Mac地址。应用层：发送 HTTP 请求。传输层：TCP 传输报文。最终返回响应给浏览器。
2024-03-31 13:32:05
412
原创 浏览器页面缓存机制
在响应头由 Expires(服务器返回的过期时间) 和 Cache-Control (优先级更高no-store： 禁用缓存 no-cache：不用强缓存，每次需向服务器验证缓存是否失效) 控制。Chrome会根据本地内存的使用率来决定缓存存放在哪，如果内存使用率很高，放在磁盘里面，内存的使用率很高会暂时放在内存里面。浏览器和和服务器对每个缓存资源先商量一个 “保质期” ，被浏览器缓存的资源在“保质期”内是有效的。如果数据有更新就会返回200状态码，服务器就会返回更新后的资源并且将缓存信息一起返回。
2024-03-31 12:28:48
411
原创 React入门 学习全记录(适合和我一样有Vue经验想学习react的同学~)
相对于Vue而言，react因为更复杂的JSX语法和社区文档，React项目代码结构相较vue不是太清晰和直观等原因，学习成本比VUE高。但也是前端必会的技术栈。是由Google开发，对java和c的使用者而言，angular的静态检查、依赖注入的特性，以及面向对象的编程风格，使得angular都要更亲切一些。同时，React真正的在拼开发者的JS功底，如果一个开发者对于JS不精通或者熟练，也会在学习Reat时感觉比Vue难。是一款轻量级、渐进式、灵活且易于学习的框架，适合快速构建单页面应用。
2024-03-13 19:00:35
1287
原创 Mock.js使用
以前开发流程中，接口比较慢时都是自己写点死数据测试，不够高级~目前在新项目中接触到了mock接口，现在记录学习下：在Vue项目中，可以使用mock来模拟接口，方便进行开发和测试。且正式环境中应该移除mock的配置和依赖，使用真实的接口数据。Mock.js官网地址。
2023-09-11 10:07:22
403
原创 Uniapp uni-app学习与快速上手
uni，读you ni，是统一的意思。Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位，致力于推进HTML5发展构建，HTML5生态。2012年，DCloud开始研发小程序技术，优化webview的功能和性能，推出了HBuilder可视化开发工具。2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它是能接近原生功能、性能的App，并且即点即用，第一次使用时可以做到边下载边使用。
2023-06-15 16:33:14
3359
原创 VueQuill 富文本 快速上手开发全记录——附axios小坑 需手动重写axios以支持formdata对象
【代码】VueQuill 富文本 快速上手开发全记录。
2023-03-30 17:09:12
493
原创 访问GITHUB太慢修改HOST文件 以及原理是什么
访问GITHUB太慢需要修改windows HOST文件的原理是：本机网络设置的 DNS 服务器解析 Github 相关域名到遭受污染的 IP 地址，这些 IP 地址要么本身无法访问，要么节点过远，从而导致了访问失败或者速度缓慢。修改 HOST 文件可以绕过公共 DNS 解析，直接访问 Github 在韩国、日本等的服务器，从而达到加速访问的目的。hosts 文件路径。
2023-03-11 21:50:56
1165
原创 three.js和WEBGL的关系 优劣对比 哪个更流行 在中国更好就业(本文由chatGPT自动生成)
根据GitHub上三个库（BabylonJS、Threejs、LayaboxJS）在2020年12月份到2021年12月份之间新增star数量对比分析结果显示：BabylonJS新增star数量最多（约为5000），其次为Threejs（约为3000），最后为LayaboxJS（约为1000）。Three.js是一种高级的库，它封装了WebGL的底层细节，提供了更简单和友好的接口，以及丰富的功能和示例。WebGL是一种低级的API，可以直接在浏览器中绘制3D图形，但它需要编写很多代码和处理复杂的数学计算。
2023-03-11 19:59:52
4658
原创 Vant 弹出列表多选 输入框下拉选择 (可直接复制使用)
项目要做移动端，部分功能迁移过程中发现，VantUI组件库不支持原Element组件库的部分功能，例如el-select 可以做到输入的同时下拉选择 下拉多选。故需要手动改写，分享记录下代码。
2023-02-20 13:43:41
11227
2
原创 为什么要有websocket 如何使用 伪服务器推 HTTP定时轮询 长轮询 (笔记)
websocket协议同样基于TCP，在HTTP的基础上使用。将HTTP请求超时设置的很大，在较长时间内等待服务器响应，例如百度网盘的扫码登录就是用的这种长轮询机制。为应付网页游戏，网页聊天，网页协同办公等复杂场景，websocket协议应运而生。HTTP1.1基于TCP协议，但只支持同一时间段的单向通信，也就是半双工。以上两种方法本质还是客户端主动请求数据 只能使用扫码等简单场景。TCP是全双工协议，通信两端都可以主动向对方发送数据。随机base64码 用于协议升级转换后的通信验证。
2023-01-31 11:08:01
438
原创 VUE项目添加全局滚动条记录功能
思路：在离开某个路由时 保存当前页面的滚动条高度 再次访问时将滚动条高度重新赋值方式1：尝试使用VueRouter的scrollBehavior()方法调试时发现 在进入无滚动条页面返回有记录值的有滚动条页面时会出现问题。且该方法执行在页面渲染之前，弃用换其他方法。方式2：全局混入activated生命周期VueX：Main.jsAPP.vue或其他根组件
2022-12-07 14:04:27
588
原创 TS学习笔记 类型标签 联合类型 枚举类型 泛型 类型别名
js天生没有编译和类型检查的束缚 灵活好上手 结合项目使用时也可以做到热更新提升开发体验。(需要编译的JAVA以前开发DEBUG很麻烦但现在有了容器编排技术，也可以实现类似效果)TS是JS的超集，添加了类型标注，不能直接在浏览器或Node中运行(Deno可以支持)，其他情况都需要TSC转译为JS后执行。TS可以提升代码的健壮性，可维护性，可扩展性与可读性变量添加类型标注参数添加类型标注可选参数:number){}函数返回值类型标注联合类型类型别名。
2022-11-18 15:37:45
1770
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人