- 博客(42)
- 收藏
- 关注
RSS订阅原创 qiankun微前端库-沙箱（sandBox)原理
qiankun通过微前端技术将多个应用通过子应用集合在一块，为了避免js和css这两大维度的冲突，采取了沙箱机制来进行隔离，使应用之间的环境相互独立，互不干扰。
2025-04-04 09:00:00
353
原创 qiankun css隔离导致antd样式失效问题
与 Ant Design（antd）的全局样式加载逻辑冲突，导致子应用的 antd 组件样式被覆盖或未生效。配置启用了Shadow DOM将子应用与外部dom完全隔离，自然也包括了body，导致子组件中antd的样式无法作用到body上，导致了样式的丢失。Antd的Modal，Drawer等组件默认是挂载在body标签下的，strictStyleIsolation。例如，在qiankun中，通过。方式使用StyleProvider可以提高antd的css样式权重，从而恢复样式。
2025-04-03 21:00:00
179
原创 qiankun微前端库-shareModel
在微前端框架中，shareModel是一个用于的核心概念，主要用于实现主应用与子应用之间的和。它允许主应用和子应用之间共享状态或方法，解决多应用间数据互通的问题。
2025-04-02 18:14:18
185
原创 qiankun微前端库-路由模式选择示例
/ 主应用的路由配置（React Router 示例）// 渲染容器组件2. 注册多个子应用在主应用中，通过注册子应用，并为每个子应用指定唯一的activeRuleentry: '//localhost:8081', // 子应用1的入口地址container: '#child-app-container', // 共享同一个容器activeRule: /^\/home\/app1/, // 匹配路径 /home/app1},
2025-04-02 17:46:12
564
原创 qiankun 微前端库-应用之间的通信（一）
window用户可能是在构建微前端架构，子应用之间需要共享数据或者触发事件。这时候通信机制就很重要了。在微前端架构中，子应用之间的通信可以通过以下几种方式实现。window最简单的通信方式是通过全局变量或函数，但需注意和。
2025-04-02 14:28:44
251
原创 qiankun微前端库-快速搭建一个微前端应用
2. 主应用配置(本次实践使用react作为主应用）2.1用create-react-app创建一个react应用，修改App.js文件，设置#subapp-container为子应用的容器主应用不限技术栈，只需要提供一个容器 DOM，然后注册微应用并 即可。 DOM 容器（）是主应用为子应用提供的一个 HTML 元素（也称为“宿主容器”或“挂载点”）。子应用的内容会被动态加载到这个容器内，从而实现不同子应用的隔离和切换。以下是详细说明：2.2 修改index.js入口文件当用户访问主应
2025-04-02 00:30:35
1012
原创 qiankun微前端库-什么是微前端？
由于主应用微应用都能做到技术栈无关，qiankun 对于用户而言只是一个类似 jQuery 的库，你需要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun 的 HTML entry 及沙箱的设计，使得微应用的接入像使用 iframe 一样简单。
2025-04-01 15:34:50
785
原创 如何实现跳转页面之后，取消当前页面还未完成的请求？
在前端开发中，当页面跳转时取消当前页面未完成的请求是一个常见的需求。以下是几种主流框架的解决方案，结合通用的API 实现这一功能。是浏览器原生提供的 API，可以取消未完成的异步请求（如fetch或signalabort()在 React 中，可以通过useEffect的清理函数或路由守卫（如）来实现。useEffect在 Vue 中，可以使用钩子或 Vue Router 的导航守卫。如果使用 Axios，可以通过对于复杂应用，可以维护一个全局的请求管理器：。
2025-04-01 14:41:57
244
原创 当qps达到峰值时前端怎么处理？
QPS（Queries Per Second，每秒查询量）峰值是指系统在某一时间段内能够处理的最大并发请求数，通常用于衡量系统的性能和容量。它是评估系统在高并发场景下表现的重要指标，尤其在电商促销、社交平台流量高峰、金融交易系统等场景中具有重要意义。当系统QPS达到峰值时，前端需要通过一系列优化策略来保障用户体验，同时减少对后端的压力。
2025-04-01 10:42:45
778
原创 使用同一个链接，实现pc端打开是web页面，移动端打开是h5页面
，用于向服务器声明客户端的软硬件环境信息。在HTTP请求中，浏览器及前端框架发起的请求。（简称UA）是HTTP协议中客户端（如浏览器、爬虫、应用程序）在发送请求时附加的。中添加JavaScript代码来检测设备类型，并根据检测结果重定向到相应的页面。的一部分，用于告知缓存服务器（如 CDN、反向代理）。1. Node.js (Express) 示例。返回不同内容时，必须设置。2. Nginx 配置示例。3. 创建H5页面 (
2025-04-01 10:21:48
891
原创 微信小程序各种id的作用
通过绑定应用至微信开放平台并获取 UnionID，开发者可实现跨平台用户身份的统一识别。需重点关注开放平台配置、用户授权合规性及数据安全防护。微信开放平台是 技术驱动型工具，侧重多应用能力整合与开发者服务；微信公众平台是 运营驱动型工具，聚焦单一公众号的内容管理与用户互动。两者可通过开放平台绑定实现 UnionID 互通，但账号体系、功能权限和服务对象存在本质差异。
2025-03-31 22:49:09
515
原创 uni-app开发微信小程序
下载并安装 UniApp 官方开发工具 HBuilderX，支持 Windows/macOS 系统68。前往微信开发者工具官网下载安装包，完成安装后开启服务端口（设置 → 安全设置 → 开启服务端口）。通过上述步骤，可高效完成 Uni-App 与微信开发者工具的关联及调试。
2025-03-31 22:33:26
414
原创 微信小程序测试号
打开微信公众平台测试号申请页面（如或开发者工具相关入口），直接使用微信扫码登录并完成测试号的创建。创建成功后，测试号会自动生成唯一的 AppID，无需手动填写企业资质或支付认证费用。在开发者工具中新建项目时，需填入该 AppID 以关联测试号。在微信开发者工具中勾选“不校验合法域名、TLS 版本等”选项，可跳过网络请求域名的校验，便于本地调试。通过开发者工具生成预览二维码，用手机扫码可直接体验测试版小程序；如需调试网络请求，需在手机端开启“打开调试”功能。
2025-03-31 22:26:01
313
原创 前端如何实现水印功能
后，该元素将不会响应任何鼠标事件，包括点击、悬停、拖动等。这意味着用户无法与该元素进行交互。是一个CSS属性，用于控制元素是否可以成为鼠标事件的目标。具体来说，当一个元素设置了。通过 JavaScript 动态生成水印，可以更灵活地控制水印内容和样式。文本水印是最常见的水印形式，通常用于保护网页内容。伪元素来实现文本水印。
2025-03-31 18:35:46
901
原创 web中静态资源加载失败的降级处理
在Web应用中，静态资源（如CSS、JavaScript文件、图片等）加载失败可能导致页面样式异常或功能不可用。为了提升用户体验，需要对静态资源加载失败进行降级处理。
2025-03-31 17:50:33
316
原创 移动端h5页面如何实现上拉加载，下拉刷新
下拉刷新：用户手指向下滑动屏幕时触发数据刷新的交互设计，主要用于重新加载最新内容（如新消息、动态更新）。上拉加载：用户滑动到页面底部时自动加载更多数据的交互模式，用于分批次加载历史内容（如商品列表、新闻分页）。
2025-03-31 17:24:31
834
原创 URL Scheme 和微信 JS-SDK 的区别
是一种自定义的 URL 协议，用于在移动应用之间进行跳转和通信。它允许一个应用通过特定的 URL 打开另一个应用或执行特定的操作。URL Scheme 类似于网页中的 URL，但它们是为移动应用设计的。微信 JS-SDK 提供了一系列功能，如分享、支付、地理位置等，这些功能依赖于微信提供的特定环境和权限。微信提供了多种内置的 URL Scheme，可以在 H5 页面中使用，以实现特定的功能。以下是如何在微信 H5 页面中使用 URL Scheme 进行跳转的示例。首先，需要检测当前环境是否为微信浏览器。
2025-03-31 14:02:49
502
原创 如何解决页面请求接口大规模并发？
高频轮询或WebSocket推送引发持续并发，如股票行情、在线协作编辑的频繁状态同步。前序请求结果触发后续多个并行请求，如选择省份后需同时加载城市列表和区域统计数据。用户执行批量下载/删除操作时触发大量并行请求，如选中100个文件执行批量删除。页面启动时需同时请求用户信息、配置数据、多模块内容等，导致瞬间高并发请求。 - 超长列表建议使用虚拟滚动方案（如react-window库）示例：电商首页需加载用户登录态、推荐商品、广告位等10+接口。示例：管理后台批量删除500条订单记录。
2025-03-29 09:30:00
800
原创 微信小程序内嵌H5的技术实现与注意事项（二）
web-view>微信的组件允许你在微信内置浏览器中嵌入网页内容。这使得你可以将现有的网页应用集成到微信小程序中，提供更好的用户体验。以下是关于微信<web-view>
2025-03-28 17:36:30
908
原创 微信网页开发
微信网页开发是微信生态中容易被忽略但实际应用广泛的技术领域。它不仅限于公众号和小程序，而是通过H5页面与微信原生能力深度结合，形成灵活的功能扩展方案。
2025-03-28 15:23:34
983
原创 前端如何实现大文件上传
大文件上传是一个常见的需求，尤其是在处理视频、音频、文档等文件时。直接上传大文件可能会导致性能问题、网络中断或服务器负载过高。为了优化大文件上传过程，可以采用分片上传（Chunked Upload）和断点续传（Resumable Upload）等技术。以下是一个使用 TypeScript 和 React 实现大文件上传的示例，结合了分片上传和断点续传功能。分片上传将大文件分割成多个小块（chunks），逐个上传这些小块，最后在服务器端合并这些小块。
2025-03-28 13:30:00
310
原创 js超过number最大值的数怎么处理
科学计算或天文数字处理时可能出现，例如计算宇宙原子总数等极端场景。JavaScript使用64位双精度浮点数存储数值，仅能精确表示。超出此范围的整数将无法精确存储，导致精度丢失。时，JavaScript会将其转换为。（正无穷大）35。
2025-03-28 00:30:00
125
原创 H5 移动端适配核心方案与实现
移动端指的是Viewport中的Layout Viewport，视区所指为浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight大小，不包含任务栏标题栏及底部工具栏的浏览器区域大小。（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。是视口宽度百分比单位，
2025-03-27 16:09:19
371
原创 前端如何实现微信，qq等第三方登录
。这种登录方式利用了用户在第三方平台上已有的账号和密码，避免了在新应用中重新注册的麻烦。常见的第三方平台包括和等，这些平台通常拥有大量用户，用户可以通过这些已有的账号快速登录其他应用。。
2025-03-27 13:15:00
205
原创 在跨域名的应用之间共享 Token（二）
Auth -->|通过 postMessage 传递(Token)| sub1。Auth -->|通过 postMessage 传递(Token)| sub2。在认证服务端，配置 CORS 允许客户端子域的源。：子域名必须在请求头中包含。在完全不同的子域名（如。
2025-03-26 17:24:01
235
原创 Cookie 自动携带的规则
Cookie 只会自动携带到满足SecureDomainPath/api当用户通过浏览器访问服务器（例如）时，服务器可以通过Set-Cookie响应头发送 Cookie。Cookie 的域名由服务器在Set-CookieDomain。
2025-03-26 11:11:17
818
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人